Bootstrap modal with OnClick button not working

Question

Good day!

I have a GridView in Asp.Net wherein if the user click an <a> tag, it will launch a modal containing the value of the selected Grid Row. The code uses a javascript command to retrieve the data then distribute it to the designated modal.

The thing is, the filename is passed to the modal textbox which is hidden. Now inside the modal is a OnClick command button wherein if clicked, should trigger the command.

I have tried it and it is functioning well however when I add the other modal(mainly for adding purposes), the command on the button doesn't work anymore.If I try to remove the other modal, the command now works. I am getting confused as to why this happens?

GridView Button

<a data-id="<%#Eval("Id") %>"  title="Delete User" class="open-DeleteDialog btn btn-danger" data-toggle="modal" data-target="#DeleteUser">Delete</a>

Script

<script type="text/javascript">
    $(function () {
        $(".open-DeleteDialog").click(function () {
            document.getElementById("<%=IdVal.ClientID%>").value = $(this).data('id');
            $("#DeleteUser").modal("show");

        });
    });
</script>

First Modal

   <div class="modal fade" id="DeleteUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
   <div class="modal-content">

       <!-- Modal Head -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle1">Modal title</h5>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
      <div class="form-horizontal">
         <h2>Are you sure you want to delete this user?</h2>
         <div class="form-group">
            <div class="col-md-10">
                <asp:TextBox runat="server" ID="IdVal" CssClass="form-control" />
            </div>
        </div>
      </div>      
      </div><!--End tag of Modal Body -->

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <asp:Button runat="server" OnClick="Delete1User_Click" onServerClick="Delete1User_Click" Text="Delete User" CssClass="btn btn-Success" />
      </div>

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

Other Modal - one that conflicts with the needed modal

    <!-- Add Modal -->
   <div class="modal fade" id="AddUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
   <div class="modal-content">

       <!-- Modal Head -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
      Some code here
    </div>      
    </div><!--End tag of Modal Body -->

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <asp:Button runat="server" OnClick="CreateUser_Click" Text="Add User" CssClass="btn btn-Success" />
      </div>


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

Code behind of first modal

protected void DeleteUser_Click(object sender, EventArgs e)
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand("sp_deleteuser", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("UserId", bookId1.Text);
            cmd.ExecuteNonQuery();
            cmd.Dispose();
            conn.Close();

            Response.Redirect(Request.RawUrl);
        }

Code behind of conflicting modal

protected void CreateUser_Click(object sender, EventArgs e)
{
 Some code here
}

Why is there a conflict happening in the modal wherein my Delete button command doesn't work yet still clickable? Aside from that, even if I add a bootstrap class to my button, it doesn't work.

Thanks in advance!

Answer 1

Ok. I was able to solve the problem with the help of the answers from here . Since I have another modal with the a ControlToValidate in it, what happens is that the other modal values are validated and since it has no value inside, nothings happens. I was able to bypass this by adding this code: CausesValidation="False"

<asp:Button Id="btnDeleteUser" runat="server" Text="Delete User" OnClick="DeleteUser_Click"  CssClass="btn btn-Success" CausesValidation="False" />