I'm getting a an error prompt using a plugin I created. When I look at the console, it is coming up with POST https://urbanchurn.com/wp-admin/admin-ajax.php 400 (Bad Request). Trying to determine if my code isn't calling ajax correctly or there is something missing between the class and javascript files.
My class file code:
<?php
class WC_Order_Item_Tracker {
public static function init() {
add_shortcode('wc_order_item_tracker', array(__CLASS__, 'render_order_lookup'));
add_action('wp_ajax_update_item_status', array(__CLASS__, 'update_item_status'));
add_action('wp_ajax_mark_order_complete', array(__CLASS__, 'mark_order_complete'));
add_action('wp_enqueue_scripts', array(__CLASS__, 'enqueue_scripts'));
}
public static function render_order_lookup() {
if (!empty($_GET['order_id']) && ctype_digit($_GET['order_id'])) {
$order_id = intval($_GET['order_id']);
$order = wc_get_order($order_id);
if ($order) {
echo '<ul>';
foreach ($order->get_items() as $item_id => $item) {
$picked_up = wc_get_order_item_meta($item_id, '_pickup_status', true);
$checked = $picked_up == 'picked_up' ? 'checked' : '';
echo '<li>';
echo '<input type="checkbox" class="wc-oit-item-checkbox" data-item-id="' . esc_attr($item_id) . '" data-order-id="' . esc_attr($order_id) . '" ' . $checked . '>';
echo esc_html($item->get_name());
echo '</li>';
}
echo '</ul>';
} else {
echo '<p>Order not found.</p>';
}
} else {
include WC_OIT_PLUGIN_DIR . 'templates/order-lookup-form.php';
}
}
public static function update_item_status() {
check_ajax_referer('wc-oit-nonce', 'nonce');
$orderId = isset($_POST['order_id']) ? intval($_POST['order_id']) : 0;
$itemId = isset($_POST['item_id']) ? intval($_POST['item_id']) : 0;
$status = isset($_POST['status']) ? sanitize_text_field($_POST['status']) : '';
if ($orderId && $itemId && $status) {
wc_update_order_item_meta($itemId, '_pickup_status', $status);
wp_send_json_success();
} else {
wp_send_json_error('Invalid data provided.');
}
}
public static function mark_order_complete() {
check_ajax_referer('wc-oit-nonce', 'nonce');
$orderId = isset($_POST['order_id']) ? intval($_POST['order_id']) : 0;
if ($orderId) {
$order = wc_get_order($orderId);
if ($order) {
$order->update_status('completed');
wp_send_json_success();
} else {
wp_send_json_error('Invalid Order ID.');
}
}
}
public static function enqueue_scripts() {
wp_enqueue_style('wc-order-item-tracker', WC_OIT_PLUGIN_URL . 'assets/css/order-item-tracker.css');
wp_enqueue_script('wc-order-item-tracker', WC_OIT_PLUGIN_URL . 'assets/js/order-item-tracker.js', array('jquery'), '1.0', true);
wp_localize_script('wc-order-item-tracker', 'wc_oit_params', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wc-oit-nonce')
));
}
}
// Initialize the plugin
add_action('plugins_loaded', array('WC_Order_Item_Tracker', 'init'));
My javascript code:
jQuery(document).ready(function($) {
// Event handler for order lookup form submission
$('#wc-oit-order-form').submit(function(e) {
e.preventDefault();
var orderId = $('#order-id').val(); // Assuming the input field has an ID of 'order-id'
$.ajax({
url: wc_oit_params.ajax_url,
type: 'POST',
data: {
action: 'render_order_lookup', // The WordPress AJAX action
order_id: orderId,
nonce: wc_oit_params.nonce
},
success: function(response) {
// Assuming response is a list of items
var itemsHtml = '';
$.each(response.items, function(index, item) {
itemsHtml += '<li>' + item.name + ' - Status: ' + item.status + '</li>';
});
$('#wc-oit-order-items').html(itemsHtml); // Update the UI with the order items
},
error: function() {
alert('Failed to fetch order items.');
}
});
});
// Delegated event handler for changing the status of an individual item
$(document).on('change', '.wc-oit-item-checkbox', function() {
var checkbox = $(this);
var itemId = checkbox.data('item-id');
var orderId = checkbox.data('order-id');
var status = checkbox.is(':checked') ? 'picked_up' : 'not_picked_up';
$.ajax({
url: wc_oit_params.ajax_url,
type: 'POST',
data: {
action: 'update_item_status',
nonce: wc_oit_params.nonce,
order_id: orderId,
item_id: itemId,
status: status
},
success: function(response) {
if (response.success) {
alert('Item status updated successfully.');
} else {
alert('Failed to update item status.');
}
},
error: function() {
alert('An error occurred while processing your request.');
}
});
});
// Delegated event handler for marking the entire order as complete
$(document).on('click', '#wc-oit-mark-order-complete', function() {
if (confirm('Are you sure you want to mark this order as complete?')) {
var orderId = $(this).data('order-id');
$.ajax({
url: wc_oit_params.ajax_url,
type: 'POST',
data: {
action: 'mark_order_complete',
nonce: wc_oit_params.nonce,
order_id: orderId
},
success: function(response) {
if (response.success) {
alert('Order marked as complete.');
} else {
alert('Failed to mark the order as complete.');
}
},
error: function() {
alert('An error occurred while processing your request.');
}
});
}
});
});
Any thoughts why it would be hitting an admin-ajax.php 404 error?