?
Solved

jQuery ready event does not work when a DocType is specified

Posted on 2012-08-29
3
Medium Priority
?
745 Views
Last Modified: 2012-08-29
Hi there,
I have tried searching for an answer to this but I can't seem to find anyone else that has had this problem.

I am in the process of adding jQuery to an older website to update the interface etc.

In the example below I have a textbox that I am using for a date and I am using the "DatePicker" from the jQuery UI.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    
    	<link type="text/css" href="./jquery/css/cupertino/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
    
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        
        
		<script type="text/javascript">
			$(function() {
                // Assign DatePicker to all textboxes of class TextBox_DatePicker 
                $(".TextBox_DatePicker").datepicker({ dateFormat: "dd/mm/yy", changeYear: true, yearRange : "2005:c+0" });
            });
        </script>
    </head>
    
    <body>
    	<input type="text" name="txtDate" id="txtDate" class="TextBox_DatePicker" />
    </body>
</html>

Open in new window


That all works fine but I had issues trying to center a div on the page and found that I had to include a DOCTYPE at the top of the page.  This fixed the div centering but seemed to break the jQuery.

If I moved the script that assigns the DatePicker to my textbox out of the <head> and to the bottom of the page I found that it worked again.  This seems to indicate that the jQuery was being run before my page had fully loaded explaining why the DatePicker was not assigned to my textbox.

Through some Googling I found that if I replaced :

$(function() {

with

$(window).bind("load", function() {

And bound it to the pages "onLoad" event then the code wasn't run until the page had finished loading and everything worked fine again.

e.g.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    
    	<link type="text/css" href="./jquery/css/cupertino/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
    
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        
        
		<script type="text/javascript">
            $(window).bind("load", function() {
                // Assign DatePicker to all textboxes of class TextBox_DatePicker 
                $(".TextBox_DatePicker").datepicker({ dateFormat: "dd/mm/yy", changeYear: true, yearRange : "2005:c+0" });
            });
        </script>
    </head>
    
    <body>
    	<input type="text" name="txtDate" id="txtDate" class="TextBox_DatePicker" />
    </body>
</html>

Open in new window


Just to make things worse the example I have given above does actually seem to work when I test it.  I'm guessing that it may have something to do with the amount of content on the page as it does not work on my actual pages.

Does anyone have any idea why adding a DocType to the top of the page seems to break the jQuery ready function/event?  My understanding was that the code specified inside

$(function() {
    });

was not supposed to run until after the page had fully loaded.
0
Comment
Question by:SoLost
3 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 38348104
Well for a start you should always have a doctype on your site, placing one on your site now is only showing that the page is marked up incorrectly

For jQuery you use the following to perform actions when the page is loaded and this should be at the bottom of the page.
$(document).ready(function() {
     $(".TextBox_DatePicker").datepicker({ dateFormat: "dd/mm/yy", changeYear: true, yearRange : "2005:c+0" });
});

Open in new window


Forget using ...
$(window).bind("load", function() {
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 1000 total points
ID: 38348585
Hi,
$(document).ready(function() {
    // code
});

Open in new window

AND
$(function() {
    // code
});

Both are same only syntax change is there.
[b]This will execute when the DOM is ready.[/b]

Open in new window


$(window).bind("load", function() {
   // code
});

This will execute when page has finished loading all images, style-sheets etc.

Open in new window


Hope this helps you.
0
 
LVL 5

Author Closing Comment

by:SoLost
ID: 38348640
I think my mistake was assuming that the jQuery document.ready function wouldn't run until the "document" was ready.  This is not the case.

As mroonal stated document.read runs when the DOM is ready, in this case it was ready before the page had finished loading.  window.load runs only when all elements of the page have loaded which is why it worked for me but it has the downside of having to wait for all images, style sheets etc to load first.

While I'm used to including all javascript in the <head> section of the page I think the best solution here is to go with GaryC123's suggestion and to place all of the jQuery code that accesses elements on the page at the bottom of the page to ensure that the elements exist on the page before the jQuery runs.

I'm still not sure why just adding the doctype to the top of the page caused this to be a problem.

Thanks to you both.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month17 days, 13 hours left to enroll

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question