Strange IE8 problem with a select that runs AJAX

Question

I've got a strange error with IE8 and postcode lookups. It may not be postcode lookups as such that's causing it - just an AJAX call that modifies a select. I've set up a test page here. If you click on Find Address, and then double click (quite quickly) on one of the addresses that is within the boundary of the red-bordered div, you see the below bug in IE8.

Note: I'm finding it inconsistent to reproduce the bug, but if you scroll the list of addresses right to the bottom and then double click fast on Holly Cottage it should reproduce the bug.

If anyone can shed on light on this quirky behaviour it'd be much appreciated. Is this an IE8 bug?

Answer 1

I've found the problem - browsers do not like having javascript:void() set for the href attribute. If you want to have a working anchor whose default action is canceled, then use # for the href attribute, then have the event handler for that anchor return false to cancel the browser's default action.

---

Erm... right... sorry for my eagerness to post an answer and not double check that the problem was properly solved.

I'm finding it difficult to find the problem. I'm only going to hazard a guess here: the two effects running and ending at the same time confuses IE8, causing the div to be set to a height of 1px. This of course assumes a bug in the jQuery implementation of the effect queue, which I definitely cannot vouch for. It's just my theory at the moment - my unfamiliarity with IE developer toolbar prevents me from investigating further.

Answer 2

It's a problem with You running animations I suppose. Your asynchronous action triggers some sliding animations.

First: Try logging endings of all animations (put a callback function in the slide* call and log some text to console.) to see if they run in correct order - I suppose they don't and that's the problem.

Second: Try adding .stop() before every asynchronously triggered animation so that it breaks other animations working at the same time.

Third: If the above didn't help try this for every animation:

if($(this).data('running')==0){
$(this).data('running',1).slideUp(function(){$(this).data('running',0)});
}else{ /*call with timeout or ignore...*/ }

It's a basic semaphore on an element.

OR

You can use .animate and animation queues in jQuery properly, but it'd be a bit of an overkill for this case (I think).

Answer 3

My first reaction is it may be a CSS issue. If I find the default value, and click the 'Find Address' link one time, I see a similar (though not identical) layout problem. The height on each section looks collapsed, as if the floating sections aren't picking up the correct content height. If I incrementally specify a height on each contentRow or switch the display from block-none-block on pcodeLookupAddressEdit_risk_address, the formatting is corrected.

I don't know the specific cause, but, you may want to check the CSS and the show/hide behavior on the slide.