CODEWITHSUNDEEP
javascriptjqueryasp.nettwitter-bootstrapmodal-dialog
eddie_cat
eddie_cat

Reputation: 2583

How can I stop my modal dialog from closing on button click?

I have this button in a bootstrap modal dialog:

<button id="btnSelectAll" style="float:left">Select All</button>

The click event looks like this, all it is supposed to do is mark a bunch of checkboxes as checked. 

$(document).on('click', '#btnSelectAll', function ()
{
    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);

});

Here is the markup for the modal itself (with specifics removed as it's a bit long and basically just a bunch of checkboxes with a few buttons at the end):

   <asp:Panel class="modal" ID="MyPanel" runat="server">
        <div class="modal-dialog modal-lg" style="width:30%">
            <div class="modal-content">
                <div class="modal-header">
                    <asp:Label ID="Header" runat="server" Text="Header" />
                </div>
                <div class="modal-body">
                    <table>
                        <tr>
                            <td style="width: 20px;" />
                            <td>
                                <asp:Label ID="Label" runat="server" Text="Stuff:" />
                            </td>
                           <tr>
                    </table>
               </div>
          </div>
     </div>
</asp:Panel>

The click event code is being hit as I see it in the debugger, but the modal dialog always closes immediately when I click the button. I can't seem to find anything online to explain why, Googling just gives me a bunch of "how do I close a modal on button click" type questions. I want to know how to not close it.

Upvotes: 2

Views: 9546

Answers (1)

Christos
Christos

Reputation: 53958

You could just try e.preventDefault. From the jQuery documentation we have this

Description: If this method is called, the default action of the event will not be triggered.

So, if you change your code to the following:

$(document).on('click', '#btnSelectAll', function (event)
{
    event.preventDefault();
    var $modal = $('#MyPanel');
    $modal.find('#aCheckBox').prop('checked', true);
});

your problem will be solved.

Upvotes: 5

Related Questions