Wordpress jQuery ajax GET request to php function which sends back multiple responses progressively as each php task is completed

Question

I am seeking terminology or links to related questions for what I am trying to achieve here...

I use jquery ajax all the time with wordpress, but is it possible to send data back to my jquery ajax function midway through the running php function?

My goal is to create a front-end progress bar, showing the status of the running ajax php function tasks.

So I tried using wp_send_json_success() within the ajax fired php function in each completed post loop output... but it seems wp_send_json_success() returns rather than continues. So the js ajax success response only ever returns the first sent wp success response data...

$.ajax({
    cache: false,
    timeout: 300000, // 5 hours
    url: admin_ajax_url,
    type: 'GET',
    data: {
        action : 'test',
    },
    success: function (response) {

        console.log(response);

    }
});

<?php

class Test {

    public function __construct() {

        add_action('wp_ajax_nopriv_test', [$this, 'ajax_test'], 20);
        add_action('wp_ajax_test', [$this, 'ajax_test'], 20);

    }

    public function ajax_test() {

        $args = [
            'post_type'         => 'product',
            'post_status'       => 'publish',
            'posts_per_page'    => -1,
            'order'             => 'ASC',
            'orderby'           => 'ID',
        ];

        $products = new WP_Query($args);

        if($products->have_posts()) :

            while($products->have_posts()): $products->the_post();

                global $post;

                // i want to send data back to my js ajax every time this is hit
                // but wp_send_json_success returns first time it is hit (see my console.log below...) 
                wp_send_json_success([
                    $post->ID => true
                ]);

            endwhile;

        endif;

        die();

    }

}

new Test();

JS consoled log response for the above code...

wp_send_json_success() returns (doesn't continue) and the response exits the first time it is hit in the php function.

Is it possible to send multiple intermittent data responses back to my jquery ajax function until the php function is complete (.done)?

Any links to questions or terminology for me to work on a solution... (if this is possible with jquery ajax)... would be massively appreciated, thanks!

If it is not possible, what is the alternative?... To send a new ajax request for every task to be executed?... this sounds heavy, unreliable and illogical.

Thanks in advance for any advice!

Answer 1

I do not think you can send a single request and recieve multiple responses, as you would if you were streaming the data. See this thread, jQuery read AJAX stream incrementally?.

For your use case, I think it would be better to recieve all of the post information in a single request, as this would avoid information being output to the DOM at different times, which might make it seem a bit clunky.

I would move the wp_send_json_success() function outside the post loop, so you get all the information from the query in a single response.

public function ajax_test() {

    $args = [
        'post_type'         => 'product',
        'post_status'       => 'publish',
        'posts_per_page'    => -1,
        'order'             => 'ASC',
        'orderby'           => 'ID',
    ];

    $products = new WP_Query($args);

    if($products->have_posts()) :

        //Variable to store all the results from the query
        $response_data = [];

        while($products->have_posts()): $products->the_post();

            global $post;

            $response_data[] = [ $post->ID => true ];

        endwhile;

    endif;

    //Send response back to front end
    wp_send_json_reponse($reponse_data);      

    die();

}

You could change the number of posts that are output by including a the desired number of posts as post data, as seen below;

$.ajax({
cache: false,
timeout: 300000, // 5 hours
url: admin_ajax_url,
type: 'GET',
data: {
    action : 'test',
    posts_per_page : 3 //Maximum number of posts that can be returned 
},
success: function (response) {

    console.log(response);

}

});

And then implementing that data in the $args arrays with;

'posts_per_page'    => $_POST['posts_per_page'],

Edit: This link solved the OP's question.