Search code examples
javascriptjqueryjquery-pluginsinternet-explorer-7ready

$(document).ready(function() {...}) runs before plugin script loads

I'm getting a JS error because my $(function () {...}) handler is being fired seemingly before the prerequisite plugin script is loaded. Only happens in IE (testing in IE7).

I have some HTML in my <head> that looks like this:

<script type="text/javascript" src="../resources/org.wicketstuff.jwicket.JQuery/jquery-1.4.2-special.js"></script>
...
<script type="text/javascript" id="noConflict"><!--/*--><![CDATA[/*><!--*/
jQuery.noConflict();
/*-->]]>*/</script>
...
<script type="text/javascript" src="../resources/com.csc.aims.wicket.components.collapsiblefieldset.CollapsibleFieldsetBehavior/jquery.collapsiblefieldset.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/com.csc.aims.wicket.components.collapsiblefieldset.CollapsibleFieldsetBehavior/jquery.collapsiblefieldset.css" />
<script type="text/javascript">
jQuery(function(){
jQuery('#collapse119').collapse({"iconClosedUrl":"../resources/img/white_plus","iconOpenUrl":"../resources/img/white_minus"});
});
</script>

So notice the sequence, according to the HTML code, is as follows:

  1. jquery-1.4.2-special.js
  2. jQuery.noConflict() call
  3. jquery.collapsiblefieldset.js //defines $.fn.collapse
  4. jQuery('#collapse119').collapse(...) is called

When this code runs in FF, everything works fine. When I test it in IE7 (or IE8 w/Compat. View: IE7 standards mode), I get a javascript error. The debugger shows me that jQuery.fn.collapse is undefined.

Using the IE8 developer tools, I try to look at jquery.collapsiblefieldset.js. I see the script in the list, but the tool tells me that I can't set a breakpoint because the script isn't loaded.

Why does the collapsiblefieldset.js not get loaded before my $() ready handler is run? Any insight would be appreciated! Thanks.

Solution

  • You're using

    $(function(){...});

    which is synonym of

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

    Instead, you might try

    $(window).load( function(){...} );

    which fires later in the page loading sequence.