Placing the results of a form post into a modal in Bootstrap 3

Question

How can I get the results of a form post to display in a modal window in Bootstrap 3?

I have a list of items, and each item has an "edit" button. When an edit button is clicked, I need to post to a form and trigger a modal pop-up with the response. I'm trying to do this using jQuery's .ajax() function, and I'm not sure if it's the best approach:

$(".editForm").submit(function() {
    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "./edit_form.php",
        data        : $(this).serializeArray(),
        success: function() {
            ##  How do I get the response to show up in a Bootstrap 3 modal? ##
        }
    });
    return false;
});

But, I'm getting stuck when it's time to parse the result of the form post. How can I get that to appear in a modal pop-up in Bootstrap 3? The Bootstrap docs talk about triggering a modal from an anchor link with <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>, but how would you trigger it with a form post?

Maybe I'm thinking about it backwards, or over-complicating it. Perhaps I should open the modal first, then submit the .ajax() form post, then update the <div> with the result. I'm used to using Fancybox, and am switching to Bootstrap for all modals.

Thanks!

score 3 · Answer 1 · answered Dec 24 '13 at 03:20

3

Create a modal element

<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

and initialize it on dom ready

//create the modal
$('#modal').modal({
    show: false
});

then show it with the message when you want it like

$('#modal .modal-body').html('Test: '+new Date());
$('#modal').modal('show');

Demo: Fiddle

answered Dec 24 '13 at 03:20

Arun P Johny

384,651
66
527
531

Brilliant! Thanks Arun! Worked perfectly! – bhall Dec 24 '13 at 03:37
Arun... I was just searching for this same thing, however, in my case I do not want to load a div into the modal, but a url (the ajax modal option in bootstrap). Any ideas on that? – user756659 Dec 24 '13 at 05:01
@user756659 instead of `$('#modal .modal-body').html('Test: '+new Date());` try `$('#modal .modal-body').load(your-url);` – Arun P Johny Dec 24 '13 at 05:06
Yeah, that was my first though as well. Trying now. – user756659 Dec 24 '13 at 05:12

score 0 · Answer 2 · answered Dec 24 '13 at 03:14

One way of showing a modal would be to:

1 - echo the HTML from PHP (edit_form.php)

2 - Success function

success: function(response){
    // response = "echoed HTML"
    $('#div_container').html(response); // Stick the bootstrap modal into a container of some kind
    $('#div_container').modal();        // Activate the bootstrap modal manually

    // make sure the container has proper bootstrap content/styling
}

Placing the results of a form post into a modal in Bootstrap 3

2 Answers2

Linked