How to combine multiple jquery functions

Question

If you view the jquery code below you will see the famous $(document).ready(function(){ that starts the script off. I see this on pretty much all jquery code e

Answer 1

no u dont need , just put it in a single, and trigger all functions from there;

<script type="text/javascript" >
 $(document).ready(function(){
        func1();
        func2();
        ...
});
</script>

Answer 2

First of all, you can shorten that to:

<script type="text/javascript" >
    jQuery(function() {
        ...
    });
</script>

Second, if you want your scripts to run when the page is finished loading, then yes, you need to put them in a jQuery/document.ready() function. You can put them all in the same jQuery(function () { }) block though and they'll be executed in order, you don't have to separate them.

To expand on the workings of function() {} blocks:

jQuery(/* do something */);

means "On page load, do something". That "do something" is a function. You can pass it a function directly like this:

function myFunction() {
    ...
}

jQuery(myFunction);

You defined a function "myFunction" and told jQuery to execute it on page load. Note that you just pass the function itself to jQuery, without (). If you'd write jQuery(myFunction()); instead, that would execute myFunction() immediately, and whatever is returned by myFunction() would be placed in jQuery(), and that would be executed upon page load. It's a little different from languages like PHP, since in PHP it's desired behaviour to execute everything immediately, in Javascript that is not necessarily so. In PHP you can't pass the function itself around, in Javascript you can. Functions in Javascript act a lot more like variables.

What you usually do is "make up a function on the fly" that contains some block of code that you want executed at a later time:

jQuery(function () {
    foo();
    bar();
});

In this case you're passing a function as well, just that you made it up on the fly and the function doesn't have a name. jQuery will hold onto this function until page load, at which time it'll execute it. Inside that function you can do as many things as you like.

Answer 3

You should try not to put too much inside the doc ready blocks. Yes you can have multiples of them however I stick to one if any. You can also put your script just before the closing body tag without the need for document ready.

I advise breaking the code into separate functions. That way you can reuse them throughout your page at various stages. Then just use the doc ready block to trigger a call to that pages init function.

You can also use $(function(){}); as a shorcut to $(document).ready(function(){});

<script type="text/javascript" >
 $(function(){
    init();
 });

 function init(){
   someFunction();
   //other init stuff
 }

 function someFunction(){
  setTimeout(function(){
     $(".flash").fadeOut("slow", function () {
     $(".flash").remove();
   }); }, 2000);

 }
</script>

Answer 4

I think the original poster was asking if he must do this:

<script>
 $(document).ready(function(){
        func1();
});
</script>
<script>
 $(document).ready(function(){
        func2();
});
</script>

Or if he can just do this:

<script>
 $(document).ready(function(){
      func1();
      func2();
});
</script>

In the later example, there is one script and one document ready statement. Much cleaner. I believe the answer is yes, you can do the later without any problem.

Answer 5

The problem is that you don't understand what the ready event is and why you need it.

Imagine that a page has not yet loaded fully and you try to change something on it with some javascript and since the code for that HTML element you are trying to manipulate is not even loaded yet, things go bad.

The ready event solves this problem. Any function (most often a single anonymous function) that you bind to the ready event gets executed as soon as all elements in the document are ready to be traversed and manipulated. It's considered bad practice to have any inline javascript. If you want an event(click,hover,etc) to work on your page, you should call it inside the $(document).ready() function.

And since a page only gets loaded once, any function that is bound to the ready event will only get called once. So there isn't much sense in binding multiple functions to the ready event. You can do everything in that one function that you bind to it. However it will cause no harm (as long as you understand what you are doing) since every function that you have bound to the ready event will be called once the DOM is ready.

I don't understand what you are trying to achieve by running that same piece of code five times... so I can't help you with that.

I hope that this explanation helps you solve your actual problem.