Gotcha of inline Document Ready function for JQuery
Comments(5)
I’ve had some reasons to use JQuery this week, and you should believe whatever good rumors and hype you’ve heard about this library. It’s amazing.
There are many benefits to a Javascript framework, particularly JQuery. Take this example that I put inside my <head\> element:
[xml]
<script type="text/javascript">
$(document).ready(function(){
$(‘#deliciouslogin’).submit(function(){
alert("This to authenticate with Delicious and start retrieving Bookmarks into Google Gears database");
})
});
</script>
[/xml]
This is the “Document Ready” function. This solves the problem of running your Javascript code before your page is done rendering on the browser. Also note how easy it is to hookup an “onsubmit” event handler. You use CSS-selectors to identify what HTML element(s) to apply to, and JQuery does the rest, figuring out the best way to accomplish that regardless of your browser. Great fun.
My elation quickly disappeared when I fired this sample up in FireFox 3, nothing happened when my <form>’s submit button was triggered. Frustrated, I quickly tried it in Safari (Mac), it worked fine. I switched to the PC and grumpy IE6, and again, no luck. So what’s going on?
It turns out that the inline JavaScript will be ignored if you close the element just prior in your <head\> section with the shorthand closetag />.
This doesn’t work: [xml] <script type="text/javascript" src="lib/jquery/jquery.js" /> <script type="text/javascript"> $(document).ready(function(){ // blah }) }); </script> [/xml]
This does work: [xml] <script type="text/javascript" src="lib/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // blah }) }); </script> [/xml]
Hopefully I will remember this in the future, as this is now the second time in two days I’ve wasted an hour or more wondering why my Javascript wasn’t activated.
[...] once I cleaned up this empty element, it worked! Interesting how this yet another reason why XML is the bane of [...]
There is some other reason why I always use instead of
It had nothing to do with jQuery, which wasnt even involved in my test where I just made this rigit rule. I cant remember, it’s just in my notes always use maybe it’s exactly the same thing you got. Firebug would prolly clear it in less than 1 hr.
@colleen: Thanks for your comment. I hope we’re only a few years away from being able to write valid XHTML and have it parse properly!
Hi, Brett Thanks for visiting my website and for this tip. It would’ve saved me lots of time.
I reference jquery with the masterpage script manager. I have my ready functions near the bottom of the page. I’ve also been able to use mutliple readys. One in the master page and one on the content page.
FYI I’ve volunteered to present to the group in July on ASP.NET with jquery and ajaxcontroltoolkit.
See you next month.
This is neither jQuery bug, browser bug, XML bug, or parsing bug. It is a DTD specification problem. Browsers are simply obeying the rules that the W3C provides when parsing HTML. Fully explained here: http://aspnetresources.com/blog/empty_vs_nonempty_html_tags.aspx