In content page, the jquery document ready event fires before the content page is loaded.

Question

I have a master page that references jquery + jqueryui. Everything is fine. In the content page I placed:

  $(document).ready(function () {
        $("#tabs").tabs();
    });

It turns out that the ready event fires BEFORE the html of the content page is loaded :/. So, how to determine when the whole content page is loaded ?

Edit this is my markup:

master page:

<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/Scripts/jquery-1.4.1-vsdoc.js" />
    <asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.2.custom.min.js" />
  </Scripts>
</asp:ScriptManager>

content page:

<div id="tabs">
    <div id="whatWorkedWellDiv">
        <fieldset>
            <legend>What Worked Well</legend>
            <br />
            <label for="user">
                Name</label>
            <input type="text" name="user" value="" /><br />
            <label for="emailaddress">
                Email Address:</label>
            <input type="text" name="emailaddress" value="" /><br />
            <label for="comments">
                Comments:</label>
            <textarea name="comments"></textarea><br />
            <label for="terms">
                Agree to Terms?</label>
            <input type="checkbox" name="terms" class="boxes" /><br />
            <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
        </fieldset>
    </div>
    <div id="whatCouldHaveGoneBetterDiv">
        <fieldset>
            <legend>What could have gone better</legend>
            <br />
            <label for="user">
                Name</label>
            <input type="text" name="user" value="" /><br />
            <label for="emailaddress">
                Email Address:</label>
            <input type="text" name="emailaddress" value="" /><br />
            <label for="comments">
                Comments:</label>
            <textarea name="comments"></textarea><br />
            <label for="terms">
                Agree to Terms?</label>
            <input type="checkbox" name="terms" class="boxes" /><br />
            <input type="submit" name="submitbutton" id="submit1" value="Submit" />
        </fieldset>
    </div>
</div>

Jscript:

$(document).ready(function () { $("#tabs").tabs(); });

Answer 1

If you are using frames/iframes this may be possible, since the .ready() handler would fire on that DOM in which it is actually executed.

Another way this could happen is, if you 'afterload' some parts of your site asyncronous.

Whatsoever, if you have different DOMs in your site, you need an individual .ready() handler in all of them.

If you don't have any of those constelations, please provide your html markup.

Answer 2

Try the following in your MasterPage

<script language="javascript" type="text/javascript" src='<%=ResolveClientUrl("~/Scripts/jquery-1.4.2.min.js")%>'></script>