Jquery ready what is going on?

Question

This has been messing with my mind for quite a while: Can anyone explain what is the difference between 1 & 2?

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

I've always thought that they would be the same(except for the $ assignment which can be controlled in the first example), but it turns out that both present different behaviors.

In the following example the 'submit' code will work while the 'realtime validation' code wont :

<script >
(function($){

 $('input, textarea, select, checkbox').each(function(){
  ... realtime validation code here ...
 });

 $('#subscribe_form').submit(function(){
  ... submit validation code here ...
 });

})(jQuery);
</script>

In the following example the 'realtime validation' code will work while the 'submit' code wont :

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

 $('input, textarea, select, checkbox').each(function(){
  ... realtime validation code here ...
 });

 $('#subscribe_form').submit(function(){
  ... submit validation code here ...
 });

});
</script>

What's going on here?

switch it to `` and see if your submit validation magically works... — PlantTheIdea, Nov 05 '13 at 16:28

score 1 · Answer 1 · answered Nov 05 '13 at 16:03

1

The correct use of onready is

$(function () {
        //your code here
    });

You called your function immediatly (note that I called $(..) while you just created a function (function ...)) so the DOM may not be ready in your context.

answered Nov 05 '13 at 16:03

Paolo Casciello

7,982
1
43
42

so basically, as soon as all of the DOM is loaded, $(document).ready(function(){ ... }) will be 'activated'. Why will the 'realtime validation' code stop working? – mindthefrequency Nov 05 '13 at 16:11
@user2956953 try to include your html so we can try to help :) or even better a jsfiddle example that shows your error. – Paolo Casciello Nov 05 '13 at 16:19
sorry, the reason why I'm not including the code is because its all attached with PHP tags and all sorts of stuff that is out of the scope of this question. – mindthefrequency Nov 05 '13 at 16:27
@user2956953 browse to the webpage and then press Ctrl+u. that's the code we're interested in. – Kevin B Nov 05 '13 at 16:29

score 0 · Answer 2 · answered Nov 05 '13 at 16:03

0

Typo

Missing $(function($){...code...});

      ^ added $ here

$(function($){...code...}); is an alias to jQuery’s “DOMReady” function which executes when the DOM is ready to be manipulated by your JavaScript code. This allows you to write code that needs the DOM, knowing that the DOM is available and ready to be read, written to, and otherwise modified by your application.

answered Nov 05 '13 at 16:03

Tushar Gupta - curioustushar

58,085
24
103
107

$(function($){...code...}); is an alias to jQuery’s “DOMReady” -> so it should be the same as (document).ready(function(){}), which brings me back to the same question! – mindthefrequency Nov 05 '13 at 16:06
@user2956953 you are missing `$` in `$(function($){...code...});` test again. – Tushar Gupta - curioustushar Nov 05 '13 at 16:09
the $ is passed to the function: (function($){...}(jQuery)}. using $(function($){...}) wiil result in an error: TypeError: $(...) is not a function – mindthefrequency Nov 05 '13 at 16:16

score 0 · Answer 3 · answered Nov 05 '13 at 16:04

0

The following does not execute after page is loaded, but immediately -- look at examples of jquery widgets that use this.

(function($){

This is quite different than not executing the code until the document is ready.

answered Nov 05 '13 at 16:04

David Fleeman

2,588
14
17

score 0 · Answer 4 · answered Nov 05 '13 at 16:19

no 1 is used only to create a scope, so the variables you declare inside of it (or as parameters) are only visible to code inside of it. Such functions are called Immediately-Invoked Function Expression

no 2 is the ready event handler, which is applied to your document. It means that the callback will be executed once when the document will be ready (so not immediately, as opposed to no 1). The document is ready when the DOM hierarchy is fully constructed, that is, when your DOM elements are available to your script.

Javascript is normally loaded and executed synchronously. It means that it is executed at the point where it is loaded in the DOM. If you put your script tag in your header for example, the script will execute when that part is constructed. The head part being before the body part, it means that no visible element is constructed at that point, because the DOM is constructed from top to bottom, so none is accessible. That's why you need to wait for the document to be ready before trying to select elements in the body, hence the ready handler.

Ok, so maybe I should rephrase: Lets supose I have example 2. Why wont $('form').submit(function(){...}) work? — mindthefrequency, Nov 05 '13 at 16:24
@user2956953 we would need to know more about your code. There's nothing in what you've given us thus far that would cause the submit to not work or the validation to not work. — Kevin B, Nov 05 '13 at 16:28
Do you get an error? Is jQuery in noconflict? Because if it is, your global jQuery variable is jQuery, not $. That's why the first example would work. — Martin Vézina, Nov 05 '13 at 16:30

Jquery ready what is going on?

4 Answers4