Friday, November 2, 2012

jQuery UI Dialog with ASP.NET button postback issue


Issue:
When we use Asp.Net buttons in a panel, which is displayed as a Dialog using jQuery UI, the
post back events of the buttons do not fire.

Cause:
The cause of the issue it that, jQuery pulls the controls which are used in the dialog out of the form control, hence the post back events of these controls will not fire.

Resolution:
The solution for this issue is to add the controls back to the form, this can be done by adding the following line of code after the dialog script.

var promptDlg = $('#plnConfirm').dialog({ modal: true });
promptDlg.parent().appendTo(jQuery("form:first"));

Full Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Dialog</title>
    <script type="text/javascript"
      src="javascript/jquery-1.7.2.js"></script>
    <script type="text/javascript"
      src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
      type="text/css"
      href="styles/smoothness/jquery-ui-1.8.21.custom.css"
      rel="Stylesheet" />
    <script language="JavaScript"
      type="text/javascript">
        $(document).ready(function() {
           var promptDlg = $('#plnConfirm').dialog({ modal: true });
           promptDlg.parent().appendTo(jQuery("form:first"));
        });
    </script>
<
body id="bodyimg" onload="javascript:setSegOfferOptions();">
    <form id="form1" runat="server">
      <
asp:Panel
            ID="plnConfirm"
            style="border:0 double #000000;">
      <br />
      <asp:Label 
            ID="lblConfirm"
            runat="server"
            ForeColor="Maroon">Do you wish to                       
            continue?</asp:Label><br />
      <asp:Button
            ID="cmdYes"
            runat="server"
            Text="Yes"
            onclick="cmdYes_Click" />  
      <asp:Button
            ID="cmdNo"
            runat="server"
            Text="No"
            onclick="cmdNo_Click" />
      </asp:Panel>   
      </form>
</body>
</html>

Search Flipkart Products:
Flipkart.com

No comments: