How to progressively update a plugin admin div using ajax?

enter image description here

Thanks to this seven-year-old tutorial from Pippin Williamson, I have just learned how to live-load content in to an admin-side plugin page, using ajax.

My plugin sets up a management page (Tools) set up in my admin, containing an empty div #cxt-results and a form with submit button cxt-submit.

Thanks to the following PHP function and jQuery, when the button is clicked, the latest five posts of a given post type are fetched, and the response, their titles, is returned in to the cxt-results div, all in one list.

/* ------------------------------------------------------------------------ *
 * Ajax Function
 * ------------------------------------------------------------------------ */

function cxt_process_ajax() {

    echo '<p>This is my response</p>';

    // If neither of these verifies
    if (!isset($_POST['cxt_nonce']) || !wp_verify_nonce($_POST['cxt_nonce'], 'cxt-nonce') ) {
        die('Permissions check failed');
    }


    $myposts = get_posts(
        array(
            'post_type'         => 'viewpoint',
            'posts_per_page'    => 5
        )
    );

    if ($myposts) {
        echo '<ul>';
        foreach ($myposts as $mypost) {
            echo '<li>' . get_the_title($mypost->ID) . '</li>';
        }
        echo '</ul>';
    } else {
        echo '<p>' . __('No results found', 'cxt') . '</p>';
    }

    die();
}
add_action('wp_ajax_cxt_get_results', 'cxt_process_ajax');

.

jQuery(document).ready(function($) {

  // When the form is submitted
  $('#cxt-form').submit(function() {

    $('#cxt-loading').show();                   // Loading animation
    $('#cxt-submit').attr('disabled', true);    // Submit button
    $('#cxt-results').empty();                  // Content box

    data = {
      action: 'cxt_get_results',
      cxt_nonce: cxt_vars.cxt_nonce
    };

    // Finish up
    $.post(ajaxurl, data, function(response) {   // Post cxt_get_results to wp-admin ajax, get response
      $('#cxt-loading').hide();                  // Loading animation
      $('#cxt-submit').attr('disabled', false);  // Submit button
      $('#cxt-results').html(response);          // Content box
    });

    return false;
  });
});

What I’d like, however, is to move to a more “progressive” update for the cxt-results div – that is, to add a new post title to it sequentially until exhausted, rather than all in one response at the end of the process.

This doesn’t mean much for a process as quick as fetching a post list, as in the above example. But progressive feedback will be useful for a future use case I have in mind, wherein each step being output may take a longer time to process.

How can I go about doing this? I might imagine it involves a fresh approach on the jQuery/Javascript side, and not just PHP, since it would involve a stepped update rather than a single response (?).

Or is there a way to do it more with just PHP, teasing out a standard foreach?

Read more here:: How to progressively update a plugin admin div using ajax?

Leave a Reply

Your email address will not be published. Required fields are marked *