Несколько вещей не так. Один совет - сначала проверить все ошибки в консоли браузера. Там должно быть несколько.
Первая возможная проблема:
Возврат false в обработчике submit() может препятствовать отправке формы, но только при наличии нет ошибок. Лучший способ (также позволяющий легко просматривать журнал консоли браузера) - использовать event.preventDefault()
$('.track_order').submit(function(event) { // <-- add event as argument here
event.preventDefault(); // <-- better way to prevent form from submitting
// Rest of your script code
}
Вторая возможная проблема:
$ может не существовать В Wordpress вам, вероятно, следует использовать jQuery в этом коде вместо $ (если вы не определите $). Поэтому первым шагом будет замена $ на jQuery внутри тегов <script>.
jQuery('.track_order').submit(function(event) { // <-- replace $ by jQuery
event.preventDefault();
jQuery.ajax({ // // <-- replace $ by jQuery
data: formData,
type: jQuery(this).attr('method'), // <-- replace $ by jQuery
url: jQuery(this).attr('action'), // <-- replace $ by jQuery
success: function(response) {
jQuery('.track-results').html(response); // <-- replace $ by jQuery
}
});
});
Третья возможная проблема:
Убедитесь, что на самом деле у вас есть элемент HTML с классом track-results где-то, поэтому данные могут отображаться после загрузки через AJAX.
<div class="track-results"></div>
Четвертая возможная проблема:
FormData не работает вместе с таким методом jQuery ajax(), потому что jQuery хочет его упорядочить, но не должен этого делать, когда данные предоставляются как FormData object.
Два возможных решения:
Решение 1 - Установите processData и contentType на false при выполнении запроса ajax()
jQuery.ajax({
processData: false,
contentType: false,
// All the other fields
});
ИЛИ Решение 2 - Просто используйте простой JavaScript объект вместо FormData
var formData = {
'from_ajax': '1'
}
вместо
var formData = new FormData();
formData.append('from_ajax', '1');
Пятая возможная проблема:
Последняя часть вашего скрипта PHP и не должна быть в тегах JS script:
if(isset($_POST['from_ajax']){
if($_POST['from_ajax'] == 1){
// do not load header or footer , just load required view to display.
}
}
Вместо этого она должна быть в файле PHP, упомянутом мной. в атрибуте action формы.
Некоторая дополнительная информация:
Не просто go и редактируйте основные файлы Wordpress. Вы, вероятно, можете делать то, что вам нужно, с помощью действия AJAX в Wordpress. Хотя, на мой взгляд, документация не очень удобна для начинающих, вот она: https://developer.wordpress.org/plugins/javascript/ajax/
Эта старая запись в Кодексе WP может на самом деле объяснить основы более простым способом: https://codex.wordpress.org/AJAX_in_Plugins
Полный пример:
Я загружаю WP core здесь, включая wp / wp-load. php, чтобы я мог использовать функции WP, и я установил атрибут action в качестве самого тестового файла. Точно так же я могу дать вам полный пример, содержащийся в одном файле.
<?php
include 'wp/wp-load.php';
if (isset($_POST['from_ajax']) && $_POST['from_ajax'] == 1) {
die('tada! here is the example response ...');
}
?>
<form action="test.php" method="post" class="woocommerce-form woocommerce-form-track-order track_order">
<p><?php esc_html_e( 'To track your order, please enter your Order ID and the email you used during checkout. You can find these in your receipt and confirmation email.', 'woocommerce' ); ?></p>
<p class="form-row form-row-first"><label for="orderid"><?php esc_html_e( 'Order ID', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="orderid" id="orderid" value="<?php echo isset( $_REQUEST['orderid'] ) ? esc_attr( wp_unslash( $_REQUEST['orderid'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Found in your order confirmation email.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
<p class="form-row form-row-last"><label for="order_email"><?php esc_html_e( 'Billing email', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="order_email" id="order_email" value="<?php echo isset( $_REQUEST['order_email'] ) ? esc_attr( wp_unslash( $_REQUEST['order_email'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Email you used during checkout.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
<div class="clear"></div>
<p class="form-row"><button type="submit" class="button" name="track" value="<?php esc_attr_e( 'Track', 'woocommerce' ); ?>"><?php esc_html_e( 'Track', 'woocommerce' ); ?></button></p>
<?php wp_nonce_field( 'woocommerce-order_tracking', 'woocommerce-order-tracking-nonce' ); ?>
</form>
<div class="track-results">result will be shown here</div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
var formData = new FormData();
formData.append('from_ajax', '1');// append this to your form.
jQuery('.track_order').submit(function(event) { // catch the form's submit event
event.preventDefault(); // prevent form submit
jQuery.ajax({ // create an AJAX call...
data: formData, // get the form data
processData: false,
contentType: false,
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('.track-results').html(response); // update the DIV
}
});
});
</script>
Надеюсь, это поможет вам!