What if Cross Domain Ajax request meets the content of target div is generated a few seconds later than document loaded

Question

I need to retrieve the content of a generated div on an external website page.

I have been searching for quite a while and haven't got any luck.

I have been able to retrieve all static content from that page(cross domain). But the content of that div will only be generated after clicking a button on the page.

the url is like : http://www.xxx.com/getPrice so when the type and postcode is selected, the url becomes http://www.xxx.com/getPrice?Type=5&postcode=3000

and the content of that div will display after around 2-3 seconds after the whole content of the page is loaded.

Here is the code

$.ajax({
                   url: link,
                   type: 'GET',
                   success: function (res) {
                       var headline = $(res.responseText).find('#divID').text();
                       $('#container').html(headline);
                   }
               });

Update:

the jQuery .delay() method cannot meet my requirement because I still need to execute the ajax call without delay. What's more is after the call is executed, I need the callback function can be triggered after the generated/dynamic/delayed content is loaded (not the time when the content of page is loaded). So here are 2 different times. I just don't know whether it's possible.

Update 2:

The complete method isn't the one I need. It is triggered when the request finishes but by that time, the generated content of the div hasn't been generated. So it still isn't the solution. Here is the pic to demo what I am talking about. You can see that the div #output , its content is still empty.

Update 3:

Here is the code to insert content in the #output div.

var markerImage = "http://www.racv.com.au/wps/wcm/connect/ebffbd00473d0422974bbfc0de4a49c9/marker.png?MOD=AJPERES&CACHEID=ebffbd00473d0422974bbfc0de4a49c9";
  var searchString="";
  var fuelType=2;
  var resultPage = document.location;
  resultPage = String(resultPage).split("?");   // Get URL without the query string
  resultPage = resultPage[0];
function searchFuel(){
  if (document.getElementById('fuelType3').checked) {
    fuelType = 3;
  } else if (document.getElementById('fuelType2').checked) {
    fuelType = 4;
  } else if (document.getElementById('fuelType4').checked) {
    fuelType = 6;
  } else if (document.getElementById('fuelType1').checked) {
    fuelType = 2;
  } else if (document.getElementById('fuelType5').checked) {
    fuelType = 5;
  }
//window.open("/wps/wcm/connect/racv/internet/primary/my+car/advice+_+information/fuel/petrol+prices/search+for+petrol+prices+around+melbourne?fuelType="+fuelType+searchString, '_self')
window.open(resultPage + "?fuelType=" + fuelType + searchString, "_self");  
}

This function is triggered by clicking a button and below is the code.

<input type="image" style="margin-top: 40px; cursor: pointer;" src="/wps/wcm/connect/993c7080474f0a60a0bff5aa2893940e/fpButton.gif?MOD=AJPERES&amp;CACHEID=993c7080474f0a60a0bff5aa2893940e" alt="search" id="search" border="0" class="submit" onclick="searchFuel();" onmouseover="javascript: this.style.cursor='pointer'">

Answer 1

I see two possibilities :

1. either the "delayed" content is loaded by the external link through an ajax call : in that case you will need to access the url of this extra ajax call.

2. or the the "delayed" content is already present in the response, and inserted in the DOM with a setTimeout : in that case, the data is already present in the response you get (either inside a hidden html node, or stored in some javascript variable, or written in exetenso in javascript code ...), you will have to find a way to extract it from the response.

Your #output div is modified as the result of an ajax call.

Open up your Firebug console, browse to the page you are trying to scrape, select your geographical zone, and look at what appears in the console as the page is being updated.

Some ajax queries are sent. Dig through them and find which one contains the info you need.

Answer 2

Use delay before displaying content like

$('#container').delay(800).html(headline);