5

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


  });   
}
Community
  • 1
  • 1
Meules
  • 1,349
  • 4
  • 24
  • 71

1 Answers1

4

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.

klenwell
  • 6,978
  • 4
  • 45
  • 84
  • Ok thx... My modal is showing on a button click like so: `
    `. Should I remove that and open it via jQuery?? It looks like the modal pops up even when the data isn't fully loaded.     – Meules Aug 15 '14 at 11:50
  • You can configure it so that it is initially hidden by adding `data-show="false"`. Then you can open it as demonstrated above. See the Options section of the docs for more info. – klenwell Aug 15 '14 at 13:24
  • thx a ton. Then this is exactly what I'm searching for. I've read the docs before but wasn't sure what the right approach would be! – Meules Aug 15 '14 at 14:42
  • I understand. I always experience a moment or two of cognitive dissonance when integrating Bootstrap with jQuery. Glad I could help. – klenwell Aug 15 '14 at 15:14