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

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

0 голосов
/ 02 декабря 2011

Я пытаюсь использовать опрос 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();
* * 1 022});

1 Ответ

0 голосов
/ 02 декабря 2011

Я бы использовал 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>

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

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

...