IE stupidity



  • Anyone here able to help me with a JavaScript problem? Basically, I'm writing a modification for a student forum at http://freestudynotes.com/VCEforum/, allowing users to show what school they went to on their profile. All is working fine, except in Internet Explorer (isn't this always the case?).

    I am using Mootools as well as an Autocompleter widget for Mootools. Basically, they start typing in the input box, and the autocomplete box comes up. The input box stores the name of the school, and a hidden field stores the ID for the selected school. My JavaScript code looks like this:

    // FreeStudyNotes.com JS
    // Daniel15, 2007-12-11
    

    // Initialise the schools autocompleter.
    function init_schools()
    {
    // Create an autocompleter
    var auto = new Autocompleter.Ajax.Json($('school'), 'fsn/schools.php',
    {
    'postVar': 'school',

    	// Request is starting.
    	'onRequest': function(el)
    	{
    		$('school_loading').setStyle('display', '');
    	},
    	// Request finished.
    	'onComplete': function(el)
    	{
    		$('school_loading').setStyle('display', 'none');
    	},
    	
    	// Called when we need to add a choice to the autocomplete list.
    	'injectChoice': function(choice)
    	{
    		// Create choice.
    		var el = new Element('li', 
    		{
    			'id': choice[0]
    		})
    			// Set its inner HTML.
    			.setHTML(this.markQueryValue(choice[1]))
    			// Add the little descriptive text.
    			.adopt(new Element('div', {'class': 'school-desc'}).setHTML(choice[2]));
    			
    		el.inputValue = choice[1];
    		this.addChoiceEvents(el).injectInside(this.choices);
    	},
    	
    	// Called when a school is chosen. We get passed the input box.
    	'onSelect': function(el)
    	{
    		
    	},
    	
    	// Called when a school is chosen. We get passed the choice itself.
    	'onSelectChoice': function(el)
    	{
    		// Set the hidden "school_id" value.
    		$('school_id').value = el.id;
    	}
    });
    

    }

    This is from ...../fsn/script.js.The HTML on the page looks like:

    <!-- Mootools - Class.Extras, Element.Event, Element.Selectors, Element.Form, Element.Dimensions, Window.DomReady, Fx.Style, Ajax, Json -->
    <script language="JavaScript" type="text/javascript" src="http://freestudynotes.com/VCEforum/Themes/default/fsn/mootools.js"></script>
    <!-- Autocomplete -->
    <script language="JavaScript" type="text/javascript" src="http://freestudynotes.com/VCEforum/Themes/default/fsn/Observer.js"></script>
    <script language="JavaScript" type="text/javascript" src="http://freestudynotes.com/VCEforum/Themes/default/fsn/Autocompleter.js"></script>
    <!-- FSN script, Daniel15-->
    <script language="JavaScript" type="text/javascript" src="http://freestudynotes.com/VCEforum/Themes/default/fsn/script.js"></script>
    <link rel="stylesheet" type="text/css" href="http://freestudynotes.com/VCEforum/Themes/default/fsn/style.css" />	
    <!-- When we\'ve loaded, initialise! -->
    <script type="text/javascript">
    	window.addEvent("domready", init_schools);
    </script>
    

    ...
    </tr><tr>
    <td valign="top"><b>School:</b><div class="smalltext">Start typing, wait for the dropdown box to appear, and select your school from the list. If your school is not listed, please contact an admin and ask for it to be added.</div></td>
    <td>
    <input type="text" name="school" id="school" size="50" value="" /> <img id="school_loading" src="http://freestudynotes.com/VCEforum/Themes/default/fsn/spinner.gif" alt="Loading..." style="display: none" />
    <input type="hidden" name="ID_SCHOOL" id="school_id" value="" />
    </td>
    </tr><tr>
    <td valign="top"><b>Graduation Year:</b></td>
    <td><input type="text" name="gradYear" size="4" value="2007" /></td>
    </tr>
    ...

    Now, this is working fine in all browsers except for IE. The autocomplete is not working in IE at all.

    However, there was one really odd thing I noticed. Right above // Create an autocompleter, I temporarially added:

    	// !!! Hack hack hack evil
    	var ua = window.navigator.userAgent;
    	var msie = ua.indexOf ("MSIE ");
    	if (msie > 0)	
    		alert('Internet Explorer is kinda screwed up, and the "Schools" box might not work properly in IE yet. It is suggested to switch to either Opera (www.opera.com) or Firefox (www.mozilla.org)');
    

    And it started working in IE? What is it about having the alert box that makes it work in IE? Anyone know how to properly fix this?

    You may see this live at http://freestudynotes.com/VCEforum/, use a username of "test1" and a password of "test". To see the section in question, click on "Profile" at the top, then "Forum Profile Information" on the left. The school box is near the bottom of the page.

    Thanks.



  • I've had similar situations using javascript in IE, although mine were related to drawing and filling in lots of divs at page load time. Adding alerts at key places in the code mysteriously fixed it in IE.
     
    A collection of similar problems of this nature led to my theory was that the javascript code was simply not being executed at the proper time by the browser as it was parsing and rendering the page. Some things were executing too early, leading to missing data in variables and referencing elements that weren't in the browser's DOM yet. I eventually coded around it by adding setTimeout(<code>, 0) at certain places, and this had the same effect as having the alert box at that critical point. This may be worth a shot for you.

    Javascript is not my strong point so maybe somebody else can shed some light on why this type of thing might ever be necessary.



  • @Nether said:

    I've had similar situations using javascript in IE, although mine were related to drawing and filling in lots of divs at page load time. Adding alerts at key places in the code mysteriously fixed it in IE.
     
    A collection of similar problems of this nature led to my theory was that the javascript code was simply not being executed at the proper time by the browser as it was parsing and rendering the page. Some things were executing too early, leading to missing data in variables and referencing elements that weren't in the browser's DOM yet. I eventually coded around it by adding setTimeout(<code>, 0) at certain places, and this had the same effect as having the alert box at that critical point. This may be worth a shot for you.

    Javascript is not my strong point so maybe somebody else can shed some light on why this type of thing might ever be necessary.

    Well if that really IS the problem, try adding "defer" attribute to your javascripts ...




  • "Defer" should - in theory at least - just do the same thing as the window.addEvent() line. I think it was never actually supported in practice though, but I may be wrong.

    Maybe there is something inside the library code that takes some time to initialize on IE? Did you get any script error messages?

    If you haven't already, get yourself the IE Developer Toolbar, the Firebug equivalent for IE. That can help you to get some insight what codes has been executed and what not.

    Also, all test alert()s to strategic points, so you can see what code has been executed. (for example, place one at the very end of init_schools().)

    If nothing else helps, do the setTimeout trick Nether suggested.



  • <channeling user="misguided">I came in here to say "yes it is." and was discouraged to find out that there was an actual POST!</channeling>


Log in to reply