Bootstrap 3.3.7 - модальное «показанное» событие с перерывами - PullRequest
Новая
       9

Bootstrap 3.3.7 - модальное «показанное» событие с перерывами

0 голосов
/ 05 июля 2018

Мой модальный диалог Bootstrap отображается так, как задумано, каждый раз, когда я нажимаю, чтобы запустить его, проблема в том, что «показанное» событие не всегда срабатывает.

После того, как модал отображается, необходимо запустить функцию javascript, чтобы отобразить карту внутри одного из модальных DIV, но для того, чтобы это было возможно, модал (и, следовательно, его HTML) должен быть полностью отрендерен для что Javascript может вставлять элементы в DOM.
Чтобы убедиться, что модальное изображение полностью отрендерено, используется событие bs.modal.shown . Это событие вызывается только тогда, когда модал полностью построен, поэтому это событие используется для вызова функции, которая загружает карту.

Было очевидно, что это событие не всегда срабатывает, так как иногда, когда модал был запущен, карта не отображалась в модале. Помещение журнала в консоль для события bs.modal.shown показало, что это определенно событие, которое не запускается, а не сбой в функции, которая вызывается для отображения карты.

При использовании Chrome DevTools нет ошибок или предупреждений, отображаемых, когда указанное событие не срабатывает.

Может быть интересно отметить, что это событие срабатывает в 95% случаев на моем компьютере разработчика при отладке, но только в 50% случаев при развертывании в нашей тестовой среде веб-сервера IIS.

Мое приложение представляет собой ASP.Net MVC SPA, поэтому мой модальный HTML частично определен на странице макета: 

<div class="modal fade" id="modal-container" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="modalDiv">
        </div>
    </div>
</div>

А затем определяется частичное представление, которое вводится в модал: 

<div class="modal-body padding-sm">
@using (Html.BeginForm("PV_flowModelDialog", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">

Тогда в Javascript на модале у меня есть 

$('#modal-container').on('shown.bs.modal', function () {
      console.log("Modal container shown.")
      <....function calls here...>
})

Затем я использую обработчик событий «скрытый», чтобы подтвердить, что журнал модальный скрыт (в дополнение к тому, что модальный видимо скрыт). Это событие происходит последовательно: 

$('#modal-container').one('hidden.bs.modal', function () {
    console.log("hidden.bs.modal event.")
})

Итак, вопрос в том, что может вызывать показанное событие только с перерывами? Будем весьма благодарны за любые идеи о том, что может вызвать это, или о том, как можно продолжить расследование этого или обходного пути для обеспечения того, чтобы каждый раз происходило это (или эквивалентное) возгорание.

Спасибо!

Ответы [ 3 ]

0 голосов
/ 09 июля 2018

Хорошо, я внес ряд изменений, которые, по-видимому, решили эту проблему:

1) Возможно, основное упущение в моем первоначальном посте заключалось в том, что в конце моего «показанного» обработчика событий у меня была такая строка: $ (this) .off ('said.bs.modal'); Итак, в контексте: 

$('#modal-container').on('shown.bs.modal', function () {
      console.log("Modal container shown.")
      <....function calls here...>

      $(this).off('shown.bs.modal');
})

2) Я также обнаружил, что хотя обработчики Show и Shown были в моем частичном представлении (которое вводилось в модальное диалоговое окно BS), они не всегда запускались. Я переместил их из частичного представления в мой MVC Layout.cshtml. При этом события теперь срабатывали каждый раз без сбоев . Итак, теперь эта часть Layout.cshtml выглядит следующим образом: 

<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria- hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="modalDiv">
        </div>
    </div>
</div>

<script>
    $('#modal-container').on('show.bs.modal', function () {
        console.log('show.bs.modal');
    });

    var mapLoadCount = 0;

    $(document).on('shown.bs.modal', function () {
        console.log('shown.bs.modal');

        defineMapContent();
        loadmap();
        addInteractions();
    });
</script>

Иногда карта не загружается в модальный div при первом отображении модального диалога. Тем не менее, показанные и показанные события запускаются (это можно увидеть в журнале консоли). Если это не исчезнет, ​​я посмотрю, разрешит ли добавление короткую задержку между срабатыванием события и функциями в вызываемом событии.

0 голосов
/ 09 июля 2018

У меня была такая же проблема при использовании частичных представлений. Я загружал данные и модал через щелчок кнопки; однако это будет только один раз. Перезагрузка модальных / данных никогда не работала после первой попытки. Функция get была для родительского элемента, а событие click - для дочернего элемента. Я решил это, изменив событие нажатия кнопки на событие щелчка тела и использовал атрибут данных jQuery для хранения URL. Вот пример: 

                 $('body').on('click', '.modal-edit', function (e) {
                    $.get($(this).data("target"), { "_": $.now() }, function (data) {

                    $('<div id="modal-container-edit" class="modal fade">' +
                        '<div class="modal-content" id= "modalbodyEdit" >' +
                        data + '</div></div>').modal();
                });
            });

моя кнопка: 

 <button type="button" class="btn btn-sm modal-edit" data- 
     target="@Url.Action("Edit", "Bin", new { Id = m.id })">Edit</button>
0 голосов
/ 05 июля 2018

Убедитесь, что модал скрыт для запуска: 

<div class="modal fade" id="modal-containerl" tabindex="-1" role="dialog"  aria-hidden="true">
...