Display data requested by an ajax.load() call once complete, not during the call.

Question

My jQuery code (using ajax) request's data from a local php script (pgiproxy.php). This script grabs the desired webpage. I am using the following php function for this:

function grabPage($pageURL) {
  $homepage = file_get_contents($pageURL);
  echo $homepage;
}

I then extract the html code i need from the returned data using jQuery and insert it into a div called #BFX, as follows:

$("#btnNewLoadMethod1").click(function(){
  $('#temp1').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $('#temp').html( $('#temp1').find('center').html() );
    $('#BFX').html( $('#temp').html() );
  });
});

This works fine. I get the html data (which is a gif image) i need displayed on screen in the correct div.

The problem is i can see the html data loading into the div (dependant on network speed), but what I want is to insert the extracted html code into #BFX ONLY when the ajax request has fully completed.

I have tried to use async:false and call $('#BFX').html( $('#temp').html() ); outside the load() function, this had the same effect.

Answer 1

if you mean #temp1 is the div showing, .hide() then .show() it.

$("#btnNewLoadMethod1").click(function(){
  $('#temp1').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $('#temp').html( $('#temp1').find('center').html() );
    $('#BFX').html( $('#temp').html() );
    // find img tags... then hide it.... when image finished loading, show it..
    $('#BFX').find('img').hide().load(function(){ $(this).show(); /* this function triggers when image finish loading... */})
  })
});

.load() for images... quick demo

code reduction maybe this will also work..

$("#btnNewLoadMethod1").click(function(){
  $('<div>').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $(this).find('center img').appendTo('#BFX');
    // find img tags... then hide it.... when image finished loading, show it..
    $('#BFX').find('img').hide().load(function(){ $(this).show(); /* this function triggers when image finish loading...*/ })
  })
});

this is much less element usage...

Answer 2

UPDATE: Getting the HTML for inserting an image on a page, its not the same as getting the file ready. with your current method, you are just asking for the HTML code (if i understood well), not for the .gif file.

if you append the new HTML into the page, then the browser is going to ask the server for the image.

You would need somehow, preload the image and then append the HTML code. You can search on google for several techniques on how to preload images.

=================================================================================

You can try with a normal jQuery Ajax call

Success function is executed when ajax has finished loading

$("#btnNewLoadMethod1").click(function(){
     $.ajax({
         url: "/image/path/file.gif",
         data: $("#formdata").serialize(),
         success: function() {
                 $('#temp1').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , 
                 function() {
                     $('#temp').html( $('#temp1').find('center').html() );
                     $('#BFX').html( $('#temp').html() );
                 });
         }
     });
});

Answer 3

Thanks to @Reigel for his help, I tweaked his code to work as I needed:

$("#btnNewLoadMethod2").click(function(){
  $('<div>').load('pgiproxy.php', { data : $("#formdata").serialize(), mode : "graph"} , function() {
    $('#temp').html( $('center img', this) );
    $('#temp').find('img').load(function(){ $('#BFX').html($('#temp').html() ) })
  })
});

The HTML received from the Ajax call to pgiproxy.php is stored in a jQuery object $('<div>').

Using $('#temp').html( $('center img', this) ); I extracted the HTML that I needed and stored it in a div named #temp.

The final line:
$('#temp').find('img').load(function(){ $('#BFX').html($('#temp').html() ) }) binds a load event to the IMG element which runs the function $('#BFX').html($('#temp').html() once the image has completed loading, this function just copies the HTML from #temp div (which is hidden) into my main div #BFX.

Now when the user loads each successive image all they see is the new image just appear over the top of the old one. Since the images are of a market graph, the graph line appears to be drawing along the image.

Hope I explained it clearly enough, Thanks again for the help.