Duplicate submission of form in Easyui tab-loaded page

http://blog.csdn.net/fxz1982/article/details/8987769

The tabs component in Easyui loads the target page in an href manner, if a form is placed in a Easyui component such as dialog or window in the target page. Then turn this tab off again. If you do a form submission, you will receive two submission requests in the background. Repeating the above operation again will receive 3 commit requests, if the form serialize () after the post submission server of jquery will receive the values are all organized in an array way.

After analysis, Easyui's tab loading page will take the DOM code of the target page's dialog component from the target page and put it into the DOM structure of this page. Look at the following differences in the target page before and after dialog initialization

1. The original DOM structure of the target page is as follows (the dialog in the page is not instantiated)

where <!--form--and code <div id= "Dept-dialog" ...> is the dialog that contains the form

2. If the target page instantiates dialog at load time, the code is as follows

You can see that the DOM structure of the < <div id= "Dept-dialog" ...> code is changed and moved to the lower-middle position.

3. Then take a look at what happened after this page was tabs loaded

, in the blue box is the target DOM loaded in the tab, you can see the red box <!--<div id= "Dept-dialog" ...> code is removed from the DOM structure of the target page. is moved to the DOM structure of the page on which the tabs component is located, because the DOM is too large to be truncated when it is expanded.

This is the problem, when the target page in tabs is closed, Easyui destroys the DOM content in the blue box, but the dialog component in the target page is moved outside, causing the DOM content of the dialog not to be destroyed with the target page, and when the target page is loaded again in tab mode, The same block of <div id= "Dept-dialog" ...> code content is generated in the DOM structure of the page where the tab component is located. This results in a duplicate submission of the form.

Workaround: There is no good way, stupid, in front of the tabs loading page, the ID of all the components in the tab page is recorded, and the object is manually found when the tab is closed.

Code at load time:

[JavaScript]View Plaincopy

2. $ (' #my-tabs '). Tabs (' Add ', {
4. Title:title,
6. Href:url,//address of the content page
8. Border: false,
10. Closable:True,
12. Id:title,
14. Extractor: function (data) {
16. //Extract the contents of the body
18. var pattern =/<body[^>]*> (. | [\n\r])  *) <\/body>/im;
20. var matches = pattern.exec (data);
22. if (matches) {
24. data = matches[1];
26. }
28. var tmp = $ (' <div/> '). HTML (data);
32. var divs = $ (TMP). Find (' [id] ');
34. var ids = [];
36. For (var i=0;i<divs.length;i++) {
38. Ids.push (Divs[i].getattribute ("id"));
40. }
42. //log all div with ID in tab
44. $ (' #base-tabs '). Tabs ('gettab ', title). DIVs = IDs;
46. return data;
48. }

Action when closed:

[JavaScript]View Plaincopy

2. $ (' #my-tabs '). Tabs ({
4. Autowidth:True,
6. Onbeforeclose: Function(title,index) {//close the panel before releasing the resource for this feature
8. var tab = $ (this). Tabs (' Gettab ', index);
10. //Prepare to delete div content
12. $ (' #my-tabs '). attr ("Rmdiv", Tab.divs);
14. },onclose: function () {//delete the DOM object used in tab closing
16. var divs = $ (' #my-tabs '). attr ("rmdiv"). Split (",");
18. For (var i=0;i<divs.length;i++) {
20. var divtarget = $ (' # ' +divs[i]);
22. if (divtarget) {
24. Divtarget.remove ();
26. }
28. }
30. }
32. });

Duplicate submission of form in Easyui tab-loaded page