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/.csc.aims.wicketponents.collapsiblefieldset.CollapsibleFieldsetBehavior/jquery.collapsiblefieldset.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/.csc.aims.wicketponents.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:
- jquery-1.4.2-special.js
- jQuery.noConflict() call
- jquery.collapsiblefieldset.js //defines $.fn.collapse
- 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.
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/.csc.aims.wicket.ponents.collapsiblefieldset.CollapsibleFieldsetBehavior/jquery.collapsiblefieldset.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/.csc.aims.wicket.ponents.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:
- jquery-1.4.2-special.js
- jQuery.noConflict() call
- jquery.collapsiblefieldset.js //defines $.fn.collapse
- 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.
Share Improve this question asked Jun 5, 2010 at 0:37 RMorriseyRMorrisey 7,74911 gold badges58 silver badges75 bronze badges3 Answers
Reset to default 4You'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.
Put all of your scripts at the bottom of the page, right before the </body> tag.
If that doesn't fix it, move the scripts that do not appear to be loading in time back to the <head>, and leave the rest of the scripts at the bottom.
To anyone else suffering from this problem, it might be worth double checking that you don't have multiple references to jQuery. If you have plugins defined in the head, then they will get overridden by a second jQuery call in the body.