CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrap
Ya Basha
Ya Basha

Reputation: 1952

Fill Bootstrap Modal Body With AJAX

I want to put html contents I get from AJAX inside Modal Body, I managed to get the html correctly through AJAX and when I inspect the modal body I see the html are inserted but I can't see anything in the html body, I tried to play with the CSS for the body but nothing worked.

AJAX Code:

$.get("{{[byt_app_root]}}/control/byt_general_manager.tcl",{action:21},function(htmlContent){
$('body').append('\
<div class="modal hide fade" id="MobileAppPromoDiv">\
<div class="modal-header">\
<a class="close" data-dismiss="modal">×</a>\
</div>\
<div class="modal-body">\
'+htmlContent+'\
</div>\
</div>');
});

When I want to access the modal through JS: $("MobileAppPromoDiv").modal("toggle");

The problem is that the modal is empty.

Please advice,

Upvotes: 0

Views: 4549

Answers (2)

Anchor
Anchor

Reputation: 1371

Use the $('.modal-body') selector.

If you're using rails, something like

$('.modal-body').html('<%= escape_javascript( ... ) %>');

should work

Upvotes: 0

sangram parmar
sangram parmar

Reputation: 8736

try this

<div class="modal hide fade" id="MobileAppPromoDiv">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>
<script type="text/javascript">
    $.get("{{[byt_app_root]}}/control/byt_general_manager.tcl", { action: 21 }, function (htmlContent) {
        $('#MobileAppPromoDiv').find('.modal-body').append(htmlContent);
        $('#MobileAppPromoDiv').modal('show');
    });
</script>

Upvotes: 2

Related Questions