Мобильный диалог jQuery при загрузке страницы

Question

Работаю над моим первым приложением jQuery Mobile. Существует значение localStorage, которое должно иметь значение во всем приложении, поэтому я подключился к событию pageshow, чтобы проверить это значение:

$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
    if (getValue() == null) {
        // show the dialog
        $.mobile.changePage("#dialog");
    }
});
});

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

На этой первой странице кажется, что открытие диалогового окна вызывает запуск просмотра страниц (что странно, учитывая мой селектор), что, в свою очередь, вызывает другое диалоговое окно. У кого-нибудь есть совет, как обойти это, или лучший способ обойти все это?

ОБНОВЛЕНИЕ № 1: Я пытался

$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );

но это имело тот же эффект, что и моя первоначальная проблема, когда он запускает диалоговое окно, затем скрывает его, а затем показывает его снова. Похоже, что запуск диалогового окна вызывает событие pagehow, хотя я пытался отфильтровать это в своем селекторе. Обратите внимание, что если вы удалите опцию перехода: "нет", диалоговое окно не появится вообще.

ОБНОВЛЕНИЕ № 2: Я также попытался создать пустую начальную страницу, а затем сделать простой переход страницы

$.mobile.changePage("#mypage");

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

ОБНОВЛЕНИЕ № 3: Я изменил свой селектор, где я присоединяю слушателя просмотра страниц. Вместо того, чтобы выбирать где data-role="page", я выбираю конкретные страницы по их идентификатору. Затем я перепробовал оба подхода, описанных в моих предыдущих двух обновлениях, но он все еще работает неправильно. Во-первых, когда я пытаюсь обновить начальную страницу с помощью allowSamePageTransition, кажется, что pagehow запускается дважды, потому что диалоговое окно запускается дважды. Затем, когда я пытаюсь использовать пустую начальную страницу, а затем сразу же после того, как я присоединяю слушателя подкачки страниц, выполняю перенаправление, ничего не происходит, и диалог никогда не появляется. Если я перехожу на любую другую страницу, диалог работает, как и ожидалось. Я не понимаю, почему эта первая страница так хлопотна.

Answer 1

Установите временной интервал для отображения диалогового окна, а не вызывайте его после показа страницы.

$(document).on('pageshow', '#myPage' ,function () {
 if (getValue() == null) {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
 }
});

Таким образом, диалоговое окно появится на pageshow событие и только один раз.

Обновить

Я нашел эту интересную диаграмму событий jQueryMobile в этом блоге. Это объясняет, почему диалог или всплывающее окно запускаются дважды на первой странице, а не на остальных страницах в случае многостраничной структуры. Кажется, он срабатывает, когда страница готова в DOM, и снова, когда она включена. pageshow, Установка таймаута предотвращает запуск диалога pageinitи, следовательно, пропускает это событие до pageshow срабатывает.

Источник изображения / диаграммы: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html

Answer 2

Я использовал "pagecreate", и это, кажется, решило мою проблему (пока...)

$(document).on('pagecreate', "#page-formyID", function () {

//whatever

});

Answer 3

Скорее всего, на первой странице это событие уже вызывается при выполнении вашего кода. Что объясняет, почему вы ничего не получаете только на первой странице.

Что касается вашего второго пункта, это нормально, так как changePage "изменит" страницу на диалоговое окно, и как только вы закроете диалоговое окно, она вернется на предыдущую страницу. Таким образом, if выполняется 2 раза.

Я предлагаю, чтобы при первом входе на первую страницу вы могли повторно перейти на ту же страницу сразу после регистрации обратного вызова для события pagehow.