This is the snippet I am using:
function custom_tablepress_admin_footer() {
?>
<script type="text/javascript">
function focusCell(cell) {
if (cell && cell.tagName === 'TD') {
// Log a message to check if the double-click is being triggered
console.log('Double-click triggered for cell:', cell);
// Add a temporary background color to visually indicate the double-click was triggered
cell.css('background-color', '#f0c674'); // Change the background color
// Trigger a double-click to ensure the cell enters edit mode
cell.trigger('dblclick');
// Directly focus the cell without triggering jQuery events
if (!document.activeElement || document.activeElement !== cell) {
cell.focus();
}
// Reset the background color after a short delay
setTimeout(function () {
cell.css('background-color', ''); // Revert the background color
}, 500); // Reset after 0.5 seconds
}
}
jQuery(document).ready(function ($) {
var lastFocusedCell = null;
// Listen for clicks on jexcel cells to track the last focused cell
$(document).on('click', 'table.jexcel tbody td', function () {
lastFocusedCell = $(this); // Store the clicked cell as the last focused
});
// Append the custom button to the correct location in the manipulation table
$('#tablepress-manipulation-controls tbody tr td.column-1').append('<button type="button" class="button" id="user-selection-button">Select User</button>');
// Create the popup HTML structure
$('body').append(<br> <div id="user-selection-popup" style="display:none;"><br> <div class="user-selection-popup-content"><br> <h2>Select User and Order</h2><br> <select id="user-dropdown"><br> <option value="">Select a user</option><br> </select><br> <select id="order-dropdown" disabled><br> <option value="">Select an order</option><br> </select><br> <div style="margin-top: 15px;"><br> <button id="insert-user-button" class="button button-primary">Insert</button><br> <button id="close-popup-button" class="button">Close</button><br> </div><br> </div><br> </div><br>);
// Populate the user dropdown with AJAX
$.ajax({
url: ajaxurl, // WordPress AJAX endpoint
method: 'POST',
data: {
action: 'get_users_for_dropdown'
},
success: function (response) {
$('#user-dropdown').append(response);
}
});
// Enable and populate the order dropdown when a user is selected
$('#user-dropdown').change(function () {
var userId = $(this).val();
if (userId) {
$('#order-dropdown').prop('disabled', false);
// Fetch orders based on selected user
$.ajax({
url: ajaxurl,
method: 'POST',
data: {
action: 'get_orders_for_user',
user_id: userId
},
success: function (response) {
$('#order-dropdown').html(response); // Populate the order dropdown
}
});
} else {
$('#order-dropdown').prop('disabled', true).html('<option value="">Select an order</option>'); // Reset orders dropdown
}
});
// Show the popup when the custom button is clicked
$('#user-selection-button').click(function () {
$('#user-selection-popup').fadeIn();
});
// Close the popup
$('#close-popup-button').click(function () {
$('#user-selection-popup').fadeOut();
});
// Handle the insert button
$('#insert-user-button').click(function () {
var selectedUser = $('#user-dropdown option:selected').text();
var selectedOrder = $('#order-dropdown option:selected').val(); // Get the selected order ID
var orderMeta = $('#order-dropdown option:selected').data('meta'); // Get the order meta value (description_tally_ref)
// Remove the orderMeta condition from the main if check
if (selectedUser && lastFocusedCell && selectedOrder) {
// Function to update each cell sequentially
function updateCellsSequentially() {
// Step 1: Focus on the user cell and update it
focusCell(lastFocusedCell); // Ensure the cell is focused and trigger double-click
setTimeout(function () {
var userTextarea = lastFocusedCell.find('textarea');
var userDiv = lastFocusedCell.find('div'); // Fallback to find div if textarea is not found
if (userTextarea.length) {
userTextarea.val(selectedUser); // Set the user name
} else if (userDiv.length) {
userDiv.text(selectedUser); // Set the user name in the div
}
// Step 2: Focus on the right cell (for order) and update it
var rightCell = lastFocusedCell.next('td');
if (rightCell.length) {
focusCell(rightCell); // Ensure the cell is focused and trigger double-click
setTimeout(function () {
var orderTextarea = rightCell.find('textarea');
var orderDiv = rightCell.find('div'); // Fallback to find div if textarea is not found
var orderText = 'Order #' + selectedOrder;
if (orderMeta) {
orderText += ' - ' + orderMeta; // Concatenate orderMeta only if it has a value
}
if (orderTextarea.length) {
orderTextarea.val(orderText); // Set the order info
} else if (orderDiv.length) {
orderDiv.text(orderText); // Set the order info in the div
}
// After updating both cells, close the popup
$('#user-selection-popup').fadeOut();
}, 1000); // Wait 1 second before targeting the order cell
}
}, 1000); // Wait 1 second before targeting the user cell
}
// Start updating the cells sequentially
updateCellsSequentially();
}
});
});
</script>
<?php
}
add_action('admin_footer', 'custom_tablepress_admin_footer');
function get_users_for_dropdown() {
$users = get_users();
$options = '';
foreach ($users as $user) {
$options .= '<option value="' . esc_attr($user->ID) . '">' . esc_html($user->display_name) .' (#' . $user->ID . ')' . '</option>';
}
echo $options;
wp_die();
}
add_action('wp_ajax_get_users_for_dropdown', 'get_users_for_dropdown');
function get_orders_for_user() {
$user_id = intval($_POST['user_id']);
if (!$user_id) {
wp_die();
}
// Query WooCommerce orders for the selected user
$args = array(
'customer_id' => $user_id,
'limit' => -1, // No limit to orders fetched
'status' => 'any', // Fetch orders of any status
);
$orders = wc_get_orders($args);
$options = '<option value="">Select an order</option>';
foreach ($orders as $order) {
$order_meta = $order->get_meta('description_tally_ref'); // Get the meta value
$options .= '<option value="' . esc_attr($order->get_id()) . '" data-meta="' . esc_attr($order_meta) . '">Order #' . esc_html($order->get_id()) . ' - ' . wc_format_datetime($order->get_date_created()) . '</option>';
}
echo $options;
wp_die();
}
add_action('wp_ajax_get_orders_for_user', 'get_orders_for_user');
function custom_tablepress_admin_head() {
?>
<style>
/* CSS for the popup */
#user-selection-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 9999;
display: none;
}
.user-selection-popup-content {
text-align: center;
}
#user-dropdown, #order-dropdown {
width: 100%;
margin-bottom: 15px;
}
#insert-user-button, #close-popup-button {
margin: 5px;
}
</style>
<?php
}
add_action('admin_head', 'custom_tablepress_admin_head');
