I've built a function which, depending on the submitted option in a <select> input, generates a new data table (TablePress plugin) and inserts it into the page via AJAX.

The function works perfectly for me as an admin, but as soon as I log out, it fails. I've browsed similar questions in this area and attempted any applicable solutions, but I've yet to work this out.

From the network tab in dev tools, I can see the request for admin-ajax.php, which returns a 200 status code. As a non-admin, it's returning a 302 and hanging indefinitely (perpetual loading .gif).

I've tried to simplify the implementation below for the purpose of debugging:

HTML — Form with select input

<form id="submitProvider" method="POST">
    <select name="providerList">
        <option>Provider 1</option>
        <option>Provider 2</option>
        <option>Provider 3</option>
    </select>
    <button type="submit">Submit</button>
</form>

PHP — plugin file containing function

// Load dependencies
add_action('wp_enqueue_scripts', 'plugin_scripts');
function plugin_scripts() {
    wp_enqueue_script( 'js_ajax_handler', plugin_dir_url( __FILE__ ) . 'js/ajax-handler.js', array('jquery'), '1.0.0', false );
    wp_localize_script( 'js_ajax_handler', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

// AJAX: Generate/update provider table
add_action('wp_ajax_nopriv_updateTable', 'updateTable');
add_action('wp_ajax_updateTable', 'updateTable');

// Return output on POST with updated 'child-shortcode'
function updateTable() {

    if (isset($_POST['providerList'])) {
        $selectedProvider = $_POST['providerList'];

        // Output table
        TablePress::$controller = TablePress::load_controller( 'frontend' );
        $output .= tablepress_get_table( array(
            'filter' => $selectedProvider,
            'id' => '1'
        ) );

        // Success
        wp_send_json(array('status' => 'success', 'html' => $output));
    }

    // Fail
    wp_send_json(array('status' => 'fail'));

    wp_die();

}

JS — AJAX handler

jQuery(document).ready(function($) {
    $('#submitProvider').submit(function(e){
        e.preventDefault();
        $.ajax({ 
            cache: false,
            url: my_ajax_object.ajax_url,
            type: 'POST',
            data: {
                'action': 'updateTable',
                'providerList': $("[name='providerList']").val()
            },
            error: function() {
                $("#table-container").html("Unable to load provider data"); 
            },
            beforeSend: function() {
                $('#table-container').html("<img src='/icon__loading.gif'>");
            },
            success: function(data){
                if(data.status == 'success'){
                    $("#table-container").html(data.html);
                }
            },
            complete: function(data) {
                // Place/replace action buttons on successful completion
                exportTableButtons(); 
            },
        });
    });
});

Any advice would be massively appreciated - I'm out of ideas as to why this is failing for unauthenticated users when I've localized the script and used wp_ajax_nopriv_updateTable.

I've built a function which, depending on the submitted option in a <select> input, generates a new data table (TablePress plugin) and inserts it into the page via AJAX.

The function works perfectly for me as an admin, but as soon as I log out, it fails. I've browsed similar questions in this area and attempted any applicable solutions, but I've yet to work this out.

From the network tab in dev tools, I can see the request for admin-ajax.php, which returns a 200 status code. As a non-admin, it's returning a 302 and hanging indefinitely (perpetual loading .gif).

I've tried to simplify the implementation below for the purpose of debugging:

HTML — Form with select input

<form id="submitProvider" method="POST">
    <select name="providerList">
        <option>Provider 1</option>
        <option>Provider 2</option>
        <option>Provider 3</option>
    </select>
    <button type="submit">Submit</button>
</form>

PHP — plugin file containing function

// Load dependencies
add_action('wp_enqueue_scripts', 'plugin_scripts');
function plugin_scripts() {
    wp_enqueue_script( 'js_ajax_handler', plugin_dir_url( __FILE__ ) . 'js/ajax-handler.js', array('jquery'), '1.0.0', false );
    wp_localize_script( 'js_ajax_handler', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

// AJAX: Generate/update provider table
add_action('wp_ajax_nopriv_updateTable', 'updateTable');
add_action('wp_ajax_updateTable', 'updateTable');

// Return output on POST with updated 'child-shortcode'
function updateTable() {

    if (isset($_POST['providerList'])) {
        $selectedProvider = $_POST['providerList'];

        // Output table
        TablePress::$controller = TablePress::load_controller( 'frontend' );
        $output .= tablepress_get_table( array(
            'filter' => $selectedProvider,
            'id' => '1'
        ) );

        // Success
        wp_send_json(array('status' => 'success', 'html' => $output));
    }

    // Fail
    wp_send_json(array('status' => 'fail'));

    wp_die();

}

JS — AJAX handler

jQuery(document).ready(function($) {
    $('#submitProvider').submit(function(e){
        e.preventDefault();
        $.ajax({ 
            cache: false,
            url: my_ajax_object.ajax_url,
            type: 'POST',
            data: {
                'action': 'updateTable',
                'providerList': $("[name='providerList']").val()
            },
            error: function() {
                $("#table-container").html("Unable to load provider data"); 
            },
            beforeSend: function() {
                $('#table-container').html("<img src='/icon__loading.gif'>");
            },
            success: function(data){
                if(data.status == 'success'){
                    $("#table-container").html(data.html);
                }
            },
            complete: function(data) {
                // Place/replace action buttons on successful completion
                exportTableButtons(); 
            },
        });
    });
});

Any advice would be massively appreciated - I'm out of ideas as to why this is failing for unauthenticated users when I've localized the script and used wp_ajax_nopriv_updateTable.

• plugins
• plugin-development
• ajax
• javascript

1 Answer 1

Alright, I came across another answer that's finally solved this. I had a function (in functions.php) which revoked admin access to some user types I'd created with custom privileges - that was blocking non-admin access to admin-ajax.php. Old/new function below:

Old function

// Revoke dashboard access
add_action('admin_init', 'restrict_access_admin_panel');
function restrict_access_admin_panel(){
  global $current_user;
  get_currentuserinfo();
  if ($current_user->user_level <  4) {
    wp_redirect( get_bloginfo('url') );
    exit;
  }
}

New function

// Revoke dashboard access
add_action( 'admin_init', 'restrict_access_admin_panel' );
function restrict_access_admin_panel(){
    if ( !defined( 'DOING_AJAX' ) && !current_user_can('administrator') ){
        global $current_user;
        get_currentuserinfo();
        if ($current_user->user_level <  4) {
            wp_redirect( get_bloginfo('url') );
            exit;
        }
    } 
}