Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-09-2011, 11:00 PM   PM User | #1
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
autocomplete doesn't work in IE after page refresh

Hi,

maybe a bit of an obscure one, but I'm using this autocomplete here 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.
xelawho is offline   Reply With Quote
Old 02-10-2011, 03:46 AM   PM User | #2
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
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.
venegal is offline   Reply With Quote
Old 02-10-2011, 06:00 AM   PM User | #3
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
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?
xelawho is offline   Reply With Quote
Old 02-10-2011, 08:23 AM   PM User | #4
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
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.
venegal is offline   Reply With Quote
Old 02-10-2011, 03:18 PM   PM User | #5
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
Quote:
Originally Posted by venegal View Post
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...

Last edited by xelawho; 02-10-2011 at 03:19 PM.. Reason: added *****ing and moaning
xelawho is offline   Reply With Quote
Old 02-10-2011, 04:24 PM   PM User | #6
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
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?

Last edited by xelawho; 02-10-2011 at 04:27 PM.. Reason: the Third Possibility
xelawho is offline   Reply With Quote
Old 02-10-2011, 06:47 PM   PM User | #7
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
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:

PHP Code:
function initialize() {

    if (
GBrowserIsCompatible()) { 

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

        
addMarkersToMap();

        function 
search_control() {}
        
search_control.prototype.initialize = function() {
            var 
contents document.createElement("div");
            
contents.style.width="300px";
            
contents.style.height="25px";
            
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>";
            
document.getElementById('map').appendChild(contents);
            return 
contents;
        }
        new 
search_control().initialize();

        
    }
}
 
google.setOnLoadCallback(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.
venegal is offline   Reply With Quote
Users who have thanked venegal for this post:
xelawho (02-11-2011)
Old 02-10-2011, 07:43 PM   PM User | #8
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
Quote:
Originally Posted by venegal View Post
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
xelawho is offline   Reply With Quote
Old 02-11-2011, 04:06 PM   PM User | #9
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
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
venegal is offline   Reply With Quote
Old 02-11-2011, 08:06 PM   PM User | #10
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
Quote:
Originally Posted by venegal View Post
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).
*sigh*

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

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.
xelawho is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:52 PM.


Advertisement
Log in to turn off these ads.