locked
Bootstrap modal reopen if not valid RRS feed

  • Question

  • User714838281 posted

    Hi.

    in the header i have this

        <script type="text/javascript">
            function ShowPopup() {
                $("#myModal").click();
            }
        </script>

    I have this modal

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
    
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some fields to enter and to validate on save button.</p>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="Button3" Text="Save" runat="server" class="btn btn-save" OnClick="btn_check_and_save"/>
                    <asp:Button ID="Button2" Text="Close" runat="server" class="btn btn-modal" data-dismiss="modal" />
                </div>
            </div>
    
        </div>
    </div>

    with this

            protected void btn_check_and_save(object sender, EventArgs e)
            {
                if (not ok)
                {
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true); // i need to reopen the modal..... } }

    how could i reopen the modal if something is wrong in the validation fields?

    I see the modal background but the modal don't appear.

    Thank's in davance

    Tuesday, April 12, 2016 3:22 PM

Answers

  • User-2060830109 posted

    Ideally you should perform your validation client side and prevent the request from being sent to the server unless everything passes.

    To show a boostrap modal programmatically, use modal("show") instead of click().

    <script type="text/javascript">
        function ShowPopup() {
    $("#myModal").modal("show"); } </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 12, 2016 7:23 PM
  • User61956409 posted

    Hi marcobranco,

    Firstly, as jbowen014 said, you could use .modal("show") method to open the modal.

    http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

    Secondly, you could also specify a trigger button for modal, then you could trigger click event to open the modal.

    function ShowPopup() {
        $("#mybtn").trigger("click");
    }
    
    <div>
        <input id="mybtn" type="button" value="myBtn" data-toggle="modal" data-target="#myModal" style="display: none;" />
        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
    
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some fields to enter and to validate on save button.</p>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="Button3" Text="Save" runat="server" class="btn btn-save" OnClick="btn_check_and_save" />
                        <asp:Button ID="Button2" Text="Close" runat="server" class="btn btn-modal" data-dismiss="modal" />
                    </div>
                </div>
    
            </div>
        </div>
    </div>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 3:27 AM

All replies

  • User-2060830109 posted

    Ideally you should perform your validation client side and prevent the request from being sent to the server unless everything passes.

    To show a boostrap modal programmatically, use modal("show") instead of click().

    <script type="text/javascript">
        function ShowPopup() {
    $("#myModal").modal("show"); } </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 12, 2016 7:23 PM
  • User61956409 posted

    Hi marcobranco,

    Firstly, as jbowen014 said, you could use .modal("show") method to open the modal.

    http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

    Secondly, you could also specify a trigger button for modal, then you could trigger click event to open the modal.

    function ShowPopup() {
        $("#mybtn").trigger("click");
    }
    
    <div>
        <input id="mybtn" type="button" value="myBtn" data-toggle="modal" data-target="#myModal" style="display: none;" />
        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
    
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some fields to enter and to validate on save button.</p>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="Button3" Text="Save" runat="server" class="btn btn-save" OnClick="btn_check_and_save" />
                        <asp:Button ID="Button2" Text="Close" runat="server" class="btn btn-modal" data-dismiss="modal" />
                    </div>
                </div>
    
            </div>
        </div>
    </div>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 13, 2016 3:27 AM