Onload не работает после вызова AJAX

Итак, в основном у меня есть вызов 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);
            }
        });
    });
});

почему бы просто не вызвать initmapbuilder1() после успеха ajax

95faf8e76605e973 08.08.2018 09:26

@emineminems спасибо за ответ, ну, это основано на том, какое имя настраиваемого поля выделено больше, чем только эти 2, это просто пример.

Ylama 08.08.2018 09:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
1 363
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

$('#load_map').html(data);

Это удалит все события внутри "#load_map". Проверьте, восстанавливаются ли события после этого

привет @ShishirArora, но я использую это в вызове Ajax, он работает, его событие onload не происходит после того, как AJAX не работает, даже если он возвращает правильные данные, просто после вызова AJAX страница не загружается, поэтому функция выше php тогда не работает.

Ylama 08.08.2018 09:33

ajax не загружает страницу, поэтому загрузка тела не будет вызываться после вызова ajax

Shishir Arora 08.08.2018 09:38
Ответ принят как подходящий

Итак, это работает с использованием метода 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();
});

Другие вопросы по теме