Button click event not fired in jquery modal popup

Question

I have implent one jquery modal popup

Jquery Code:-

<script type="text/javascript">
    $(function(){
     $('#<%=a2.ClientID %>').click(function(){
     $('#modelPopup').dialog({
     title: "Add New Server",
     width:650,
     height:450,
     modal:true,
     buttons:{
      Close:function(){
      $(this).dialog('close');
      }
     }
     });
    });    
    })
    </script>

Html:-

<asp:Button ID="btnAddNewServic" Text="Add Service" runat="server" 
 CssClass="btnSmall_bg_green" Height="26px" Width="98px" OnClick="btnAddNewServic_Click" />

Code Behind:-

 protected void btnAddNewServic_Click(object sender, EventArgs e)
        {
            int rowCount = 0;
            rowCount = Convert.ToInt32(Session["clicks"]);
            rowCount++;

            Session["clicks"] = rowCount;
            for (int i = 0; i < rowCount; i++)
            {
                TextBox txtServerU = new TextBox();
                Label lblU = new Label();

                txtServerU.ID = "txtServerU" + i.ToString();
                lblU.ID = "lblU" + i.ToString();

                lblU.Text = "Service" + (i + 1).ToString() + ":";

                panelnewserver.Controls.Add(lblU);
                panelnewserver.Controls.Add(txtServerU);

            }
        }

I could not able to find the issue of this code. Can anyone help me to fire this button click event. Thanks in advance.

Updated:-

JQuery Code:-

$(function(){
     $('#<%=a2.ClientID %>').click(function(){
     var $dialog= $('#modelPopup').dialog({
     autoopen:false,     
     title: "Add New Server",
     width:650,
     height:450,
     modal:true,        
     buttons:{
      Close:function(){
      $(this).dialog('close');
      }
     }     
     });
      $dialog.parent().appendTo($("form:first"));
      return false;
    });    
    })
    </script>

Now the button click event is fired but after Complete my process the modal popup will be automatically closed. Can anyone help me to overcome this issue.

Answer 1

From memory I believe jQuery UI dialogs actually take the dialog element out of its place in the DOM when they display them. Because this results in your btnAddNewServic being moved out of the form , your postback won't be triggered correctly.

So something like this might do the trick for your JavaScript:

$(function(){
    var $dialog = $('#modelPopup');

    $dialog.dialog({
        autoOpen: false,
        title: "Add New Server",
        width:650,
        height:450,
        modal:true,
        buttons:{
            Close:function(){
                $(this).dialog('close');
            }
        }
    });

    $dialog.parent().appendTo($("form:first"));

    $('#<%=a2.ClientID %>').click(function(){
        $dialog.dialog('open');
    });    
})

What this will do is add the dialog back into the form after it is created, so your postback should now run.

Answer 2

According to the documentation , the buttons should be in an array.

<script type="text/javascript">
    $(function(){
        $('#<%=a2.ClientID %>').click(function(){
            $('#modelPopup').dialog({
                title: "Add New Server",
                width:650,
                height:450,
                modal:true,
                buttons: [
                    {
                        text: "Close",
                        click: function(){
                            $(this).dialog('close');
                        }
                    }
                ]
            });
        });    
    })
</script>