WP enqueue script order và localize error, hook cần thiết?

Question

Đoạn mã dưới đây tạo ra lỗi:

Lưu ý: wp_enqueue_script được gọi không chính xác. Tập lệnh và kiểu không được đăng ký hoặc xếp hàng cho đến khi có các móc wp_enqueue_scripts, admin_enqueue_scripts hoặc login_enqueue_scripts. Thông báo này được kích hoạt bởi bộ xử lý waitlist_update_call. Vui lòng xem Gỡ lỗi trong WordPress để biết thêm thông tin. (Thông báo này đã được thêm vào phiên bản 3.3.0.) Trong /home/food/domains/xyz.com/public_html/wp-includes/functions.php trên dòng 5225 "

Nó cũng cho thấy một lỗi trong bảng điều khiển của:
POST https://theste.com/wp-admin/admin-ajax.php 400 (Bad Request)

Mã PHP trong tệp chức năng của tôi

wp_enqueue_script( 'update_call', 
                    get_theme_file_uri( '/assets/js/update_call.js' ), 
                    array('jquery'), null, true );
wp_localize_script('update_call', 'my_ajax', 
                   array('ajax_url' => admin_url('admin-ajax.php')));

//calls Waitinglist data and creates table
add_action('wp_ajax_function_1', 'update_function'); // logged in user can make a call
add_action('wp_ajax_nopriv_function_1', 'update'); // non logged in user can make a call

function update_function() {
    global $wpdb; $results = $wpdb->query( $wpdb->prepare("UPDATE 'my_table_name' SET `currentstatus` =
    'myupdate1' WHERE ID = '1'"));
    die($results);
}

CHỈNH SỬA 1:

Tôi đã cố gắng gọi nó trực tiếp. Xin thứ lỗi cho sự mới mẻ của tôi.Ok nắm đấm bên dưới đã giải quyết được vấn đề Enqueue nhưng lỗi POST 400 vẫn còn. Lỗi là

POST https://x.com/wp-admin/admin-ajax.php 400 (Bad Request)

Khi nhấp vào nút được cho là sẽ kích hoạt tôi nhận được -

Uncaught ReferenceError: update_functionis not defined
    at HTMLButtonElement.onclick

Tôi đã thay đổi PHP của mình trong tệp chức năng thành:

function my_scripts() {   
wp_enqueue_script( 'update_call', get_theme_file_uri( '/assets/js/update_call.js' ), array('jquery'), null, true );
wp_localize_script('update_call', 'my_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
//calls Waitinglist data and creates table
}
add_action('wp_enqueue_scripts', 'my_scripts');

add_action('wp_ajax_function_1', 'waitlist_update'); // logged in user can make a call

function waitlist_update() {
    global $wpdb;
    $results = $wpdb->query( $wpdb->prepare("UPDATE 'wp_wpdatatable_4' SET `currentstatus` = 'myupdate1' WHERE wdt_ID = '1'")); die($results);

}

Tệp JS riêng biệt là:

// JavaScript Document
jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    action: 'waitlist_update',
    success: function(data){
        // callback function
    }
});

và HTML là:

<button class="seat-btn" ID="update" onclick="update_function()">Go!</button>

Answer 1

WordPress cung cấp các hook để sắp xếp các script đúng cách.

Bạn có thể đã gọi phương thức enqueue trực tiếp. Nó phải được gọi lại trong hành động của wp_enqueue_scriptshook.

function my_scripts() {    
wp_enqueue_script('update-call', get_template_directory_uri() . '/assets/js/update_call.js', array('jquery'), false, true);
wp_localize_script('update-call', 'my_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'my_scripts');

Cũng thế,

//calls Waitinglist data and creates table
add_action('wp_ajax_function_1', 'update_function'); // logged in user can make a call
add_action('wp_ajax_nopriv_function_1', 'update_function'); // non logged in user can make a call

Nếu bạn kiểm tra câu trả lời trước đây của tôi trong câu hỏi cũ. Đây function_1là một hành động được yêu cầu từ lệnh gọi AJAX và update_functionlà tên hàm mà chúng ta nên gọi khi hành động được kích hoạt. Người dùng chưa đăng nhập khi kích hoạt hành động sẽ gọi hàm updatetheo mã của bạn ở trên không chính xác.

Nếu bạn chỉ muốn cho phép người dùng đã đăng nhập thực hiện yêu cầu này, bạn có thể xóa hành động thứ hai được đính kèm cho người dùng chưa đăng nhập.

add_action('wp_ajax_nopriv_function_1', 'update_function'); // notice the nopriv?

Lưu ý: Tên hành động ajax phải khớp với móc hành động.

jQuery.ajax({
//...
data: {
  action: 'action_name'
}
});

// The action name should be same wp_ajax_{action_name} from whatever defined in jQuery action 
add_action('wp_ajax_action_name', 'update_function')