Show bootstrap modal after loading content
I am using a Bootstrap 3 mod in which I load some data from the getJson function. Since the data inside the modal file does not load equally quickly, I want to show the image / text being loaded. When all data is loaded then show / open the modal. I found this thread to be useful, but I don't know how to place it inside my code. Can anyone help me with this?
My function
function myfunction(url){
$('.products-loader').show(); //show the loading image and then??
$.getJSON(url, function (data){
var product = data.product;
var image = 'http://www.webshop.com/i/' + image_id_convert(product.image) + '/380x380x2/image.jpg';
$('.wqs-title').html('<a href="'+ product.url + '">' + product.title + '</a>');
$('.wqs-description').html(product.description);
$('.wqs-images').html('<img src="' + image + '"/>');
//etc....
});
}
source to share
The Bootstrap model object provides a manual display method. Let's assume it has an id myModal
. Assuming you've configured it correctly and it's ready to go, this is how you can display it as soon as your data is ready:
function myfunction(url) {
// Show progress bar
$('.products-loader').show();
// Make AJAX request to load data
$.getJSON(url, function (data) {
// On success show modal
$('#myModal').modal('show');
// Do other stuff
});
}
For information on customizing your modals and other methods provided by the modular plugin, see the Download Docs .
source to share