Load JSON data into a Bootstrap modal

Question

I want to load a JSON file that creates a list inside a Bootstrap Modal. I have it set where if you click on a person\'s picture, the modal pops up.

Answer 1

Method 1: using Ajax

Every time a user clicks an image, you get the id from the clicked image and then you send an Ajax request to server in order to get the JSON object.

HTML

    

    
        
        
Kenneth Atkins
        
[Description here]
         
    

JavaScript

(function($) {
    var infoModal = $('#myModal');
    $('.thumbnail').on('click', function(){
        $.ajax({ 
          type: "GET", 
          url: 'getJson.php?id='+$(this).data('id'),
          dataType: 'json',
          success: function(data){ 
            htmlData = '
title: '+data.first_name+'
age: '+data.age+'
';
            infoModal.find('.modal-body').html(htmlData);
            infoModal.modal('show');
          }
        });

        return false;
    });
})(jQuery);

Method 2: using hidden div

No need to any Ajax request, but you need to create a hidden div that contain all the information you want to display in the modal

HTML

    

    
        
        
Kenneth Atkins
        
[Description here]
        

            

                
title: Atkins Kenneth
                
Age: 16
            
        
         
    

JavaScript

(function($) {
    var infoModal = $('#myModal');
    $('.thumbnail').on('click', function(){
        htmlData = $(this).find('.profile').html();
        infoModal.find('.modal-body').html(htmlData);
        infoModal.modal('show');
        return false;
    });
})(jQuery);