What must be declare or input inside the $(document).ready?

I am new to javascript so I make this thread. I read some post. In this post is the function inside or outside of the document ready. If it is declare outside the document can I re-use / call it in another JScript?.

As my title what should be the contain inside of a document ready?.

Answers:

Answer

$(document).ready is an event which fires up when document is ready.

Suppose you have placed your jQuery code in head section and trying to access a dom element (an anchor, an img etc), you will not be able to access it because html is interpreted from top to bottom and your html elements are not present when your jQuery code runs.

To overcome this problem, we place every jQuery/javascript code (which uses DOM) inside $(document).ready function which gets called when all the dom elements can be accessed.

If you place your jQuery code at the bottom (after all dom elements, just before ) , there is no need for $(document).ready

See the example, which alert calls first that will give you an idea what should be inside the ready.

alert("Without Ready");

$(document).ready(function(){
  alert("With Ready");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer

.ready makes sure your DOM is ready and good to go for binding, so putting all your functions inside there like the events functions would only be bootstrap at ready state of the document. Normal functions( with name i.e non anonymous functions) can be declared outside the document.ready so you can re-use it somewhere else. since those functions are called from the document.ready events or jquery code to be used.

See more about document.ready here. check the snippet below for a brief example layouting

/**
Global function here, which is not called or bind on page load
*/

function alertWindow(message){
  alert ("Window is loaded here with Message: "+message);
  $("#console").text(message);
  }

$(document).ready(function(){
  
  $("#showBtn").click(function(event){
    var ourMessage = $("#message").val();
    alertWindow(ourMessage);
    });
  
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="message" placeholder="Enter Message" >
<br>
<button id="showBtn">Show Message</button>

<p>
  <h3>Console Here</h3>
<div id="console"></div>
</p>

Answer

when we use document.ready all the listeners and all the functions inside the document ready will work only after the page load completed. So for example if you added any listener to a button and that perform some change in your page then better to write it inside the document.ready.

Answer

First things first - In JavaScript a function defines the scope of the code it contains, so if you want to share it you need to define it in a location that your other code can see.

You also don't need to define functions inside the document ready function, you could just define outside of the ready() callback. Eg,

$(document).ready(function(){
    $('button').click(function(){
        somefunc();
    });
});

function somefunc()
{
     alert('yes');
}

$(document).ready(function(){
   // do something else
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope this help..

Answer

The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above. source : http://www.w3schools.com/jquery/event_ready.asp

For example: if DOM is not fully loaded and our JS code is trying to access unloaded DOM. We will get Javascript error. To avoid this we need to give some time for loading document. To achieve this, We have a callback function for DOM loaded $(document).ready() or $(function)

We can have functions out side ready and those we can access for other JS also. It is always better to write Jquery add event and other Jquery related code inside ready method.

Answer

Refers from here:

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $(window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Since usually we've used jQuery to selecting and/or manipulating the DOM, so the best way to that is after the DOM is fully loaded. For those reason, so we need an event to watch the DOM ready state. This method give us flexibility where we'll write our javascript code, either on <head> nor at the end of <body>.

See my snippet samples below:


<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      // this will not work properly
      $('div').html('Hello World!!!');
    </script>
  </head>
  
  <body>
    <div>Hi brother!!</div>
  </body>
</html>

Above script will not work properly since the script was executed before the DOM loaded properly. So, the jquery can not find the element with div tag.

To make the script running smooth, we need to add additional event listener from jquery named $(document).ready() as you can see at snippet below.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      // this will work properly
      $(document).ready(function() {
        $('div').html('Hello World!!!');
      });
    </script>
  </head>
  
  <body>
    <div>Hi brother!!!</div>
  </body>
</html>


But, how if we don't want to add ready method? We still can do that, if we write the script below required DOM, see below snippet for example:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  
  <body>
    <div></div>
    
    <script>
      // this will not work properly
      $('div').html('Hello World!!!');
    </script>
  </body>
</html>


UPDATE : Refers from OP comment below:

In your reference I read use the shorthand $() for $( document ).ready() so I can use like $() for document.ready?

YES, you can use that shorthand, see my snippet below:

<html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
          // this will work properly
          $(function() {
            $('div').html('Hello World!!!');
          });
        </script>
      </head>
      
      <body>
        <div>Hi brother!!!</div>
      </body>
    </html>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.