View Full Version : jQuery autocomplete doesn't work in IE after page refresh

02-10-2011, 12:00 AM

maybe a bit of an obscure one, but I'm using this (http://jqueryui.com/demos/autocomplete/) autocomplete here (http://www.xelawho.com/map/twocolumn5.htm) which works perfectly EXCEPT if you refresh the page in IE, in which case it does nothing.

ctrl-F5 brings the same result. You have to clear the cache for it to work again.

I've tested the demo page in IE (works fine after refresh) and tested my page with the local array of programming languages provided in the demo (same problem after IE refresh), so I'm thinking there's something about my code.

But I have no idea what that "something" would be.

Thanks in advance for any suggestions.

02-10-2011, 04:46 AM
Obviously, there is a race condition, which means that of two delayed parts of your code, either one could run first, depending on the cirumstances (contents of the browser cache, performance of the Javascript engine, internet connection speed, ...).

Let's play a little game here: You find out where in your code that autocomplete is being activated, place a breakpoint there, and use the console to check if everything you use to activate the autocomplete is already defined. You will find that one of those things isn't. Then you think a bit about how you would have to change your code, so that problem can't occur. I can help you with the last one.

02-10-2011, 07:00 AM
sure, I'll play your little game. Who knows? I might even learn something. But one last stupid question before we start:

Being that it's an IE-only problem, does that mean I have to debug in IE? I only just learnt how to use firebug, so I wouldn't mind the home ground advantage... Or being that FF doesn't have a problem, am I not going to see the problem there?

02-10-2011, 09:23 AM
Oh, sorry, you'll have to use IE; you'll get to the debugger by using F12, and everything basically looks and works the same there (Except you have to click on "Start debugging" in the script panel before it actually works). You'll only see the problem when it actually occurs. Of course it could also happen in Firefox (that's the thing about race conditions, they could go either way), but if you can't reliably reproduce the issue there, you'll have trouble debugging it.

02-10-2011, 04:18 PM
Oh, sorry, you'll have to use IE

well, I'm bucking for bonus points before I even begin.

I'm using IE7 and F12 does literally nothing. I can, however, get to a satanically-designed little toy called "Script Debugger" by going View>Script Debugger>Open

At which point I follow this procedure (as per the "help" file):

1 Set breakpoint
2 Click a button on page to get script running
3 Nothing happens, so step through script because "start debugging" button is permanently greyed out
4 Type variable into Command Window
5 Restart IE because it has frozen up.

So I hope there's no time limit on this game...

02-10-2011, 05:24 PM
No. In the interests of me not strangling the cat (not a quaint euphemism, btw, but a real-life possibility) I am abandoning the ironically-buggy Script Debugger and reverting to Firebug.

So what I figure is that the autocomplete starts on line 578, being that the only other relevant part of the code is just the input box to display the results. Firebug tells me that, apart from setting up the document and a couple of function calls, the only variable there is gmarkers. Which is defined (as you would expect, being that it works OK in FF).

I get nothing from marker.myname which I thought I might, but being that it is nothing (and not undefined) I guess that is OK.

So what I'm thinking is that IE caches the input box so that it loads faster on refresh. But refreshing the page doesn't give the code the time to populate the array used for the autocomplete because the input box pops in first, having been loaded from the cache and not the code.

So, if any of that is vaguely true, there would seem to be two solutions: ensure that the input box doesn't get cached (thus leaving time for the array to get populated) or move the autocomplete further up the chain of events so that the array gets made before the cached box does.

EDIT: or the third possibility - ensure that the array gets cached as well?

How am I doing so far?

02-10-2011, 07:47 PM
Did you have problems with IE's debugger? Are you sure you're using IE 8 or 9?

A few remarks:

You're not getting anything for marker.myname, because your breakpoint is probably in the wrong scope. You're using it inside an anonymous function inside a $.map() call, so setting the breakpoint inside that anonymous function (by putting debugger; in there) should give you something, so that's not the problem.

The thing you say about the caching issue is not wrong, but it's really just a guess. It might or might not be the case, and it doesn't really help you fixing the problem, does it?

Ok, here it comes (because you're not going to find it in Firefox, where the problem doesn't arise):

You are using $('#autocomplete'), which is jQuery's way to access DOM objects. If you use the IE debugger and type $('#autocomplete').get(0) (which should return the first DOM object that matched the jQuery selector), you'll see that it's not there. Your input field doesn't exist, and thus the autocomplete will not be set up.

Now, why doesn't the input field exist at the time you are trying to set up the autocomplete?

That's where it gets real bad: You absolutely won't stand any chance finding that out unless you properly indent your code. It's practically unreadable the way it is.

Properly indented, the relevant parts of your code look like this:

function initialize() {

if (GBrowserIsCompatible()) {

function addMarkersToMap() {
GDownloadUrl('categories2.xml', function(doc) {
$(document).ready(function() {
$( "#autocomplete" ).autocomplete({
source: $.map(gmarkers, function (marker) {return marker.myname})


function search_control() {}
search_control.prototype.initialize = function() {
var contents = document.createElement("div");
contents.innerHTML="<div id='auto' style='z-index:100'><input type='text' style='font-family:verdana;width:200px; height:18px;font-size:12px' id='autocomplete' autocomplete='off' onKeyPress='return submitenter(this,event)'/><input type=\"button\" onclick=\"searchLocations()\" value=\"Search\"/></div>";
return contents;
new search_control().initialize();



which makes the program flow like that:

1.) As soon as google fires its onload event, the initialize function is run
2.) addMarkersToMap is defined and executed.
3.) Within that function, an AJAX request is made to get some XML data

What you want to happen now is

4.a) It takes the AJAX request some time to come back, and in the meantime, the search_control function is run, and the input is added to the DOM.
5.a) The request comes back and the autocomplete is set up.

What apparently happens in IE if it has the XML already in the cache is

4.b) The request comes back immediately, and the callback is executed. Inside the callback you're doing $(document).ready(), which is useless and will be executed immediately, because it was already made sure in 1.) that the DOM is loaded. So the autocomplete is set up immediately, but the input is not yet there, so really nothing happens.
5.b) The input is added to the DOM.

Looking at that properly indented and simplified piece of code, it's very easy to see what has to be changed: addMarkersToMap() must not run before new search_control().initialize().

So much for the problem. The most important thing to take away from this, though, is that you must indent your code, or you will never be able to maintain it.

02-10-2011, 08:43 PM
Did you have problems with IE's debugger? Are you sure you're using IE 8 or 9?

No, like I said in #5, I am using IE7. I hope for everybody's sake that MS has done a little work on their debugger since then.

Thanks for taking the time to explain what was going on, and for the solution. It works I guess as well as it is ever going to work in IE now... if I cared I think I would look at why IE freaks out and asks me if I want to stop running the script if I enter a partial search term in the box. Maybe another day.

Due to obvious technical difficulties, I think we should call this round moot and reserve results until I have a problem that shows up in firebug :D

02-11-2011, 05:06 PM
Oh, sorry, I didn't see that post at all. Yeah, the IE7 "debugger" isn't very useful. I'm not entirely sure what your plans are with that site of yours I guess you just wanted to play around with Google Maps. If that's something people should be able to use, though, there's no way you can leave it non-functional in IE (btw in versions higher than 7 the whole map doesn't show right at all).

If you do want to get it functional cross-browser, you should probably run IE9 yourself for main IE debugging purposes (you can also switch it down to IE7 and IE8 mode), and use one of several methods to emulate the older ones (because there might be bugs that can't be reproduced in IE9's compatibility modes); here's a current thread about that: http://www.codingforums.com/showthread.php?t=218109

02-11-2011, 09:06 PM
If that's something people should be able to use, though, there's no way you can leave it non-functional in IE (btw in versions higher than 7 the whole map doesn't show right at all).


and there I was patting myself on the back for having finally finished. :mad:

on one level I am just playing around, and on another I want it to be useful, because really what's the point in doing 98% of the work and for it to be useless to the 26% of viewers who use IE (and of those 70% use 8 or 9)?

so I'm thinking that first thing is taking care of the 31 html errors (none of which appear to be huge, but IE seems to be particularly fussy about those) and if that doesn't help, installing IE9 etc, etc.

thanks for pointing that out, though, as unwelcome as the news is.