CODEWITHSUNDEEP
javascriptjqueryajaxweb-applicationsmodal-dialog
Leroy Kayanda
Leroy Kayanda

Reputation: 53

How can I add content to a modal like divs loaded via ajax

I have a page where I have a gallery of thumbnails. On clicking on one, I'd like to display a bigger image followed by more information about the picture in a modal-like manner, as has been done here Click on the image to see what I mean. Content is to be loaded via ajax. I would also like to preload the larger images such that when as a user clicks on a thumbnail they will be able to view the larger image as they wait for the additional information to load. I'm new to modals, so how can I be able to achieve this.

Upvotes: 0

Views: 1143

Answers (1)

bleepzter
bleepzter

Reputation: 10005

The loading content dynamically via ajax is simply appending to the dom (or the div/container that is displaying the modal dialog). By appending to it when the ajax request arrives you will in effect refresh the look of the modal dialog to reflect the new content.

I don't think you will find a modal dialog that "supports ajax". Rather you are looking for one that fires a event on before rendering or as the dialog is opening so that you can create your ajax call then. jQuery UI modal dialog supports this feature. 

$( ".selector" ).dialog({                          //open the dialog
      open: function( event, ui ) {                //fire function before rendering
          $.ajax({                                 //make your ajax call to get content
               url: "test.html",                   
               type: "POST",
               data: "name=value&name=value",
               success: function(html){
                    $(this).append(html);          //append your content to the dialog
               }
          });
      }
  });

Upvotes: 1

Related Questions