发表新帖
发表新帖

jQuery ready event not fired on partial page load

后端 未结
关注
5 1373
春和景丽
春和景丽 2021-01-13 00:14

Here\'s the situ: A page which contains html and using the jQuery libray and tabs jQuery UI plugin loads another page when some tab is clicked. The problem is that when the

相关标签:
5条回答
  • 旧巷少年郎
    2021-01-13 00:46

    OK.. so i have a simple answer to this problem now, which should mean minimal code changes. Rather than the sub views (these are real aspx views which have no html, head or body tags) having a js include (essentially the client side behaviour model) which responds to $(document).ready, we can use the suggestion from mkedobbs to provide something similar. Simply:

    $("#MyDiv").load("page.htm", null, function(){ $(document).trigger("PartialLoaded"); });

    Then in the sub view js include

    $(document).bind("PartialLoaded", function(){ .........});
    0 讨论(0)
  • 自闭症患者
    2021-01-13 00:48

    Well - I'm using ASP.NET MVC with jQuery. I am NOT using partial view (ascx) for this part of the application, instead I am sing full views, but loading them in to divs. So I have a main view with a head with some reference to a js file which is the client side logic for this "type" of view. When clicking some tab on this view we use the jquery tabs to "load" antoher view into some div. The way tabs are loaded using this plugin is by simply giving a url (rather than using load to which - as pointed out - i could add a call back function rather than rely on ready).

    However. I dont want ALL the client logic to be in some parent view, as any view should be able to load another view by url (sub views include a link to their related js file which contains all the logic to format/hookup when loaded).

    What is REALLY confusing to me now is that it seems to be working in some situations and not in others; for example 1) when the parent view is opened in a frame in IE, the sub view readys are never triggered 2) when opening the same url directly in IE, the sub views readys ARE triggered 3) when opening the same URL in FFX2 the ready every are NOT triggered 4) finally.. but when opening a sub view (which has sub views) of this parent in FFX2, the child ready event ARE triggered!.. baffling..

    I'mm gonna run some tests n get get back to ya, but any suggestions on why this behaviour might be different would be much appreciated

    UPDATE: Ah ha!.. looks like even with the above hurdles cleared, there is a browser difference (obviously from reading above).. the below simple test works fine in IE7 but fails in FFX2. The ready event is triggered in IE but not FFX when loading Test2.htm into Test1.htm. From experience I know this means that IE has a "quirk" and FFX is working as you would expect based on W3C. So it looks like this approach is a no no, unless anyone has any suggestions?:

    Test1.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js">    </script>
    <script type="text/javascript" language="javascript">
    <!--
        $(document).ready(function() {
            alert("Test1.htm");
            $("#Test1").load("Test2.htm");
        });
    //-->
    </script>
</head>
<body>
    <h3>SOME TEST</h3>
    <div id="Test1">EMPTY</div>
</body>
</html>

    Test2.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js">    </script>
    <script type="text/javascript" language="javascript">
    <!--
        $(document).ready(function() {
            alert("Test2.htm");
            //$("#Test1").load("Test3.htm"); // load more
        });
    //-->
    </script>
</head>
<body>
    <h3>SOME TEST</h3>
    <div id="Test2">EMPTY</div>
</body>
</html>
    0 讨论(0)
  • 后悔当初
    2021-01-13 00:49

    How are you firing the AJAX request to the server? If you're using ASP.NET AJAX, then Brian Hasden's answer is what you are looking for. If you are using jQuery to send the request, then you can either set a call back using the load function.

    $(".ajaxLink").load(url, null, function() {
    // code here
});

    load() Documentation

    or set a global ajaxComplete event that is fired every time an ajax call is complete.

    $(document).ajaxComplete(function() {
    // code here
});

    ajaxComplete() Documentation

    0 讨论(0)
  • 死守一世寂寞
    2021-01-13 00:50

    I believe you can do something like this (derived from ASP.NET):

    <script type=”text/javascript”>
     <!--
     Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
     function Request_End(sender, args)
     {
          // Insert code you want to occur after partial page load here
     }
     // -->
</script>

    Which should hook into the end request event that includes partial page updates. You'd obviously update the example above to call the appropriate JS function that you'd like.

    0 讨论(0)
  • 时光说笑
    2021-01-13 01:08

    The load method offers a callback which is executed after the content has been loaded.

    $("#myDiv").load(url, null, function() { 
   //do your stuff here 
});

    Full documentation and examples at jQuery.com: http://docs.jquery.com/Ajax/load

    0 讨论(0)
 看不清?
提交回复
热议问题