Tip: ASP.NET Button Post Back in a JQuery Dialog

Most of the time we want to build some ASP.NET controls inside a JQuery dialog and that when user click on the controls, they will post back to the web server. However, by nature if you put those controls inside a Jquery dialog, they will not behave as expected.

The reason is because JQuery builds the dialog outside of the "form" element in the form that you have created. Any control that is put outside the form will not post back. The following illustration shows the scenario that i am talking about.

<form id='formName'>     

</form>

<div id='dialog'>

    <input id='btnSubmit' type='button' />

</div>

In order to fix the problem we need to move the div section inside the form. In order to do that we can write something like this:

dlg.parent().parent().appendTo($("#formName"));

The code above appends the resulting dialog to the form element named 'formName'. The end result basically shows the following code structure.

<form id='formName'>

     <div id='dialog'>

         <input id='btnSubmit' type='button' />

     </div>

</form>