Question

I am currently using jquery ajax to POST data to a php file which uses that data to build and output a jQuery-based gallery.

the "links" that are clicked on to trigger the ajax are:

<li class="portfolioLink" id="identity">identity</li>
<li class="portfolioLink" id="mobile">mobile</li>
<li class="portfolioLink" id="web">web</li>

and a sample of the jQuery ajax is:

$("#identity").click(function(){
    $.ajax({
        url: 'portfolio.php',
        type: "POST",
        data: ({data: 'portfolio/design/identityDesign/*'}),
        success: function(data){
        $("#content_middle").html(data);
        }
    });
    $("#identity").addClass('active');
    $(".portfolioLink:not(#identity)").removeClass('active')
});

(this jquery is basically iterated 2 more times with different data:)

This is working fine, except that the output of portfolio.php (the gallery builder) is loaded into #content_middle as the output’s JavaScript is being processed (so it looks like the gallery is being built live in #content_middle). Seeing it happen will probably make more sense: http://www.frende.me/design.php

What I want to happen is for the gallery to load fully built.

Answer 1

How about you hide the element, add the new html to it and show it again? Like this:

$("#identity").click(function(){     
    $.ajax({         
        url: 'portfolio.php',         
        type: "POST",         
        data: ({data: 'portfolio/design/identityDesign/*'}),         
        success: function(data){ 
            $("#content_middle").hide();       
            $("#content_middle").html(data);         
            $("#content_middle").show();
        }     
    });     
$("#identity").addClass('active');     
$(".portfolioLink:not(#identity)").removeClass('active') });