[ACCEPTED]-How to combine multiple jquery functions-jquery

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

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

You can also use 1 $(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>

I think the original poster was asking if 5 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 4 the later example, there is one script and 3 one document ready statement. Much cleaner. I 2 believe the answer is yes, you can do the 1 later without any problem.

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

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

The ready event solves this problem. Any 19 function (most often a single anonymous function) that you 18 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 17 have any inline javascript. If you want 16 an event(click,hover,etc) to work on your 15 page, you should call it inside the $(document).ready() function.

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

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

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

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

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

First of all, you can shorten that to:

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

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

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

jQuery(/* do something */);

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

function myFunction() {
    ...
}

jQuery(myFunction);

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

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

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

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