ajax response needed to be assigned to a div

Question

I am implementing an image gallery using an Ajax call.

The call passes a value and gets an HTML code as a response. I checked this response and it is correct.

And if I put this code into a static DIV, the gallery works with no problems.

But if I inject the code with AJAX, when I click on an image, it opens in the window as a normal image: the gallery pop-up is not working.

What could be the cause of this problem?

The code is as follows

$.ajax({

    type: 'GET',
    url: 'www.test.com',
    data: {
        type: product,
        use: 'gallery'
    },
    dataType: 'html',
    success: function(data) {
        $("#dv_gallery").append(data);
    }

});

the following is the HTML code in the page

 <div class="portfolio-adaptive adaptive-three" id="dv_gallery"></div>

Answer 1

Unless the gallery (which you do not specify) is completely CSS based, you almost certainly need to call some sort of initialization code.

Usually this is taken care of by the gallery code when it loads:

// This "animates" all gallery DIVs **THAT EXIST NOW**
<script src="gallery.js"></script>

Check the gallery APIs. Say there is a call $.gallery() to gallerize a selector. Then you change your code to read

success: function(data) {

    $("#dv_gallery").append(data);

    // The $('#dv_gallery') below includes also the newly appended data
    $("#dv_gallery")
        .not(".already-initialized")
        .addClass("already-initialized")
        .gallery();
}

Example with a custom gallery based on .click()

In this case you just need to intercept the click on the (say) A tags through delegation. In this hypothesis you are now doing something like

$('#dv_gallery a').on('click', function(event) {
   ...
});

and this works for those A's that exist statically. To make it work with dynamically added A tags, you should do

$('#dv_gallery').on('click', 'a', function(event) {
   ...
});

Notice that now you bind the click event to #dv_gallery, which exists, and tell it to act as a delegate for newly added 'a' tags by supplying an extra parameter to .on().

Example with FancyBox:

// Select gallery container
$("#dv_gallery")
    // Images are embedded in A tags in Fancybox
    .find('a')
    // But we do not want to fancybox already gallerified images
    .not(".already-initialized")
    // And we want to mark as gallerified those we process now
    .addClass("already-initialized")
    // Everything is ready -- build these new A's into fancyboxes
    .fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });

If the API is intelligent enough not to re-gallerify an already-enriched element, then you don't need to add semaphore classes but can simply do

$("#dv_gallery").append(data);
$("#dv_gallery").gallery();

Or if it is not, but you know that it adds a given class, you can directly use that one as a semaphore:

    $("#dv_gallery")
        .not(".gallery-class")
        .gallery();

Diagnosing not-so-apparent problems with returned HTML

jQuery ought to correctly append HTML; if it does not, check the Content-Type of the returned document, and try with

   $("#dv_gallery").append($(data));

or try replacing all the contents of the gallery:

   $("#dv_gallery").html(data);

In both cases you will need to reinvoke any required gallery initialization code. These last two options are only diagnostic, however - if they work, it tells you that something's fishy in the returned object.

Answer 2

Have u tried using the html() function of jquery?

$("#dv_gallery").html(data);