Question

59

How do you specify the primary and secondary actions for a Bootstrap modal window?

rated 0 times [ 65] [ 6] / answers: 1 / hits: 19129 / 13 Years ago, fri, november 18, 2011, 12:00:00

I'm using Twitter's Bootstrap modal functionality. When someone clicks submit on my form, I'm testing to see if they have checked any of the available options:

$('form').submit(function(event) {

        var $target = $('.column').find(':checkbox');                                                        

        if( !$target.is(':checked') ){ // if none of the sub-options are checked

            event.preventDefault();

            $('#my-modal').modal({

                show: 'true',

                backdrop: 'true',

                keyboard: 'true'

            });

        }                                       

    });

... and showing the modal window if they haven't. I'd then like the 'primary' button on the modal to continue with the form submit, and the secondary button to simply close the modal window.

I'm sure this should be fairly trivial to accomplish, but my current knowledge of jQuery is only at the copy/paste level, and the documentation doesn't give an example of how to do this.

I've set up a jsFiddle of what I have here - thanks.

EDIT - I've added below some code (it feels a bit hacky) that will close the modal window when the secondary button is clicked. Still not sure how to give the form the go ahead when the primary button is clicked:

$('#my-modal .secondary').click(function() {

    $('#my-modal').modal({

        show: 'false'

    });

});

The question now comes down to: 'is there a simple way to tell the form okay, carry on once the primary button is clicked?'

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cherish

Add To Favorites

Follow

Total Points: 734

Total Questions: 94

Total Answers: 86

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

cherish questions

1 Page data from page-data.json for the failed page /

Tue, Jan 25, 22, 00:00, 2 Years ago

1 how to make button with close icon in right corner using react js

Fri, Apr 23, 21, 00:00, 3 Years ago

1 Axios get with params

Mon, Oct 5, 20, 00:00, 4 Years ago

1 How to access a property or a method of alpine.js parent component from a child component?

Sat, Jun 27, 20, 00:00, 4 Years ago

1 Unable to play an audio file in Vue web app

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 13 Years ago xiomara · Accepted Answer

Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!

Here's a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/

And here is the code:

HTML File

<form>

<ul class=inputs-list>

    <li>

      <label>

        <input type=checkbox name=optionsCheckboxes value=option1 />

        <span>Option 1</span>

      </label>

    </li>

    <li>

      <label>

        <input type=checkbox name=optionsCheckboxes value=option2 />

        <span>Option 2</span>

      </label>

    </li>

</ul>

<div class=actions>

    <a href=# class=save-button btn large primary>Save changes &raquo;</a>



    <!-- Hide the real submit button /-->

    <input type=submit class=hidden>

</div>

</form>



<div id=my-modal class=modal hide fade>

    <div class=modal-header>

        <a href=# class=close>&times;</a>

        <h3>Are you sure?</h3>

    </div>

    <div class=modal-body>

        <p>You haven&rsquo;t selected any options.</p>

    </div>

    <div class=modal-footer>

        <a href=# class=okay-button btn primary>Okay &raquo;</a>

        <a href=# class=go-back-button btn secondary>Go back</a>

    </div>

</div> <!-- /modal -->

JS File

$(document).ready(function() {



    // Verify if checkboxes were checked.

    // If they weren't, show a modal

    $('a.save-button').click(function() {

        if ($(input:checked).length === 0) {



            $('#my-modal').modal({

                show: 'true',

                backdrop: 'true',

                keyboard: 'true'

            });

        } else {

            $('form').submit(); 

        }



        // prevent click jump

        return false;

    });



    // Let's attach a listener on form submission

    $('form').submit(function() {

        alert('We submitted the form!');

    });



    // Hide modal if Go back is pressed

    $('#my-modal .go-back-button').click(function() {

        $('#my-modal').modal('hide');

        alert('We went back to the form');

    });



    // Hide modal if Okay is pressed

    $('#my-modal .okay-button').click(function() {

        $('#my-modal').modal('hide');

        $('form').submit();

    });



});

I added a little CSS as well:

ul.inputs-list li {

    margin-left: 10px;

}

.hidden {

    display: none   

}