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.

First I suggest to change $(function() {}); to be $(document().ready(function()}); — andrey.shedko
Did you check in FireBug say, did click event really triggering? — andrey.shedko
@andrey.shedko $(function(){}) is perfectly fine to use and is just a shorter way of putting $(document).ready(function() — mjroodt
It's not always prefectly fine, because this may concern to page lifecycle. — andrey.shedko
@andrey.shedko you're wrong. Read it from jQuery if you don't believe me api.jquery.com/ready — mjroodt

nick_w nick_w · Accepted Answer · 2014-10-03T10:02:05

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.

Button click event not fired in jquery modal popup

2 Answers