This is a question that seems to have been asked a number of times here by different people using a number of different coding languages, but no one seems to have come up with a clear definitive answer.

I have a div on my page with the id “showResultsHere”:

<div id="showResultsHere"></div>

I then have a jQuery function which gets a page of 100 products, processes them and then moves onto the next page, and then the next page and so on until all pages have been processed. I do this by having the jQuery function using a do/while loop, and in each loop it runs another function which makes an AJAX call to a php function which processes the page and returns the results.

Here is the code (which is currently just running a test php function):

function get_all_products( pageToProcess ){
    var pageResult;
    var totalPages;
    var updateMessage;
    do {
        pageResult = get_page_of_products( pageToProcess );
        totalPages = pageResult['page_count'];
        updateMessage = 'Page Processed = ' + pageResult['page'] + ' of ' + totalPages + '.';
        if(pageToProcess < totalPages){
            updateMessage += ' Next page = ' + pageResult['next_page'] + '.';
        }
        updateMessage += '<br />';
        console.log(updateMessage);
        jQuery("#showResultsHere").append(updateMessage);
        pageToProcess = pageResult['next_page'];
    }
    while (pageToProcess <= totalPages);
}

function get_page_of_products( pageToProcess )
{
    jQuery.ajax({
        type: "POST",
        url: <?php echo (json_encode(admin_url( 'admin-post.php' ))); ?>,
        data: "action=render_test&page=" + pageToProcess,
        dataType: 'json',
        async: false,
        success: function(result){
            pageResult = result;
        }
    });
    return pageResult;
}

And here is the php function that is being run at the url being called by the AJAX call:

function renderTest(){
    $page = $_POST['page'];
    $next_page = $page + 1;
    $array = array('page'=>$page,'page_count'=>26,'next_page'=>$next_page);
    echo json_encode($array);
}

Now, you can see in the “get_all_products” function, I have these lines:

console.log(updateMessage);
jQuery("#showResultsHere").append(updateMessage);

The issue I’m having is that, while the “console.log(updateMessage);” line works perfectly and shows me the updated information during each loop of the function, the “jQuery(“#showResultsHere”).append(updateMessage);” line on the other hand does not; instead, the “showResultsHere” div remains completely blank until every loop of the function is 100% complete and it then just spits all of the appends out at once at the very end.

I have tried moving the append to be within the AJAX call instead like so:

jQuery.ajax({
    type: "POST",
    url: <?php echo (json_encode(admin_url( 'admin-post.php' ))); ?>,
    data: "action=render_test&page=" + pageToProcess,
    dataType: 'json',
    async: false,
    success: function(result){
        pageResult = result;
        jQuery("#showResultsHere").append('Blah blah blah...  Something something, yada yada.');
    }
});

But this makes absolutely no difference.

I really need a layperson like my client to be able to see the updated information on the page as it’s running through each loop because they’re not a developer and would know nothing about viewing the console window, etc.

Any ideas on now I can go about achieving this?

Thanks.