IE7 jQuery(document).ready() problem

Question

I have a page that works perfectly fine in Firefox, but is throwing an error in IE. I am loading jQuery dynamically (if it is not already loaded), and then doing some stuff in the jQuery(document).ready() block. However, IE throws the dreaded "Object expected" error when it hits the jQuery(document).ready() block.

You can view the full page code here: http://www.pastie.org/977767

IE is throwing the error right at jQuery(document).ready().

Any ideas as to what is going here? Again, this works perfectly fine in Firefox. It seems almost like IE thinks jQuery is loaded but it really isn't yet or that jQuery is still loading when the jQuery(document).ready() block is encountered?

Answer 1

When you append a script to the document, it is downloaded asynchronously. In IE, the following script...

try{
jQuery(document).ready(function() {
    jQuery.getScript("/CalendarViewer/js/utils.js", function(){
        jQuery.getScript("/CalendarViewer/js/groupcatselector.js", function(){
            jQuery.getScript("/CalendarViewer/js/calendarportlet.js", function(){
                jQuery.getScript("/CalendarViewer/js/calendarportletmain.js", function(){
                    var cpm = calendarportletmain;
                    cpm.doEditDefaults("V_7f208bca412b42a68c19eb104bf46f14", "/CalendarViewer", groupCats_V_7f208bca412b42a68c19eb104bf46f14);
                });
            });
        });
    });
});
}catch(err){
    alert("error in view.jsp="+err.number+" "+err.description);
}

...is parsed and executed before IE has finished downloading and parsing the jQuery script. This may not be the case in Firefox if Firefox has already cached the script, it would take no time to download and can be parsed immediately. It could the parsers working differently, Firefox parsing the script as soon as it is downloaded and IE queuing the parsing until the thread becomes idle.

You could move this code to the end of the setUpJquery function, which means it would only be executed when the jQuery object is available. Alternatively, you could put the code inside its own function and call that function from the setUpJquery function.

Answer 2

The way i got around it was:

$(document).ready( function () {
   document_init();
});

function document_init() {
  try{

    checkDivLoaded();

    [ ... do more stuff ... ]

  } catch( err ) {
    setTimeout('document_init()', 200);
  }
}

function checkDivLoaded() {
    if ( $('#targetDiv').length == 0) $jquery.error( 'not ready' );
}

It ain't pretty but it works ... it works across several files, in every browser I can think of (that I care about) and means you don't have to mess with the parent page source code. So you can keep the clear of tags.