Home > Developer > Web Develop
More and more friends now like to use jquery with ASP. Recently, many Indians in the forum complained that UpdatePanel and jquery are incompatible, many jquery effects are not work after the UpdatePanel update. This article solves this compatibility problem by analyzing the framework structure of both.
Problem Recurrence:
1. Add ScriptManager and UpdatePanel to the page
2. Adding element A in the UpdatePanel
3. Add x effect to element a with jquery
4. Add a button B to the UpdatePanel as the postback
Result: On the first page load, the x effect of element A is normal, after clicking B, the page is refreshed locally, and element a loses the X effect.
Analysis 1:updatepanel
UpdatePanel is mainly used for local refresh in the application, avoiding the postback of the whole page.
The core of UpdatePanel implementation of local refresh is the Microsoftajaxwebform.js file, its local refresh process is to submit the page to the server (including viewstate), execute the service-side code asynchronously will be in the UpdatePanel HTML to re-render.
During this process, the rest of the page does not have a status change.
Analysis 2:jquery
jquery can add various attributes and event handles to HTML elements through simple code, where we can see the official documentation:
Tutorials:how JQuery Works
Http://docs.jquery.com/How_jQuery_Works
Here, we can tell that jquery has an important event labeled "Ready", generally the effects of HTML elements and event handles are added through this ready event, as follows:
$ (document). Ready (function () {
$ ("P"). Text ("The DOM is now loaded and can be manipulated.");
});
The official note to this is that the ready event will run once after the DOM is fully loaded, OK, so far, the cause of the problem is almost clear:
Reason:
Because element a is overridden in the UpdatePanel after a local refresh, and the entire DOM tree is not reloaded, jquery's ready event is not triggered, so element a loses its original effect.
Solution:
We can extract the code executed in the Ready event, and then execute the jquery initialization code once each UpdatePanel local flush, by capturing the ScriptManager endrequest event, as follows:
<script type= "Text/javascript" >
function Load () {
Sys.WebForms.PageRequestManager.getInstance (). Add_endrequest (Endrequesthandler);
}
function Endrequesthandler () {
ReadyFunction1 ();
ReadyFunction2 ();
ReadyFunction3 ();
}
</script>
<body onload= "Load ()" >
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
