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
.