2

What is the exact use of $(document).ready() in jQuery and can we have two $(document).ready() in a webpage?

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 4
    This would help, https://learn.jquery.com/using-jquery-core/document-ready/ – Adil Jun 10 '15 at 10:11
  • HTML elements are not guaranteed to exist until after the DOMReady event has fired. Hence you have to wait for that to occur before interacting with those elements. – Rory McCrossan Jun 10 '15 at 10:14
  • Refer this question "http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function" – Nikhil Batra Jun 10 '15 at 10:15

4 Answers4

4

A page can't be manipulated safely until the document is "ready." Generally people write <script> tags in the starting of the document, in the <head> even before the <body> is written. So, technically, if you are manipulating something from the <body> contents, it is not present at the time of execution.

So, jQuery's $( document ).ready() waits for the HTML Document content to be loaded fully and become ready, after rendering all the elements into the window object or in a nutshell, completes the loading of the body.

Then whatever content present in the code is executed, once the HTML document is fully loaded, which makes sure every HTML element is present as you execute your JS code.

Check out:

And about binding two ready handlers, why do you need two? You can combine the code in a single function. You must give a minimal code to explain. I assume you have something like this:

$( document ).ready( function () {
    // Code block 1 start...
    alert( "First Function..." );
    // Code block 1 end...
});

$( document ).ready( function () {
    // Code block 2 start...
    alert( "Second Function..." );
    // Code block 2 end...
});

And yes, the above is possible. Also, there's no difference from the above having:

$( document ).ready( function () {
    // Code block 1 start...
    alert( "First Function..." );
    // Code block 1 end...

    // Code block 2 start...
    alert( "Second Function..." );
    // Code block 2 end...
});
Community
  • 1
  • 1
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
2

Everything inside the $(document).ready() function will load as soon as the DOM is loaded and before the page contents are loaded.

You should wrap all your javascript code with this function to ensure that the code only runs when the page is fully rendered. Without it you could run into errors where the JavaScript can't find elements as they haven't rendered to the page yet.

And yes you can use it any number of times in a webpage.

Coder By Birth
  • 21
  • 3
0

$(document).ready([...]) is used to execute JS code only if the HTML document is fully loaded, which makes sure every HTML element is populated as you execute your JS code.

You can use it multiple times.

Iwan1993
  • 1,669
  • 2
  • 17
  • 25
0

use of Document.ready in Jquery

At times you need scripts to run on page load. But there might be some elements that are not completely loaded while executing your script. To make it safe to run, we use $(document).ready(function { /* to do here */}) or short hand $(function { /* to do here */});

can we have two document.ready in a webpage

Yes, you can have multiple.