Javascript работает на консоли, но не событие onclick
Я новичок в JavaScript, я пытаюсь предоставить пользователям доступ к обновлению товаров для WooCommerce. Я сделал кнопку «Обновить», чтобы запустить скрипт, но он не запускается, страница только обновляется. Но когда я запускаю скрипт с консоли, он работает (например, js_update_stock ('20 ');)
Я работаю над изменением существующего плагина для WordPress, поэтому извините, если коды немного разбросаны. Если вам еще что-нибудь понадобится, дайте мне знать.
HTML сторона вещей:
<input type = "number" id = "stock'. $postid . '" name = "stock'. $postid .'" value = "'. get_post_meta( $postid, '_stock', true ) .'">
<button class = "button button-primary" style = "margin-bottom: 3px; padding-left: 24px; padding-right: 24px;" onclick = "js_update_stock(\''. $postid .'\')">'. __('Update','update_button') .'</button>
Я разместил этот скрипт на той же странице:
echo '<script type = "text/javascript">
function js_update_stock(product_id) {
var isnum = /^\d+$/.test(document.getElementById("stock" + product_id).value);
if (isnum){
if (confirm("Do you really want to update the stock of this product?")){
var data = {
action: \'update_stock\',
security: \'' . $ajax_nonce . '\',
id: product_id,
stock: document.getElementById("stock" + product_id).value
};
// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
jQuery.post(ajaxurl, data, function(response) {
if (response == \'true\'){
location.reload(true);
}
});
}
else{
// do nothing
}
}
else{
alert("Please enter a valid stock quantity");
}
}
</script>';
Функция обратного вызова AJAX:
add_action('wp_ajax_update_stock', 'update_stock_callback');
function update_stock_callback() {
check_ajax_referer( 'blahblah', 'security' );
if (isset($_POST['id'])){
$id = intval( $_POST['id'] );
$stock = intval( $_POST['stock'] );
wc_update_product_stock( $id, $stock );
echo 'true';
}
else{
echo 'false';
}
die(); // this is required to return a proper result
}
Любая помощь приветствуется, так как это беспокоит меня уже 2 дня. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
По умолчанию кнопка имеет тип submit, поэтому она отправляет вашу форму, поэтому ваша страница обновляется.
Вы хотите определить тип кнопки как кнопку, чтобы форма не отправлялась.
<button type = "button" class = "button button-primary" style = "margin-bottom: 3px; padding-left: 24px; padding-right: 24px;" onclick = "js_update_stock(\''. $postid .'\')">'. __('Update','update_button') .'</button>
Страница обновляется, потому что я думаю, что кнопка, которую вы используете, находится в форме. Поэтому, когда вы нажимаете на него, он запускает запрос формы и покидает страницу.
Чтобы предотвратить это, вам просто нужно добавить событие щелчка к вашей функции и отменить его до того, как страница будет выгружена:
<button class = "button button-primary"
style = "margin-bottom: 3px; padding-left: 24px; padding-right: 24px;"
onclick = "js_update_stock(event, \''. $postid .'\')">
'. __('Update','update_button') .'
</button>
И для javascript:
function js_update_stock(e, product_id) {
e.preventDefault();
// more code...
Событие Javascript предотвращает дефолт в W3schools
Надеюсь, это решило вашу проблему;)
Для большинства новых браузеров типом элемента кнопки по умолчанию является «Отправить». Это означает, что при нажатии на нее ваша форма будет отправлена до вызова функции «onclick». Кроме того, в вашей форме может не быть указанного атрибута действия, поэтому форма отправляется на себя.
Вы можете указать атрибут type для вашего элемента кнопки как «button», и теперь он будет вызывать вашу функцию «onclick».
Для получения дополнительной информации о типе кнопки по умолчанию в зависимости от браузера посетите: Какой тип кнопки используется по умолчанию?
Вместо тега кнопки вы можете использовать:
<a href='javascript:void(0);' id='updateBtn' class='btn btn-default'>Update</a>
$(document).ready(function () {
$('#updateBtn').on('click', function () {
// Make AJAX call here.
// Your logic will come here.
$.ajax({
url: 'Add url here',
data: 'Add data which is need to be update in json',
type: 'POST',
dataType: 'json',
success: successCallback,
complete: completeCallback,
error: errorCallback
})
});
var successCallback = function () {
// AJAX success callback
}
var completeCallback= function () {
// AJAX complete callback
}
var errorCallback= function () {
// AJAX error callback
}
});
ПРИМЕЧАНИЕ. Также убедитесь, что вы не выполняете перенаправление из серверной части (PHP), а просто отправляете ответ с помощью statusCode.
добавьте строку
alertв начало функции и попробуйте еще раз, чтобы увидеть, не запускается ли она вообще. Я предполагаю, что ваша кнопка находится внутри элементаformи, следовательно, имеет функциональность по умолчанию, вероятно