Solution to the failure of jquery easyui effect in UpdatePanel

Solution to the failure of jquery easyui effect in UpdatePanel_jquery

WBOY

Release： 2016-05-16 18:29:57

Original

1426 people have browsed it

The advantage of using easyui is not only its good interface, but also its ease of use.

Copy code The code is as follows:

 ...

...

...

As long as you define a corresponding class for it, you can achieve various things Effect.
Solution to the failure of jquery easyui effect in UpdatePanel_jquery

Solution to the failure of jquery easyui effect in UpdatePanel_jquery

However, if you put it in the updatepanel and don't display it for the first time, it will break down.

Copy code The code is as follows:

 
...

...

< div title="Return"> 
...

...< /div>

...

Define two identical views in multipleView, and the content is also Same. And put MultiView1 inside updatepanel.

Then set it to display the first view

Copy the code The code is as follows:

MultiView1.ActiveViewIndex =0;

Browse it. Display is normal. But when we change the display of the view, for example, change the above to MultiView1.ActiveViewIndex =1; then the effect of the second veiw will be lost.

Go to jquery.easyui.min.js to find the reason. I saw this sentence

Copy the code The code is as follows:

 
r=$(".easyui- tabs",_1ec); 
if(r.length){ 
 r.tabs(); 

Probably after the web page is loaded, look for the class defined as easyui-tabs layer. And add the effect to him.

Then you can imagine that when the page loads, we display the first view, then js finds the layer in the view and gives it the effect.
Then we updated the displayed view in the updatepanel, although the content was switched to the second view. But the page is not reloaded, and the above js code does not perform changes to the new view.
So the decision is to re-execute the js code after updatepanel posts back.
Define a rebinding function on the page.

Copy code The code is as follows:

 
function EndRequestHandler() { 
$(". easyui-tabs").tabs(); 
} 

Define another event.

Copy code The code is as follows:

 
function reload() { 
Sys.WebForms. PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
} 

add_endRequest
The PageRequestManager class is a partial page update that manages the server UpdatePanel control in the browser. In addition, properties, events, and methods are defined for customizing web pages through client-side scripts. Get an instance of the PageRequestManager class by calling the getInstance method. Then bind the endRequest event (raised after the asynchronous postback is completed and control is returned to the browser) through the add_endRequest method. In this way, every time a callback occurs in updatepanel, the EndRequestHandler() function will be triggered. Rebind the effect once. $(document).ready(function() { reload(); })
The invalidation problem is solved.