After all $(document).ready() have run, is there an event for that?

Jquery

Jquery Problem Overview


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

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

And them in index.php I have some dynamicly 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, because my index.php sliders are being instantiated after my first.js I can't set up a value there, is there any event like "after all $(document).ready() have run" that I can use in first.js to manipulate the sliders created in index.php?

Jquery Solutions


Solution 1 - Jquery

Dont know how to tell when the last $(document).ready() function fired, but $(window).load() function fires after the $(document).ready()

Solution 2 - Jquery

The safest thing to do is to invoke $(window).load() inside $(document).ready(). This will preserve execution order in all cases by making sure that your run-last code is not passed to $(window).load() until all $(document).ready() scripts have completed. Without this there are possible race conditions in some browsers where $(window).load() may be invoked after all $(document).ready() scripts have started but before all $(document).ready() scripts have finished.

$(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.
	});
});

Solution 3 - Jquery

Based on Ian's answer I figured this out (tested - working):

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

Of course this is because the ready callbacks are invoked in the order they where assigned. At the moment, when your outer ready callback is invoked, all other scripts should have their ready callbacks already assigned. So assigning your ready callback (the inner one) now will lead to yours being the last one.

Solution 4 - Jquery

Try this neat trick/gross hack:

$(function(){
    $(function(){

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

    });
});

Looks stupid right? It works because jQuery executes event handlers in the order they were added. Adding an event handler in your event handler is about as late as you can (just make sure you're not doing this on any of the sliders accidentally; it's very easy to do).

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

Solution 5 - Jquery

One of the goals of jQuery's $(document).ready() function is that the standard javascript window.onload event won't run until everything on the page is loaded (including images, etc.), even though functions can usefully start running well before that. So $(document).ready() runs as soon as the DOM hierarchy is constructed.

Given this, one option would be to run your "after everything else" script on page load. This won't guarantee that all of the $(document).ready() scripts have completed, though.

A better but more complicated option is to create a function that checks for the existence of the sliders, and if they don't exist, calls "setTimeout" on itself, so it can wait a few milliseconds and try again.

(To answer your specific question, no, there is no "after all $(document).ready() have run" callback.)

Solution 6 - Jquery

You would be better to add a unique class to your sliders rather than the #my_slider since that will only fire for the element with id = my_slider.

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmjsilvaView Question on Stackoverflow
Solution 1 - JqueryJohn HartsockView Answer on Stackoverflow
Solution 2 - JqueryThaeliView Answer on Stackoverflow
Solution 3 - JqueryMatmarbonView Answer on Stackoverflow
Solution 4 - JqueryTobyView Answer on Stackoverflow
Solution 5 - JqueryJacob MattisonView Answer on Stackoverflow
Solution 6 - Jquerydarren102View Answer on Stackoverflow