I face an issue with bootstrap modal, what I'm trying to do is to insert HTML contents inside bootstrap modal using AJAX but when I load the modal nothing is displayed and when I inspect the modal I can see the html contents from AJAX, I figured out that this because the time that is needed to initialize the modal faster than the time that AJAX takes to load the html contents.
Is there a way to make the modal and the AJAX load at the same time or if there is another way to make html contents from ajax display inside a modal body.
The Modal:
<div class="modal hide fade" id="MobileAppPromoDiv">
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success" data-dismiss="modal">Ok</a>
</div>
The Ajax:
$.get("URL",{action:21},function(htmlContent){
$('#MobileAppPromoDiv').find('.modal-body').append(htmlContent);
$('#MobileAppPromoDiv').modal('toggle');
});
You can setTimeout() method to delay the madel initialization for some time to load the HTML content using AJAX.
I found a way to initialize the modal during the AJAX call so both will be initialized at the same time and displayed correctly.
$.get("URL",{action:21},function(htmlContent){
$('#MobileAppPromoDiv').find('.modal-body').append(htmlContent);
$('#MobileAppPromoDiv').modal('show').on('shown', initHtml);
});
And in the initHTML function I placed the initialization for the html page I want for ex. $(document).ready(function() { . . . }
so the html page would be ready in the time of modal initialization
I hope this would be helpful for someone