PhantomJS to capture next page content after button click event

Question

I am trying to capture second page content after click method. But it is returning front page content.

const status = await page.open('https://www.dubailand.gov.ae/English/services/Eservices/Pages/Brokers.aspx');
console.log(status);
await page.evaluate(function() {
    document.querySelector('#ctl00_ctl42_g_26779dcd_6f3a_42ae_903c_59dea61690e9_dpPager > a.NextPageLink').click();
})

const content = await page.property('content');
console.log(content);

I have done similar task by using puppeteer, but shifting to phantomjs due to deployment issues with puppeteer. any help is appreciated.

Answer 1

You get the front page because you request page's content immediately after clicking on the "next" button, but you need to wait for Ajax request to finish. It can be done by observing a "tree palm" ajax loader: when it's not visible, the results are in.

// Utility function to pass time: await timeout(ms)
const timeout = ms => new Promise(resolve => setTimeout(resolve, ms));

// emulate a realistic client's screen size
await page.property('viewportSize', { width: 1280, height: 720 });

const status = await page.open('https://www.dubailand.gov.ae/English/services/Eservices/Pages/Brokers.aspx');

await page.evaluate(function() {
    document.querySelector('#ctl00_ctl42_g_26779dcd_6f3a_42ae_903c_59dea61690e9_dpPager > a.NextPageLink').click();
});

// Give it time to start request
await timeout(1000);

// Wait until the loader is gone
while(1 == await page.evaluate(function(){ 
    return jQuery(".Loader_large:visible").length 
}))
{
    await timeout(1000);
    console.log(".");
}

// Now for scraping
let contacts = await page.evaluate(function(){

    var contacts = []; 
    jQuery("#tbBrokers tr").each(function(i, row){
        contacts.push({"title" : jQuery(row).find("td:nth-child(2)").text().trim(), "phone" : jQuery(row).find("td:nth-child(4)").text().trim() })
    })

    return contacts;
});

console.log(contacts);