Updating page element using jQuery within ajax call loop

Question

I am trying to create a jquery function that is going to import XML data to a wordpress site. During the process I want it to individually import posts then update a progress bar and/or counter each time an import finishes.

The problem I have is that the progress updates all seem to be held back until the entire process is finished and then update all at the same time.

For example: rather than updating the page with 1/100 complete, then 2/100 complete, it waits to the end and then adds all 100 updates at the same time.

Hopefully my code will explain it better than I have :S

// Send inital data to check XML feed
$.ajax({
    url: ajaxurl,
    type: 'POST',
    data: ajaxdata
}).done( function(response) {

    ...

    // Process XML data
    $('#progress').html('<h3>Import Progress</h3><p id="import_status"></p>');

    data2 = $("#form_name").serialize();

    finished = false;
    count = 0;

    while (!finished) {

        var ajax = $.ajax({
            url: ajaxurl,
            data: data2,
            type: 'POST',
            async: false
        }).done(
            function(response2) {
                if (response2 == 0) {
                    finished = true;
                } else {
                    count++;
                    split = response2.toString().split("::");
                    $('#progress').append('<p><strong>Item'+count+'/'+split[0]+'</strong><br/><strong>Status:</strong> '+split[1]+'</p>');
                    if (count >= split[0]) {
                        finished = true;
                    }
                }
            }
        );

    } // while

    $('#progress').append('<p>Import Complete!</p>');

    ...

}

The php file at ajaxurl is returning what it should in the right places. For context, during the while loop, the php file returns a string like this:

    100::Some Status Information

where 100 is the total number of lines that will be returned.

The loop runs the correct number of times and outputs all right information when it's complete... but it doesn't output item by item... it outputs all at the same time.

What am I missing? How can I get this to output each items status report individually?

Thanks for any help you can offer.

EDIT: Just some extra information, the <h3>ImportProgress</h3> doesn't appear until AFTER the while loop is completed either! The whole lot appears at once!

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

From what I understand Javascript runs in a single thread, so the while iteration blocks the execution and rendering of your page.

In order to show progress in Javascript while a process is running you should refactor your code, the following answer shows a way to do just that: Show javascript execution progress.

Hope it helps.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 05 '13 at 19:15

juan.facorro

9,791
2
33
41

Interesting. So if I'm reading this right, rather than using the `while` I create a process that contains the ajax request, which then calls itself when it's done until it's finished? – Elliott Bristow Feb 05 '13 at 19:44
Yes, that's the basic idea. – juan.facorro Feb 05 '13 at 19:48

Updating page element using jQuery within ajax call loop

1 Answers1