CODEWITHSUNDEEP
jquery
mjsilva
mjsilva

Reputation: 1347

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

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?

Upvotes: 63

Views: 93919

Answers (6)

John Hartsock
John Hartsock

Reputation: 86892

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

Upvotes: 75

Matteo B.
Matteo B.

Reputation: 4074

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.

Upvotes: 19

Toby
Toby

Reputation: 647

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/

Upvotes: 14

Thaeli
Thaeli

Reputation: 1108

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

Upvotes: 64

darren102
darren102

Reputation: 2828

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.

Upvotes: 0

Jacob Mattison
Jacob Mattison

Reputation: 51062

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.)

Upvotes: 3

Related Questions