All $ (document) .ready () was launched, is there an event for this?

Question

I have a first.js file included in the index.php page that has something like this:

$(function(){ $("#my_slider").slider("value", 10); }); 

And them in index.php I have dynamically created slidders:

 <?php function slidders($config, $addon) { $return = ' <script type="text/javascript"> $(function() { $("#slider_'.$addon['p_cod'].'").slider({ min: '.$config['min'].', max: '.$config['max'].', step: '.$config['step'].', slide: function(event, ui) { $("#cod_'.$addon['p_cod'].'").val(ui.value); $(".cod_'.$addon['p_cod'].'").html(ui.value+"'.@$unit.'"); }, change: function(event, ui) { $("#cod_'.$addon['p_cod'].'").change(); } }); $("#cod_'.$addon['p_cod'].'").val($("#slider_'.$addon['p_cod'].'").slider("value")); $(".cod_'.$addon['p_cod'].'").html($("#slider_'.$addon['p_cod'].'").slider("value")+"'.@$unit.'"); }); </script>'; return $return; } ?> 

The problem is that my index.php sliders are created after my first.js. I can’t set the value there, is there any event like “after all $ (document) .ready () has completed” that I can use in first.js to control the sliders created in index.php?

Answer 1

I don’t know how to say when the last function $(document).ready() was launched, but the function $(window).load() triggered after $(document).ready()

Answer 2

The safest way is to call $(window).load() inside $(document).ready() . This will preserve the execution order in all cases, making sure your last code is not passed to $(window).load() until all the scripts $(document).ready() are complete. Without this, race situations are possible in some browsers where $(window).load() can be called after all $(document).ready() scripts are run, but before all $(document).ready() scripts are complete .

 $(document).ready(function() { $(window).load(function() { // this code will run after all other $(document).ready() scripts // have completely finished, AND all page elements are fully loaded. }); }); 

Answer 3

Based on Jan's answer, I realized this (verified - works):

 jQuery(document).ready(function() { jQuery(document).ready(function() { /* CODE HERE IS EXECUTED AS THE LAST .ready-CALLBACK */ }); }); 

Of course, this is because ready-made callbacks are called in the order in which they are assigned. At the moment, when you call an external external callback, all other scripts must have ready-made callbacks. Thus, assigning your finished callback (internal) will now result in you being the last.

Answer 4

Try this neat trick / gross:

 $(function(){ $(function(){ $("#my_slider").slider("value", 10); }); }); 

Looks stupid? It works because jQuery executes event handlers in the order in which they were added. Adding an event handler to the event handler takes as long as possible (just make sure that you do not do this on any of the sliders, this is very easy to do).

Proof of concept. http://jsfiddle.net/9HhnX/

Answer 5

One of the goals of the jQuery $ (document) .ready () function is that the standard javascript window.onload event will not be executed until everything on the page is loaded (including images, etc.), although the functions may be helpful to get started long before that. Thus, $ (document) .ready () is launched immediately after the construction of the DOM hierarchy.

Given this, one option would be to run a “after everything else” script when the page loads. This does not guarantee that all $ (document) .ready () scripts are complete.

A better, but more complex option is to create a function that checks for the presence of sliders, and if they do not exist, call "setTimeout" on its own, so it can wait a few milliseconds and try again.

(To answer your specific question, no, no "after $ (document) .ready () did a" callback ".)

Answer 6

You better add a unique class for your sliders, and not in #my_slider, as this will only work for an element with id = my_slider.

If you want to have the same functionality, you should check .live from jquery, it will add the same functionality to the elements that are added after the binding.

If this does not work for you, then when you add new sliders, you will have to go through them in the DOM and call the necessary function.