CODEWITHSUNDEEP
javascriptasp.net
Lyubomir Ivanov Valchev
Lyubomir Ivanov Valchev

Reputation: 773

Button inside modal dialog is not working

I have a grid with view buttons. When you click the view button a modal dialog opens and displays all the information in a form.

I also have a button (buttonID:Button1) inside my modal dialog. The problem is that when I click on the button inside the dialog nothing happens.

This is what I have so far:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddUser.aspx.cs" Inherits="AddUser" %>

  <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
    <link href ="http://code.jquery.com/ui/1.11.4/themes/ui-Lightnes/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script  src="js/index.js"></script>

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'/>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'/>
    <link rel="stylesheet" href="css/style.css"/>

    <script>
        function popup(idn, un, ps, em) {
            $("#userid").text(idn);
            $("#usern").text(un);
            $("#pwd").text(ps);
            $("#eml").text(em);
            $("#popupdiv").dialog({
                closeOnEscape: false,
                position: 'fixed',
                width: 1080,
                height: 500,
                autoOpen: true,
                modal: true,
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                },
                buttons: {
                    Close: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

    </script>

</head>
<body>

    <form id="form1" runat="server" >

            <asp:Button ID="btnAddUser" runat="server" Text="Add New User" OnClick="btnAddUser_Click" />
            <asp:GridView AutoGenerateColumns="false" ID="gvUsers" runat="server"  PagerStyle-CssClass="pager"
                HeaderStyle-CssClass="header" RowStyle-CssClass="rows"         
                CssClass="mydatagrid" AllowPaging="True" 
                ShowHeaderWhenEmpty="true"
                BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                <SortedAscendingHeaderStyle BackColor="#007DBB" />
                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                <SortedDescendingHeaderStyle BackColor="#00547E" />
                <Columns>
                    <asp:BoundField DataField="UserID" HeaderText="UserID" />
                     <asp:BoundField DataField="Username" HeaderText="Username" />
                     <asp:BoundField DataField="Password" HeaderText="Password" />
                    <asp:BoundField DataField="Email" HeaderText="Email" />

                    <asp:TemplateField>
                        <ItemTemplate>
                            <img src="images/edit.png" id="imgBtn" style="width:20px; height:20px" onclick='popup("<%# Eval("UserID") %>", "<%# Eval("Username") %>","<%# Eval("Password") %>","<%# Eval("Email") %>")'></>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

        <div class="container"> 
            <div id="popupdiv" style=" margin: auto;
    width: 100%;
    padding: 10px;
     background-color: #333333;
    background-color: #333333; ">
                <div class="well form-horizontal"   id="contact_form">
<fieldset>
    <div class="form-group">
  <label class="col-md-4 control-label">Username</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <textarea id="userid" runat="server" style="width:250px; height:35px; resize: none" name="first_name"  class="form-control"></textarea>
    </div>
  </div>
</div>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label" >Password</label> 
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
   <textarea type="text" id="usern"  runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>
    </div>
  </div>
</div>

<!-- Text input-->
       <div class="form-group">
  <label class="col-md-4 control-label">E-Mail</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
               <textarea type="text" id="pwd"  runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>
    </div>
  </div>
</div>

<!-- Select Basic -->

<div class="form-group"> 
  <label class="col-md-4 control-label">User Role</label>
    <div class="col-md-4 selectContainer">
    <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
            <textarea type="text" id="eml"  runat="server" style="width:250px; height:35px; resize: none" class="form-control" ></textarea>

  </div>
</div>
</div>
<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">

    <asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server" Text="Submit" OnClick="Button1_Click1"/>
  </div>
</div>
</fieldset>



        </div>
                </div>
</div>

    </form>

</body>
</html>

Code for my button functionality but it does not work

protected void Button1_Click1(object sender, EventArgs e)
{
    Response.Redirect("~/AddNewUser.aspx");
}

Upvotes: 2

Views: 4012

Answers (2)

user1773603
user1773603

Reputation:

Try to use UseSubmitBehavior="false" in button:

<asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server"
    Text="Submit" UseSubmitBehavior="false" OnClick="Button1_Click1"/>

Upvotes: 3

hardkoded
hardkoded

Reputation: 21705

The most likely problem is that the modal is being created outside the form, so if the button is created outside the form it won't work.

Most modals have a way to set where the modal will be created. For instance, jquery-ui has the appendTo property. So, if you set appendTo: 'FORM' it will create the modal inside the form and your button will work as expected.

Upvotes: 0

Related Questions