show bootstrap modal after content is loaded

Question

I'm using a Bootstrap 3 modal in which I load some data from a getJson function. Since the data inside the modal doesn't load equally fast I want to show a loading image/text. When all data is loaded then show/open the modal. I found this Thread which was quit usefull but I don't know how to place that inside my code. Can anybody help me with that?

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....


  });   
}

Answer 1

The Bootstrap model object provides a manual show method. Let's assume it has the id myModal. Assuming you've set it up correctly and it's ready to be sprung, this is how you would display it once your data was 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 setting up your modal and other methods provided by the modal plugin, refer to the Bootstrap docs.