jQuery UI Dialog(Modal), prevents any postback

Question

How can I make an ASP.NET submit button postback while in jQuery UI dialog?

Actually I am using the UI dialog modal like the one we did with Ajax control toolkit's modal, to update values of data stored in a gridview control. I am able to do every thing, but I can not trigger a postback with a UI Modal. I am a little new to jQuery and its UI so, can't find a good solution for that.

For Ajax toolkit's modal we used to set a trigger property so as to enable a postback when someone clicks on its submit button, but here it is like impossible. Following is my code:

//------------Modal first----------------
<div id="editEventModal" title="Edit Event Details" style="display:none">
//-------Here are my controls with asp.net validators
 <asp:Button ID="btnEditEvent" runat="server" Text="Save" ValidationGroup="EditEvent"  />
</div>

//--------- JavaScript/jQuery method for calling popup
function invokeEditPopup(){
    $("#editEventModal").dialog({
        width: 700,
        modal: true
    });
}
//-- Please not that I have not used UI_Dialog's predefined `OK`, `Cancel` buttons as I need to validate my form with asp.net validators on submit button's `click` event.

In the gridview I have added javascript event invokeEditPopup() to buttons (that will be used to popup the dialog), in the GridView_DataBound Event.

How do I make the btnEditEvent of the dialog to make a postback, so as to carry out the required process on the server.

-----------------------For more information------------------ I tried using ideas from jQuery UI Dialog with ASP.NET button postback.

And just below defining my dialog in the JavaScript, I tried using (of-course separately):

$("#editEventModal").parent().appendTo($("form"));

//--------And---------------
$(".ui-dialog").parent().appendTo($("form"));

//--------And---------------
$("#editEventModal").parent().prependTo($("form"));

//--------And---------------
$(".ui-dialog").parent().prependTo($("form"));

But it did not work correctly.

Solution 1

Finally, I got the answer: Stack Overflow question An ASP.NET button click event is not firing. Thanks to PirateKitten.

All I needed to do was just to add the following just below my dialog creation in JavaScript, and it worked like charm.

$("#editEventModal").parent().appendTo(jQuery("form:first"));

Solution 2

You may also add a css modification to be sure that the dialog wouldn't stay behind the overlay div.

$("#editEventModal").parent().appendTo(jQuery("form:first")).css({"z-index":"101"});