Итак, в основном у меня есть вызов API для OS Maps (UK map builder). Согласно их документации, я заставляю его работать, и он отлично отображается, но это событие onload
, и я использую ACF (расширенные настраиваемые поля) в WordPress для отображения карты на основе имени карты, используемого в настраиваемом поле.
Проблема в том, что карта загружается при загрузке страницы, но после моего вызова Ajax, когда пользовательское имя карты равно amlwch
, она не загружается.
Это происходит потому, что это событие onload
, а Ajax, очевидно, не выполняет перезагрузку страницы, поэтому я просто не знаю, как это обойти.
Итак, как заставить функцию работать, если происходит вызов Ajax?
Короче:
Ajax не загружает страницу, поэтому загрузка тела не будет вызываться после вызова ajax, какой еще вариант мне нужен, чтобы заставить его работать?
php:
(проверьте, есть ли имя настраиваемого поля, а затем отобразите функцию на основе имени)
<!-- bodafon -->
<?php if ( get_post_meta($postId,'route_map_name', true) == 'bodafon' ): ?>
<body onload = "initmapbuilder()">
<div id = "maproute" style = " width:100%; height:440px;"></div>
</body>
<!-- amlwch -->
<?php elseif ( get_post_meta($postId,'route_map_name', true) == 'amlwch' ): ?>
<body onload = "initmapbuilder1()">
<div id = "maproute1" style = " width:100%; height:440px;"></div>
</body>
<?php endif; ?>
JS:
(AJAX, имейте в виду, что он работает и отображает все данные вокруг этой карты, просто onload
не работает)
/*Maps section ajax call*/
$(function(){
$('#routes').on('change', function(){
var that = $(this);
var post_id = that.attr('value');
// console.info(post_id);
$.ajax({
url:'../../wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
type:'post',
data: {
// this is the action hook to call the handler "MyAjaxFunction"
action: 'post_maps_items',
// pass some data to post variblr to use in php/wordpress (optional)
id: post_id, // you can retrieve this using $_POST['id'];
},
timeout : 10000,
success:function(data){
// returned data by wordpress
//console.info('Success');
// $('#load_map').html(data);
$('#title').html(data).hide().fadeIn("slow").addClass('flex');
}
});
$.ajax({
url:'../../wp-admin/admin-ajax.php', // admin-ajax.php will handle the request
type:'post',
data: {
// this is the action hook to call the handler "MyAjaxFunction"
action: 'post_maps_items_info',
// pass some data to post variblr to use in php/wordpress (optional)
id: post_id, // you can retrieve this using $_POST['id'];
},
timeout : 10000,
success:function(data){
// returned data by wordpress
//console.info('Success');
$('#load_map').html(data);
// $('#title').html(data);
}
});
});
});
@emineminems спасибо за ответ, ну, это основано на том, какое имя настраиваемого поля выделено больше, чем только эти 2, это просто пример.
$('#load_map').html(data);
Это удалит все события внутри "#load_map". Проверьте, восстанавливаются ли события после этого
привет @ShishirArora, но я использую это в вызове Ajax, он работает, его событие onload
не происходит после того, как AJAX не работает, даже если он возвращает правильные данные, просто после вызова AJAX страница не загружается, поэтому функция выше php тогда не работает.
ajax не загружает страницу, поэтому загрузка тела не будет вызываться после вызова ajax
Итак, это работает с использованием метода jquery ajaxComplete
, работает:
Поэтому я удалил встроенные события onload
.
PHP:
<!-- bodafon -->
<?php if ( get_post_meta($postId,'route_map_name', true) == 'bodafon' ): ?>
<body>
<div id = "maproute" style = " width:100%; height:440px;"></div>
</body>
<!-- amlwch -->
<?php elseif ( get_post_meta($postId,'route_map_name', true) == 'amlwch' ): ?>
<body>
<div id = "maproute1" style = " width:100%; height:440px;"></div>
</body>
<?php endif; ?>
После каждого вызова ajax я вызываю функции, которые будут отображаться только на основе имени настраиваемого поля, как видно выше, поскольку каждая функция основана на уникальном ID
.
Также я вызываю свою первую функцию в событии .ready
, чтобы она загружалась до того, как произойдет какой-либо вызов AJAC.
JQuery:
$(document).ready(function() {
if ($("#maproute").length != 0) {
initmapbuilder();
}
});
$(document).ajaxComplete(function() {
initmapbuilder();
initmapbuilder1();
});
почему бы просто не вызвать
initmapbuilder1()
после успеха ajax