locked
Button Event Only Fires Once (Twitter Bootstrap Modal Window) RRS feed

  • Question

  • User-1099677575 posted

    I have an application that is utilizing the Twitter Bootstrap modal window.  The modal window is displaying another page (modal_cancel.aspx).

    Modal_cancel.aspx contains a form that needs to be validated before it is submitted (Mainly a date and time field).  I have a div element (divResults) that is being updated to show error messages.  divResults is inside an UpdatePanel. 

    Right now, the modal window launches, the user fills out the form and submits the form (btnCancel).  If the date is not valid, an error message shows within divResults.  The user fixes the date, but maybe leaves the time blank.  When the user presses btnCancel again, nothing happens.  It should go back and run the sub routine (CancelActive) to validate, but it doesn't.  I have used Breakpoints in VS 2015 for Web to see what is happening on that second click, but it does not hit the breakpoints after the first click.

    The modal is getting kicked off from an html button on the "main" page.  I have part of the html code for the "main" page below as well.

    Thanks in advance.

    Code: modal_cancel.aspx

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="modal_cancel.aspx.vb" Inherits="solutionVB.modal_cancel"  %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>    
        <!-- DESTROYS MODAL SO CONTENT CAN UPDATE -->
        <script>
            $('#myModal').on('hidden.bs.modal', function ()
            {
                $(this).removeData('bs.modal');
                location.reload();
            });
            </script>
    
        <form id="frmModal" runat="server">
          <asp:ScriptManager ID="ScriptManager_Modal" runat="server" EnablePartialRendering="true">
               </asp:ScriptManager>
          
            <div class="modal-header text-danger">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title" id="myModalLabel">Cancel</h3>
                        </div>
                            
                        <div class="modal-body">
                            
                            <div id="divInstructions" runat="server">
                                If you are sure this can be cancelled, please complete below:<hr />
                            </div>
    
                            <asp:UpdatePanel ID="theModal" UpdateMode="Always"  runat="server">
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click"/>
                                </Triggers>
                            <ContentTemplate>
                            <div id="divResults" runat="server"></div>
                                </ContentTemplate>
                        </asp:UpdatePanel>
                          
                              <div id="divForm" runat="server">
                                  <div class="well">
                                <div class="form-group">
                                    <label>FSS#</label><br />
                                    <asp:TextBox ID="txtFSS" class="form-control" runat="server" width="75px" ReadOnly="true"></asp:TextBox>
                                </div>    
                                <div class="form-group">
                                        <label>Cancel By</label><br />
                                        <asp:DropDownList ID="drpCancelled" class="form-control" runat="server" Width="73px"></asp:DropDownList>
                                    </div>
                                    <div class="form-group">
                                        <label>Date</label><br />
                                        <asp:TextBox ID="txtCancelDate" class="form-control date" runat="server" width="110px" placeholder="mm-dd-yyyy"></asp:TextBox>
                                    </div>
                                    <div class="form-group">
                                        <label>Time</label><br />
                                        <asp:TextBox ID="txtCancelTime" class="form-control time" runat="server" width="65px" placeholder="00:00"></asp:TextBox>
                                    </div>
                                    <div class="form-group" style="vertical-align:top;">
                                        <label>Group Notified</label><br />
                                        <asp:DropDownList ID="drpNotified" class="form-control" runat="server" Width="155px"></asp:DropDownList>
                                    </div>
                                      </div>
                                  </div>
                        </div>
                                
                        <div class="modal-footer">
                            <asp:Button ID="btnClose" runat="server" CssClass="btn btn-default" Text="Close" data-dismiss="modal"/>
                            <asp:Button ID="btnCancel" runat="server" class="btn btn-danger" Text="Cancel" OnClick="CancelActive" CausesValidation="true"/>
                        </div>
            </form>
    </body>
    </html>
    

    Code-behind: modal_cancel.aspx.vb

    Public Class modal_cancel
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            
        End Sub
    
        
        Sub CancelActive(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancel.Click
            Dim cRecode As New cData
            Dim vDate As DateTime = Nothing
            Dim sDate As String = Nothing
            Dim vTest As Boolean = True
    
            If IsDate(txtCancelDate.Text) = False Then
                divResults.InnerHtml = "<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-calendar' aria-hidden='true'></span>&nbsp;<strong>That's Not Going To Work...</strong> The Date you entered is not valid.</div>"
    ElseIf IsDate(txtCancelTime.Text) = False Then divResults.InnerHtml = "<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-time' aria-hidden='true'></span>&nbsp;<strong>That's Not Going To Work...</strong> The Time you entered is not valid.</div>"
    ElseIf cRecode.CheckDate(txtFSS.Text, vDate) = False Then divResults.InnerHtml = "<div class='alert alert-danger' role='alert'><strong>Not So Fast!</strong><br />The Cancelled Date/Time cannot be earlier then the 'Issued' Date/Time." divResults.Visible = True
    Else vDate = Convert.ToDateTime(txtCancelDate.Text) sDate = vDate.ToString("yyyy-MM-dd") vDate = Convert.ToDateTime(sDate + " " + txtCancelTime.Text) If cRecode.Cancel(txtFSS.Text, drpCancelled.SelectedItem.Value, vDate, drpNotified.SelectedItem.Value) = True Then divInstructions.Visible = False divForm.Visible = False btnCancel.Visible = False divResults.InnerHtml = "<div class='alert alert-success' role='alert'><b>Well Done!</b> The alert has been cancelled!</div>" divResults.Visible = True Else divInstructions.Visible = False divForm.Visible = False btnCancel.Visible = False divResults.InnerHtml = "<div class='alert alert-danger' role='alert'><b>Oops, something isn't right!</b> Please close and try again.</div>" divResults.Visible = True End If End If End Sub End Class

    Modal Code: main.aspx

    <!-- Modal -->
            <div class="modal fade" id="lgModal" tabindex="-1" role="dialog" aria-labelledby="lgModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        
                    </div>
                </div>
            </div>
            <!-- Modal End -->

     

    Code-behind that creates button to call modal window:
    ( dr("nFSS") is a value from my db that I am passing to the modal_cancel.aspx.)

    drHolder += <a data-toggle='modal' href='modal_cancel.aspx?fs=" + dr("nFSS") + "' data-target='#myModal' class='btn btn-danger btn-xs'>Cancel</a>

     

    Tuesday, October 13, 2015 9:59 AM

Answers

  • User61956409 posted

    Hi jpm602,

    Welcome to ASP.NET forum.

    The button click event is working in following sample. It will be fired once I click the button.

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
    
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-danger">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title" id="myModalLabel">Cancel</h3>
                </div>
    
                <div class="modal-body">
    
                    <div id="divInstructions" runat="server">
                        If you are sure this can be cancelled, please complete below:<hr />
                    </div>
    
                    <asp:UpdatePanel ID="theModal" UpdateMode="Always" runat="server">
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
                        </Triggers>
                        <ContentTemplate>
                            <div id="divResults" runat="server">
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
    
                    <div id="divForm" runat="server">
                        <div class="well">
                            <div class="form-group">
                                <label>FSS#</label><br />
                                <asp:TextBox ID="txtFSS" class="form-control" runat="server" Width="75px" ReadOnly="true"></asp:TextBox>
                            </div>
                            <div class="form-group">
                                <label>Cancel By</label><br />
                                <asp:DropDownList ID="drpCancelled" class="form-control" runat="server" Width="73px"></asp:DropDownList>
                            </div>
                            <div class="form-group">
                                <label>Date</label><br />
                                <asp:TextBox ID="txtCancelDate" class="form-control date" runat="server" Width="110px" placeholder="mm-dd-yyyy"></asp:TextBox>
                            </div>
                            <div class="form-group">
                                <label>Time</label><br />
                                <asp:TextBox ID="txtCancelTime" class="form-control time" runat="server" Width="65px" placeholder="00:00"></asp:TextBox>
                            </div>
                            <div class="form-group" style="vertical-align: top;">
                                <label>Group Notified</label><br />
                                <asp:DropDownList ID="drpNotified" class="form-control" runat="server" Width="155px"></asp:DropDownList>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="modal-footer">
                    <asp:Button ID="btnClose" runat="server" CssClass="btn btn-default" Text="Close" data-dismiss="modal" />
                    <asp:Button ID="btnCancel" runat="server" class="btn btn-danger" Text="Cancel" OnClick="CancelActive" CausesValidation="true" />
                </div>
            </div>
        </div>
    </div> 
    
    protected void CancelActive(object sender, EventArgs e)
    {
        if (txtCancelDate.Text == "")
        {
            divResults.InnerHtml = "<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-calendar' aria-hidden='true'></span>&nbsp;<strong>That's Not Going To Work...</strong> The Date you entered is not valid.</div>";
        }
        else if (txtCancelTime.Text == "")
        {
            divResults.InnerHtml = "<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-time' aria-hidden='true'></span>&nbsp;<strong>That's Not Going To Work...</strong> The Time you entered is not valid.</div>";
        }
    }
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 14, 2015 3:06 AM