javascript - $(document).ready equivalent in asynchronously loaded content - Stack Overflow

admin管理员组

文章数量:1336340

I have a UI (let's call it page 1) which has a lot of HTML and JavaScript in it. When some of the elements on page 1 are clicked, a jQuery UI Dialog is opened and loaded with a partial page (let's call that page 2):

$("#myDialog").dialog({ modal: true /* Other options */ });
$('#myDialog').load('page2Link', { }, function () { });
$('#myDialog').dialog('open');

Page 2 then has a bunch of HTML and JavaScript as well. Simplified example:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

<div id="page2Body">
    <!-- More elements -->
</div>

I have JS inside page2Stuff.js that needs to wait until page 2 is pletely rendered. Is there something I can use within this partial page to see if the new HTML has been added to the DOM? I have tried the following:

$('#myDialog').load('page2Link', { }, page2ReadyFunction);

This can't find page2ReadyFunction. I assume because .load runs the JavaScript in page2Stuff.js and then discards it or something?

The way I'm able to get it to work now it to use setTimeout and continually check to see if $('#page2Body') returns anything but this doesn't seem ideal.

I have a UI (let's call it page 1) which has a lot of HTML and JavaScript in it. When some of the elements on page 1 are clicked, a jQuery UI Dialog is opened and loaded with a partial page (let's call that page 2):

$("#myDialog").dialog({ modal: true /* Other options */ });
$('#myDialog').load('page2Link', { }, function () { });
$('#myDialog').dialog('open');

Page 2 then has a bunch of HTML and JavaScript as well. Simplified example:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

<div id="page2Body">
    <!-- More elements -->
</div>

I have JS inside page2Stuff.js that needs to wait until page 2 is pletely rendered. Is there something I can use within this partial page to see if the new HTML has been added to the DOM? I have tried the following:

$('#myDialog').load('page2Link', { }, page2ReadyFunction);

This can't find page2ReadyFunction. I assume because .load runs the JavaScript in page2Stuff.js and then discards it or something?

The way I'm able to get it to work now it to use setTimeout and continually check to see if $('#page2Body') returns anything but this doesn't seem ideal.

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 9, 2012 at 19:02 Peter-Paul van Gemerden 7,0113232 silver badges3737 bronze badges asked Jan 9, 2012 at 18:49 xbradyxbrady 1,7031414 silver badges2323 bronze badges 8

• page2ReadyFunction would be a callback handler called upon pletion of the load. that would be the best way to go, don't know why it's not getting called? can you explain how you implemented/defined page2ReadyFunction ? – c4urself Commented Jan 9, 2012 at 18:51
• 1 Why don't you simply put the script at the end of page2? – Joseph Silber Commented Jan 9, 2012 at 18:53
• @c4urself page2ReadyFunction would just be a function defined in the page2Stuff.js like so: function page2ReadyFunction() { } – xbrady Commented Jan 9, 2012 at 18:54
• 2 @xbrady - Sure. The HTML is processed by source order. If the last thing is the script, everything before that would have loaded. – Joseph Silber Commented Jan 9, 2012 at 18:56
• 1 The JavaScript should load after the rendering event regardless of where it is placed in the child document. jQuery.fn.load uses AJAX to load the HTML and then injects it into the node. As such, the script tag should execute asynchronously after the node insertion pletes. – Brian Nickel Commented Jan 9, 2012 at 19:04

 |  Show 3 more ments

6 Answers 6

Sorted by: Reset to default 2

Instead of having your script tag at the beginning of your second page, put it at the end of it, after all the HTML, like this:

<div id="page2Body">
    <!-- More elements -->
</div>

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

Since the code will be executed according to source order, you can rest assured that the HTML will be ready by the time your script runs.

When you run the load function, it is expecting page2ReadyFunction to exist at that exact time. It does not because you haven't loaded the script. The following would get around that problem but also shouldn't work because the script will load asynchronously:

$('#myDialog').load('page2Link', { }, function() {page2ReadyFunction();});

To get around that problem, you could do something like this:

$('#myDialog').load('page2Link', { }, function() {
    function tryPageLoad() {
        if(page2ReadyFunction)
            page2ReadyFunction();
        else
            setTimeout(tryPageLoad, 100);
    }
    tryPageLoad();
});

This function tries every 100ms to see if page2ReadyFunction exists and calls it when it does.

Of course, you shouldn't have to worry about any of this because the child script tag will load asynchronously and the rendering should happen before the JavaScript executes. You could verify this by using console.log to see what fires first, the JavaScript in the client script or the callback function.

the callback function for load from the jQuery docs: http://api.jquery./load/

plete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request pletes.

This function executes when the request pletes, but you need to wait until page2 has been rendered.

A simple solution would be to put a $(document).ready() block into the javascript files that page2 pulls.

please if you want something to load after plete ajax load

you gotta use the

full ajax function like that

var req= $.ajax({
            url:'page2Link',
            type:"post",
            data:{ajax:1,field_id:field_ids,whatever:whatever}

        }); 
        //after loading
        req.plete(function(res){
            $('#myDialog').html(res);
        });
        //after plete loading and request end
        req.always(function(res){
            page2ReadyFunction
        });

all that instead of

$('#myDialog').load('page2Link', { }, function () { });

Serve out Page 2 like this:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

<div id="page2Body">
    <!-- More elements -->
</div>

<script>
$(function() {
    // call your function from page2Stuff.js here
});
</script>

could you use something like this:

<body onload="function2kickOffP2()">

This would go on the body of page2.

本文标签： javascript(document)ready equivalent in asynchronously loaded contentStack Overflow