Мобильные переходы jQuery и опрос AJAX на главной странице

Question

Я пытаюсь использовать опрос AJAX с jQuery для обновления элемента span на бритве MasterPage в ASP.NET MVC3. На странице используется среда jQuery Mobile 1.0, которая украшает простые изменения вида (например, переход от / home к / about) с некоторой анимацией перехода.

Это код Javascript, который выполняет опрос, в то время как диапазон "unreadBubble" находится в теле - оба они определены в MasterPage!

<script type="text/javascript">
$(document).bind("pageinit", function poll() {
    setTimeout(function () {
        $.ajax({ url: "/Notification/GetUnreadNotificationsCount", 
                    dataType: "json",
                    success: function (data) {
                    $('#unreadBubble').text(data.UnreadCount);
                    poll();
                } 
            });
    }, 1000);
});

Итак, представьте, что у меня есть HomeController и NotificationController, которые используют MasterPage и предоставляют представление Index. Опрос AJAX работает с обоими представлениями и обновляет интервал каждую секунду, как и ожидалось. Как только я перехожу из одного представления в другое, диапазон переинициализируется со значением по умолчанию из MasterPage (пусто) и больше не обновляется. Интересно, что асинхронный метод GetUnreadNotificationsCount по-прежнему вызывается в NotificationsController неоднократно - диапазон просто не обновляется. Я также пытался предупредить тег span в JS, и он не был нулевым или чем-то еще.

Согласно документации, jQuery Mobile также загружает новые страницы с помощью AJAX для вставки этой необычной анимации перехода "SWOOSH". Кажется, это как-то мешает инициализации JS/DOM.

У вас есть идеи, как решить эту проблему? Должен ли я связываться с другим событием или я могу как-то принудительно обновить тег span?

Решение: это была проблема с кэшированием! Следующее помогло: добавьте class="command-no-cache" к вашей странице div и добавьте следующий JavaScript в MasterPage:

$(":jqmData(role=page)").live('pagehide', function (event, ui) {
if ($(this).children("div[data-role*='content']").is(".command-no-cache"))
    $(this).remove();

});

Answer 1

Я бы использовал pagebeforeshow, чтобы фактически связать событие, и pagehide, чтобы удалить событие.

Вы пробовали это вместо инициализации только один раз в событии pageinit?

ОБНОВЛЕНИЕ: некоторый код, например,

 <script type="text/javascript">
 var timer = null;
 $(":jqmData(role=page)").bind("pagebeforeshow", function() {
     timer = setTimeout(function() {
               $.ajax({ url: "/Notification/GetUnreadNotificationsCount", 
                  dataType: "json",
                  success: function (data) {
                     $('#unreadBubble').text(data.UnreadCount);
                  } 
               });
             }, 1000);
 }); 
 $(":jqmData(role=page)").bind("pagehide", function() {
     if (timer != null){
          clearTimeout(timer);
          timer = null;
     }
 });
</script>

Также исправлены некоторые другие "" опечатки "по пути, посмотрите и сравните с вашим кодом!

Надеюсь это поможет