Geek Answers Handbook

JQuery ready event does not fire on partial page load

Here's a sit: A page containing html and using jQuery libray and tabs. The jQuery UI plugin loads another page when a tab is clicked. The problem is that when the / html page is loaded / displayed (let it simplify and say that it just does something like $ ("# myDiv"). Load (url);), the finished event does not fire, because , of course, the window "is already loaded and the loading event is triggered. This means that none of the jQuery things that I want to do when loading (partial loading) the page is executed. The UI.tabs plugin is designed to load pages in other tabs, and we can assume that other pages may contain their own jQuery ... so there should be then something like that.

I can think of very terrible ways to overcome the problem, for example, to have a script block at the bottom of the displayed page (loaded in a div) that does everything I would do when ready (a) you can assume that the browser already displayed the page, if there was script block is damaged). This, however, is VERY bad practice. Any suggestions?

+6
jquery ajax events partial ready
source share
5 answers

How do you run an AJAX request on a server? If you are using ASP.NET AJAX, then Brian Hassden's answer is what you are looking for. If you use jQuery to send a query, you can either set the callback using the load function.

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

load () Documentation

or set the ajaxComplete global event that fires every time an ajax call completes.

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

ajaxComplete () Documentation

+4
source share

The load method offers a callback that is executed after the content is loaded.

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

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

+2
source share

Well, I am using ASP.NET MVC with jQuery. I DO NOT use partial view (ascx) for this part of the application, instead I drink the full view, but load them into divs. Therefore, I have a basic view with the head with some reference to the js file, which is the client-side logic for this "type" of the view. When you click a tab on this view, we use jquery tabs to load the "antoher view" into some div. Tab paths are loaded using this plugin by simply specifying the URL (instead of using the load to which, as indicated, I could add a callback function, rather than relying on availability).

But. I don’t want ALL client logic to be in some parent view, since any view should be able to load another view by url (routines include a link to the associated js file, which contains all the logic for formatting / connection at boot).

What REALLY confusing now is that it works in some situations and not in others; for example, 1) when the parent view is opened in a frame in IE, ready files in the view never run 2) when the same URL is opened directly in IE, readys routines are launched 3) when the same URL is opened in FFX2, ready each one does NOT start 4) finally .. but when you open the sub-heading (which has sub-items) of this parent in FFX2, the child readiness event fires! .. is puzzled ..

I am going to run some tests and I will get back to you, but any suggestions as to why this behavior may be different will be highly appreciated

UPDATE: Ah, ha! .. it looks like even with the obstacles eliminated above the difference is in the browser (obviously from reading above). below a simple test works fine in IE7, but does not work in FFX2. The finished event is fired in IE, but not FFX, when Test2.htm is loaded into Test1.htm. From experience, I know that this means that IE has a “quirk,” and FFX works the way you expect, based on W3C. So it looks like this approach is not if anyone has no 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>
+1
source share

OK .. so I have a simple answer to this problem now, which should mean minimal code changes. Instead of sub views (these are real aspx views that don't have html, head or body tags) that have js include (essentially a client-side behavior model) that responds to $ (document) .ready, we can use the sentence from mkedobbs to provide something like that. Just:

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

Then in js, turn on

 $(document).bind("PartialLoaded", function(){ .........});
+1
source share

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 be connected to the final request event, which includes partial page updates. Obviously, you updated the above example to call the appropriate JS function that you need.

-one
source share

More articles:


All Articles