What javascript should put inside $(document).ready(function()? - javascript

Does $(document).ready(function() { means all javascript file has been downloaded so any js init or func should work?
so it is a good practise to always put js inside $(document).ready(function() { ?

$(document).ready is part of the page lifecycle and runs after all of the resources have been loaded for the page (HTML, CSS and JS files).
You should be functions in here that you need to run when the page first loads, so generally initialization of plugins, first run functions and attaching events to elements.
Any other functions that can run after the page has loaded can be defined outside of this scope.
Note that if you are dynamically inserting DOM elements, any events attached to that type or class (for example) will not be attached to them without re-attaching, or using .on and attaching to the document itself.

Use ready() to make a function available after the document is loaded:
for eg:
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
Definition and Usage
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.
The ready() method specifies what happens when a ready event occurs.
note: The ready() method should not be used together with <body onload="">.

From jQuery documentation:
Description: Specify a function to execute when the DOM is fully loaded.
It means that you can specify a function to run after the DOM is fully loaded, ie is available to interact with javascript.

Following is copied from here
$(document).ready(...)
Fire when all DOM loaded (even if multimedia no loaded yet)
$(window).load(...)
Fire when all content loaded (progress indicator which shows loading proccess) gone.
Now here is my suggestion (not from that link)
I think the better approach would be putting your script tags at the end of body, like this, as it makes sure that the script is loaded when everything else has been loaded
<html>
<head></head>
<body>
<div>
bla bla bla
</div>
<script src="1"></script>
.
.
<script src="n"></script>
<script>console.log('hello');</script>
</body>
</html>

Related

Javascript: Set eventListener to DOM object without window.onload?

My index.html include two javascript codes which are plugin.js and main.js(main include after plugin),
I want to make plugin.js as a reusable plugin, like checking if the index.html file has any elements which have click-me class attribute, if index.html has this kind of elements, then set every this kind of elements an eventListener.
I want my window.onload function ALWAYS in main.js rather than plugin.js, but in this case I cant' get DOM object by className in plugin.js, I also don't want to call any function of plugin.js in main.js.
Does anyone ahs any idea?
You can just include the scripts after the body.
<body>
</body>
<!-- add your scripts here -->
Then you don't need to check if the document is ready anymore, this has the drawback of only starting the download after the page is fully rendered.
Another possibility is using defer
<script type="text/javascript" src="plugin.js" defer></script>
<script type="text/javascript" src="main.js" defer></script>
This way scripts are downloaded as soon as possible but are executed only after the page is ready, and in order.
A more detailed answer here
Well, you should properly use onload as an event listener:
window.addEventListener("load", function() {
});
This can be added as many times as you wish, both in main.js and plugin.js.
Additionally, it's better to use DOMContentLoaded event, because it doesn't wait on loading images. That's really important, if you rely on window.onload, just one pending image can make your page useless for first 10 seconds of the visit. It's used like this:
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
It has compatibility issues however, so I recommend using some library.
Oh and last thing - don't link your scripts before body unless needed. They block parsing of the page.
Why don't you just check if the clicked element have the click-me class from the root? It makes you declare only one listener on the body.
function listener(event) {
if(event.target.classList.contains("click-me")) {
// Do something
}
}
document.body.addEventListener("click", listener, true);

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?.
$(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>
.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>
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.
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..
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.
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>

Why do I need to add $(document).ready to a self-executing function?

I'm just messing with some javascript and I came across something that puzzled me a little.
I've added a link to a script file into the header of a document, just after the link to jQuery.
If I place in the test file:
(function($){
$("#thing").mouseover(function(){alert("woo");});
})(jQuery);
The mouseover event does not trigger the function.
However, if I add
(function($){
$(document).ready(function(){
$("#thing").mouseover(function(){alert("woo");});
});
})(jQuery);
The event does work.
Is it simply that without $(document).ready the DOM hasn't finished loading at the point when my self-executing function runs, so there is no #thing yet to attach the function to or is there another explanation?
I've added a link to a script file into the header of a document
This is the point.
Usually people put script files in the footer of document to optimize the process of loading the page, therefore it would not need to wait for the document to be ready to execute something based on the DOM already loaded (if you are in the footer, you have already loaded the rest - unless you have some content loading async).
Try putting your script file in the footer, and you will not need the $(document).ready.
Summary: In your case you need it, because when the script starts executing you have not started yet looking for the DOM, and the element cannot be found in that time.
It's because document ready waits until the document has fully loaded before executing.
Anything that binds to DOM elements must be done when the document is fully loaded otherwise those event handler bindings will be trying to bind to DOM elements which don't yet exist.
So yes, you answered your own question.
$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute
It waits for the entire HTML excepts the Images.
some times you noticed that you recived an error “$ is not defined.” then in that case
you can use $( document ).ready()
You can just move the $ to make it work
$(function(){
$("#thing").mouseover(function(){alert("woo");});
});
Demo
Explanation $(function(){}); is equivalent to $(document).ready(function(){}); in jQuery
The document ready function waits for the page to load and
then executes whatever is in there. This prevents immature
actions before the page loads.
As a thumb rule, remember this,
$(document).ready(function(){
//jQuery code goes here
});
Apparently this works for me
<div id="body">
<section class="featured">
<div class="content-wrapper">
...
</div>
</section>
</div>
#section scripts{
<script type="text/javascript">
(function ($) {
$(".featured").mouseover(function () { alert("woo"); });
})(jQuery)();
</script>
}
it is basically a immediately executing function.

Is browser fully loaded check

Is there anyway to check if page is fully loaded.Something like this http://msdn.microsoft.com/en-us/library/system.web.ui.page.loadcomplete.aspx but for JAVA.
If you intend to execute logic on the client side when the page is loaded, you might be interested in the Javascript onload event.
Or, even better, consider using jQuery and use the ready() function to execute your logic.
Just a short example using jQuery:
$(document).ready(function() {
alert("The document, including all assets such as images, has been completely received");
});
Not directly in java, since it is probably not running in the browser, but you can do it with javascript
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">var myFunc = function() {
alert("The page is fully loaded!");
};
window.onload = myFunc;
</script>
</head>
you can use the normal onload()
<body onload="yourFunctionHere()">
or the JQuery version
$(document).ready(function() {
yourFunctionHere();
});
1. JQuery will help you:
there is $(document).ready() which tell you that the browser is loaded.
Example:
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
The ready event occurs when the DOM (document object model) has been loaded, and the page has been fully loaded (including images).
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.
2.Window onload is another JavaScript approach:
window.onload=function(){SomeJavaScriptCode};
The onload event occurs when an object has been loaded.
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
Note: The main difference is that document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully, while window.onload will wait until all your contents are loaded fully.
We can have more than one document.ready() function in a page where we can have only one onload function.
Not in Java, no.
You'll need Javascript:
<script>
window.onload = function() {
alert('Loading Complete!');
}
</script>

jQuery not getting called in all browsers

Disclaimer: I am new to jQuery.
I am trying to implement a fadeOut effect in jQuery for a div block, and then fadeIn effect on two other div blocks.
However, these effects are only working in the Chrome browser (i.e. they won't work in Safari, FireFox, Opera) which is rather perplexing to me. I have tried clearing my cache in case it was storing an old file, but none of that seemed to do anything.
Basic idea (stored in mainsite.js file):
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
So when a div tag with the id of videoThumbnail_XYZ is clicked, it starts the fadeOut and fadeIn calls on the other div tags.
I am loading my javascript files into the page in this order (so jQuery is loaded first):
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
Any guidance you could give is greatly appreciated!
Make sure the DOM is fully loaded before your code runs.
A common way of doing this when using jQuery is to wrap your code like this.
$(function() {
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
});
This is a shortcut for wrapping your code in a .ready() handler, which ensure that the DOM is loaded before your code runs.
If you don't use some means of ensuring that the DOM is loaded, then the #videoThumbnail_XYZ element may not exist when you try to select it.
Another approach would be to place your javascript code after your content, but inside the closing </body> tag.
<!DOCTYPE html>
<html>
<head><title>your title</title></head>
<body>
<!-- your other content -->
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script async="" type="text/javascript" src="javascripts/mainsite.js"></script>
</body>
</html>
If mainsite.js is being included before your div is rendered, that might be throwing the browsers for a loop. Try wrapping this around your click handler setup:
$(document).ready(function(){
// your function here
});
That'll make sure that isn't run before the DOM is ready.
Also, you might consider putting the fadeIn calls in the callback function of your fadeOut, so if you decide to change the duration later on, you only have to change it in one place.
The way that'd look is like this:
$("#thumbnailDescription_XYZ").fadeOut(300,function(){
$("#videoPlayer_XYZ").fadeIn(100);
$("#videoHiddenOptions_XYZ").fadeIn(100);
});
I see you have a delay set to the same duration your fadeOut is, I would recommend instead of delaying which in essence your waiting for the animation to complete that instead you use the callback function.
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300, function() {
$("#videoPlayer_XYZ").fadeIn(100);
$("#videoHiddenOptions_XYZ").fadeIn(100);
});
});
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
$(document).ready(function(){
$("#videoThumbnail_XYZ").click(function () {
$("#thumbnailDescription_XYZ").fadeOut(300);
$("#videoPlayer_XYZ").delay(300).fadeIn(100);
$("#videoHiddenOptions_XYZ").delay(300).fadeIn(100);
});
});
All three of the following syntaxes are equivalent:
* $(document).ready(handler)
* $().ready(handler) (this is not recommended)
* $(handler)

Categories

Resources