Solution to the problem that jQuery UI's Dialog cannot submit_jquery

The specific manifestations are:
1. The submit button is invalid and there is no response after clicking.
2. Even if other means are used to submit the page, the server cannot obtain the form data in the Dialog.

Reason: JQuery will append the Dialog elements to the Body instead of the form. After studying the page source code, we found that the dynamically generated HTML elements when the jQuery UI Dialog control was initialized were added to the end of the page and behind the form element, and the original Dialog template part (which contained the form elements) was also moved to the dynamically generated within an HTML element. In other words, the form that was originally in the form was moved outside the form after Dialog was initialized, which caused all the forms in the Dialog template to become invalid.

Method 1:
I don’t know whether the design of jQuery UI’s Dialog is a feature or a bug. In order to achieve normal page submission in Dialog, based on the above analysis, I found a simple solution - move the HTML element dynamically generated by the Dialog control into the form element in the "open" event handler of the jQuery UI control. The code As follows:
Use code: $("#dialog").parent().appendTo("/html/body/form[0]");
or
$("#dlg"). dialog({
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
});
The "aspnetForm" in the code is the form element ID of the current page automatically generated by the ASP.NET application. You can change it to the form ID of your own page when using it.

The second method:
Add a DIV like

, and then write the Dialog into this DIV.
$("#dialog").parent().appendTo("#dialog_target");

The third method:
1. Modify the JS code of Dialog and add the code to the form , instead of inside the body
2. The custom HTML inside the Dialog is not used, but an IFRAME is added directly, the HTML inside is moved to another page, and then it is OK to interact with the parent page (I use This method allows these independent codes to be reused

The second method allows server events to be responded to and the effect is good, so it can be given priority.