CODEWITHSUNDEEP
javascriptc#jqueryasp.net
dinesh.k
dinesh.k

Reputation: 197

Button click event not fired in jquery modal popup

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.

Upvotes: 1

Views: 3632

Answers (2)

nick_w
nick_w

Reputation: 14938

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.

Upvotes: 3

Jerodev
Jerodev

Reputation: 33186

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>

Upvotes: 1

Related Questions