On the first page load, the x effect of element A is normal, click B, page local refresh, at this time, back to a, element a loses x effect.
I started thinking it was the front end. This to the programmer there is a problem, but after careful examination found no, and then learned that the next page applied asp.net ajax local refresh, it is clear, it is estimated that the conflict with jquery.
Problem recurrence: 1.asp.net Ajax adds ScriptManager and UpdatePanel to the page
2. Add element A in UpdatePanel
3. Add x effect to element a with jquery
4. Add a button B in the UpdatePanel as a postback
That's when the problem arises.
The analysis 1:updatepanel in the application mainly uses in the partial refresh, avoids the entire page the postback. UpdatePanel implementation of local refresh is the core of the Microsoftajaxwebform.js file, its local refresh process is to submit the page to the server (including ViewState), the implementation of the server-side code asynchronously will be in the UpdatePanel of the HTML to render again. During this process, the rest of the page does not have a status change.
Analysis 2: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
Here, we can see that jquery has an important event tag "ready", which is generally added to the effects of HTML elements and event handles, as follows: $ (document). Ready (function () {$ ("P"). Text ("The DOM is now loaded and can manipulated."); });
The official explanation for this is that the ready event will run once after the DOM is fully loaded, OK, so the reason for the problem is almost clear:
Reason: Because element A is rewritten after the UpdatePanel local refresh, and the entire DOM tree is not reloaded, the jquery ready event does not trigger, 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 every UpdatePanel local refresh by capturing the ScriptManager endrequest event, as follows: < Script type= "Text/javascript" > Function slide () {//here is code} function load () {Sys.WebForms.PageRequestManager.ge Tinstance (). Add_endrequest (Endrequesthandler); function Endrequesthandler () {slide ();} </script >
Finally, you need to add <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
