CODEWITHSUNDEEP
ajaxjquerytwitter-bootstrapmodal-dialog
doitlikejustin
doitlikejustin

Reputation: 6363

Returning data from dynamic (AJAX) loaded Bootstrap Modal

I am using Bootstrap modal's in a Codeigniter application as a popup WYSIWYG text-editor. Everything in regards to loading content, and the modal, works fine. I can even save the content when the modal is open via AJAX.

But what I am trying to accomplish is when I hit the "Save" button in my modal... I want to return the value — $('#wysiwyg').val() — to the page that opened the modal.

Link triggering the modal

<a href="/ajax/modals/wysiwyg" class="btn ajax-modal">Write Text</a>

JavaScript loading modal - Modified source from https://gist.github.com/drewjoh/1688900

$('.ajax-modal').click(function(e) {

    e.preventDefault();

    var modal = $('#ajax-modal');
    var url = $(this).attr('href');

    if(url.indexOf('#') == 0) {
        $(url).modal('open');
    } else {
        $.get(url, function(data) {
            modal.html(data);
            modal.modal();
        }).success(function() { 
            /* boom. loaded. */ 
        });
    }
});

HTML modal wrapper

<div id="ajax-modal" class="modal hide fade" data-backdrop="static" data-keyboard="false" tabindex="-1"></div>

HTML modal body/contents

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Text Editor</h3>
</div>
<div class="modal-body">

    <textarea class="input-block-level" id="wysiwyg" rows="9">Write something...</textarea>

</div>
<div class="modal-footer">
    <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button id="submit-modal" class="btn btn-success">Save</button>
</div>

Thanks in advance.

Upvotes: 1

Views: 9217

Answers (3)

codebyren
codebyren

Reputation: 690

You could try something like this:

var modal = $('#ajax-modal');

// Filter clicks within the modal to those on the save button (#submit-modal)
modal.on('click', '#submit-modal', function(e) {

    // Find the wysiwyg within the modal        
    var wysiwyg = $('#wysiwyg', modal);

    // Now do what you want with wysiwyg.val();
    if (wysiwyg.length) $('#my_info_div').html(wysiwyg.val());
});

Upvotes: 2

David Knipe
David Knipe

Reputation: 3444

When you wrote if(url.indexOf('#') == 0), did you mean if(url.indexOf('#') == -1)? indexOf('#') returns -1 if # does not appear in the string.

Upvotes: 0

BGZ
BGZ

Reputation: 116

I think I get what you are asking for...There are a few ways you can do this. If you want to create a more separated approach you could use a pub/sub framework like Amplify. The simplest approach would be to create a reference to the element you want to populate prior to creating the click event. Like so:

var controlToPopulate = $("#controlToPopulateId");
$('.ajax-modal').click(function(e) {

e.preventDefault();

var modal = $('#ajax-modal');
var url = $(this).attr('href');

if(url.indexOf('#') == 0) {
    $(url).modal('open');
} else {
    $.get(url, function(data) {
        modal.html(data);
        modal.modal();
    }).success(function() { 
        /* boom. loaded. */
        modal.find('#submit-modal').click(function() {
           controlToPopulate.val(modal.find('#wysiwyg').val());
       });
    });
}

});

Upvotes: 2

Related Questions