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.

enter image description here

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&amp;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'">

@Deadlock Hi DL, the delay func doesn't meet my requirement. Please see the updated part of my post. thx — Franva, Aug 07 '13 at 06:46
How does that snippet alter the `#output`? Only thing I can see is a `window.open` call. — Bergi, Aug 08 '13 at 11:56
@Bergi Hi, use searchString to change URL and then the content of div will change accordingly. But even we don't know what js changed the content, we still know url. — Franva, Aug 08 '13 at 12:21

LeGEC · Answer 1 · 2013-08-29T08:32:57.237

3

I see two possibilities :

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.
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.

edited Aug 29 '13 at 08:32

answered Aug 07 '13 at 06:53

LeGEC

46,477
5
57
104

Hi LeGEC, it's the possibility 1. and I have used ajax call (as you can see in my code) to do that. The real problem is in my updated part. Please have a look. thx – Franva Aug 07 '13 at 07:07
Have you identified the piece of js code which modifies `#output` ? – LeGEC Aug 07 '13 at 15:41
Hi LeGEC, yes I have identified the js code. Please have a look in my Update 3 section. many thanks!! – Franva Aug 08 '13 at 00:29

score 0 · Answer 2 · answered Aug 07 '13 at 06:56

0

Use delay before displaying content like

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

answered Aug 07 '13 at 06:56

Deadlock

1,575
1
19
34

Hi Deadlock, the code : $('#container').delay(800).html(headline); is inside of the success callback, so it doesn't matter how long you delay to display the retrieved content it wouldn't fetch the content I want. What matters is to triggered the callback(success) only after the generated content has loaded. – Franva Aug 07 '13 at 07:06
@Franva You can use `complete` instead of `success` for that – Deadlock Aug 07 '13 at 07:12
Hi Deadlock, thank you for your reply. The complete doesn't work for me. Please see the Update 2 which states the reason. – Franva Aug 07 '13 at 14:32

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

2 Answers2