Блог

Главная - Вопросы по программированию - Всплывающее окно начальной загрузки работает при второй загрузке

Всплывающее окно начальной загрузки работает при второй загрузке

#javascript #sharepoint #bootstrap-4 #popper.js

#javascript #sharepoint #bootstrap-4 #popper.js

Вопрос:

Я создал веб-страницу в Sharepoint с помощью bootstrap, и содержимое заполняется с помощью javascript. Я использую всплывающее окно в таблице. Таблица генерируется с помощью javascript. Странно то, что всплывающее окно работает только после того, как я обновил страницу / перезагрузил ее с помощью F5.

Всплывающее окно за пределами таблицы работает нормально и при первой загрузке. Кроме того, код отлично работает без проблем на моем локальном компьютере, но на sharepoint он выходит из строя.

Вот некоторая инициализация кода:

 <script src="jquery-3.5.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

затем вызывается функция для генерации таблицы:

 <body onload="javascript: GenerateTable();">

за которым следует вызов popper:

 $(function () {
  $('.example-popover').popover({
  })
})

Результатом является таблица, которая содержит следующую строку с поппером:

 <td>Here is a question which needs a popper as info!amp;nbsp;amp;nbsp;
<div class="row justify-content-end">       
<a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info">Info</a>
</div>
</td>

Мне кажется, что это проблема с порядком загрузки, но я не могу понять, почему он работает локально, но не в Sharepoint.

Ответ №1:

Я импортирую js из CDN, он хорошо работает в моей среде. Тестовый код для вашей справки:

 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body >
  <td>Here is a question which needs a popper as info!amp;nbsp;amp;nbsp;
    <div class="row justify-content-end">       
    <a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info" data-placement="right">Info</a>
    </div>
    </td>
    
</body>
<script>

$(function () {
  $('.badge').popover();
 
})
</script>

Результат теста:

введите описание изображения здесь
Если вам нужна дополнительная помощь, пожалуйста, поделитесь полным кодом.

Комментарии:

1. Спасибо за ваш комментарий. Я спросил коллег-экспериментаторов, и он указал, что порядок загрузки скриптов не всегда известен. Таким образом, мы помещаем вызов popover в специальную функцию: function PopperCall(){$('[data-toggle="popover"]').popover();} затем эта функция активно вызывается после генерации вопросов <body onload="javascript: GenerateTable(); PopperCall();"> . Может быть, вы можете прокомментировать вопрос о порядке вызова javascript, и я могу пометить его как решение ?!

2. Просто опубликуйте свое решение, а затем отметьте его как ответ. Действительно, метод запуска динамически генерируемого элемента должен быть записан в методе динамически генерируемого элемента.

Ответ №2:

Проблема заключалась в порядке выполнения javascript. Поскольку код загружается из внешнего файла javascript, порядок загрузки кода неизвестен.

Таким образом, рекомендуется поместить функцию javascript из html-файла в явную функцию в файл javascript. Затем функция должна быть вызвана явно.

Файл Javascript:

 function PopperCall(){
$('.example-popover').popover({});
$('.popover-dismiss').popover({trigger: 'focus'});
$('[data-toggle="popover"]').popover();
}

В HTML загрузка выполняется:

 <body onload="javascript: GenerateTable(); PopperCall();">
Метки: