Sep
05
2006

Multiple $(document).ready()

read 13 comments
by Karl Swedberg

One more great thing about $(document).ready() that I didn't mention in my previous post is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your javascript file with them.

It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free.

You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so:

PLAIN TEXT
HTML:
  1. <script src="/js/jquery.js" type="text/javascript"></script>
  2. <script src="/js/common.js" type="text/javascript"></script>
  3. <script src="/js/homepage.js" type="text/javascript"></script>

You could also do something like this inside a single .js file:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   // some code here
  3. });
  4.  
  5. $(document).ready(function() {
  6.   // other code here
  7. });

A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code:

Even for this little amount of code is a shortcut available:

$(function() {
// do something on document ready
});

A function passed as an argument to the jQuery constructor is bound to the document ready event.

Coming Up: In my next entry, I'll show how to do a simple effect with jQuery. You'll be amazed at how easy it is!

comment feed

13 comments

  1. OddesE
    November 16, 2007 at 2:31 pm

    Cool as it may look, it's also much less readable. The average Javascript programmer looking at the first example can at least guess that the code somehow creates a listener to the document ready 'event' (although I think there are lots that don't even know what that is), but the second example looks just abstract to anyone but jQuery insiders.

    Reply
  2. Karl
    November 16, 2007 at 3:20 pm

    Hi OddesE,

    Thanks for the comment! I assume that when you write, "Cool as it may look," you're referring to the shortcut above, $(function() { });, which I added to the entry in an update. If so, then I completely agree with you. Since writing this entry (over a year ago), I've standardized my own code to use the slightly more verbose, but much more readable $(document).ready(function() { });

    Reply
  3. js
    December 14, 2007 at 4:36 pm

    This is exactly what I was looking for, but it seems as though I've ran into a limitation. You can't call a function defined within one $(document).ready() from the other $(document).ready().

    For example:

    $(document).ready(function() {
         var someFunction = function() {
              // some function that does stuff
         };
    });

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

    This will result in a "someFunction is not defined" error. Is there a way around this?

    Reply
  4. John Cowan
    January 5, 2008 at 10:44 pm

    I've been playing with jquery and json and am still a novice. I too wanted to use $(document).ready twice on the same page but couldn't get it to work. Then I tried to nest one inside the other and it works. Not sure if this is what your trying to do, but here is what I did.

    I have a select box on a page for choosing a customer. I use that to retrieve customer data. The returned data is used to build a small modify form with a "modify" button.

    my outer $(document).ready.... is for the the select box with id="cust_id". I use $.getJSON(....) to get the customer data and build a form from the returned data. My inner $(document).ready is used for the modify button (id="mod-btn"). It works.

    Code:

    
 $(document).ready(function(){
	     $("#cust_id").bind("change", function(e){
	        $("#filter-results").empty();
			$("#results2").html("HELLO JOHN");
		    $.getJSON("jquery-get-customer.php", {cust_id:$("#cust_id").val()}, function(data){

                         // data return code is here
                         // I build my form
                         $("#div-results").append("
                                  <form id=\"form2\"> + "<br />"
                                        // form elements here (removed for space)
                                        // the button...
				   + "<input type=\"button\" id=\"mod-btn\" value=\"modify\"> <br />"
				   + "</form>");

                          $(document).ready(function(){
					  $("#mod-btn").click(function(){
						  $.get("customers-modify.php", {
							 // key:vals to be passed
						   }, function(return_data){
							   $("#results2").append(return_data);
						   });  

					  });
				  });   /*  inner $(document).ready  */
            });   /* getJSON  */
         });
     });   /*  outer $(document).ready   */

    Hope this helps.
    JohnC

    Reply
  5. callmebird
    February 11, 2008 at 4:32 pm

    Thank you John Cowan so much
    I'm a Jquery newbie.
    I try to solve this problem for two day until i read your comment.
    It work very very perfect.
    Thank you again.

    Reply
  6. dave
    March 11, 2008 at 1:10 pm

    I think you can add function names into $(document).ready instead of creating an anonymous inner function:

    
$(document).ready(doSomething);

function doSomething(){
    alert('Doing something');
}
    Reply
  7. Karl
    March 11, 2008 at 1:47 pm

    Good call, Dave Yes, that's another way you can use the ready method.

    Reply
  8. website design
    May 12, 2008 at 8:15 am

    This is one of the best of jquery

    Reply
  9. mumuri
    June 4, 2008 at 5:21 pm

    thanks of the info, the time where people were bothered with "body onload" is finished ^^ !

    Reply
  10. ChrisQuery
    July 1, 2008 at 10:24 am

    im trying to use document.ready and window.onload together in order to display a animated gif until the entire page is loaded, then hide the animated gif and show the content in an accordion that was loading. 

    
<script type="text/javascript" src="scripts/js/accordian-src.js"></
script>
<script type="text/javascript" src="scripts/js/jquery-1.2.6.min.js"></
script>

<script>
$(document).ready(function(){

$('div#basic-accordian').hide(); /* show gif */
$('div#load').show(); /* hide accordion */

});

window.onload = function(){

$('div#load').hide(); /* hide gif */
$('div#basic-accordian').show('slow'); /* show accordion */

new Accordian('basic-accordian',5,'header_highlight'); /* supposed to
activate the accordion */

}

</script>

    the accordion loads but the accordions functionality is lost,
    new Accordian('basic-accordian',5,'header_highlight'); isnt read.
    if i remove all the jQuery and include the accordion loads fine and functional. If i remove all the accordion code the jQuery works fine...
    is there something wrong with my structure or could the accoridan code be conflicting with the jQuery include?
    thanks if anyone can help

    Reply
  11. ChrisQuery
    July 1, 2008 at 11:21 am

    in case anyone cares,

    i solved the issue using the jQuery.noConflict(); and then replacing all my jQuery $ with eg. jQuery(document).ready(function()
    there were a few $ symbols in the javascript code for the accordion.

    Im really liking this jQuery stuff!
    great blog, great books!

    Reply
  12. Daniel LaLiberte
    August 21, 2008 at 11:05 pm

    I am getting inconsistent results trying to determine whether jQuery is ready. What is different for me is that I must load jQuery dynamically, with an injected SCRIPT tag, and I suspect that jQuery doesn't recognize that the document may be ready even before jQuery have been loaded, and in that case, jQuery.isReady never becomes true.

    Is there a simple reliable way of testing whether both the document is ready and jQuery is ready, regardless of the order in which they are loaded?

    Reply
  13. Kevin of MO
    September 9, 2008 at 4:52 pm

    I'm working on a project where I need to collect data using AJAX prior to running some javascript in the body of my html. Do you have any ideas on how to load the header (on load), and waiting to load the rest of the page until the HttpRequest is returned and processed?

    Pseudo example:

    In header: initialization
    HttpRequest for dynamic menu data from MySQL
    Load other javascript/css
    In body: code for javascript menu (must be in the body), where menu data is from the HttpRequest

    Thanks for any advice,
    Kevin

    Reply

Leave a Comment

IMPORTANT:

  • If you wish to post code examples, please wrap them in <code> tags.
  • Multi-line code should be wrapped in <pre><code> </code></pre>
  • Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.