0

jQuery で AJAX ポーリングを使用して、ASP.NET MVC3 の razor MasterPage のスパン要素を更新しようとしています。このページでは、単純なビューの変更 (/home から /about への移動など) をある種の「遷移」アニメーションで装飾する jQuery Mobile 1.0 フレームワークを使用しています。

これはポーリングを行う 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);
});

したがって、MasterPage を使用し、Index ビューを提供する HomeController と NotificationController があるとします。AJAX ポーリングは両方のビューで機能し、期待どおりに毎秒スパンを更新します。ただし、あるビューから別のビューに移動するとすぐに、スパンは MasterPage のデフォルト値 (空) で再初期化され、更新されなくなります。興味深いことに、非同期の GetUnreadNotificationsCount メソッドはまだ NotificationsController で繰り返し呼び出されています。スパンは更新されません。また、JS で span タグを警告しようとしましたが、null などではありませんでした。

ドキュメントによると、jQuery Mobile は AJAX を使用して新しいページも読み込み、この手の込んだ「SWOOSH」遷移アニメーションを挿入します。これは、何らかの形で JS/DOM の初期化を妨げているようです。

これを解決する方法はありますか？別のイベントにバインドする必要がありますか、またはどうにかしてスパン タグを強制的に更新できますか?

解決策: キャッシュの問題でした。以下はトリックを行いました: 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();

});

4

1 に答える 1

0

実際にイベントをバインドするには 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>

また、途中でいくつかの「タイプミス」を修正しました。見て、コードと比較してください!

お役に立てれば

于 2011-12-02T11:59:52.133 に答える