我正在尝试使用带有 jQuery 的 AJAX 轮询来更新 ASP.NET MVC3 中剃刀 MasterPage 上的 span 元素。该页面使用 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(空)中的默认值重新初始化,并且不再更新。有趣的是,仍然在 NotificationsController 上反复调用异步 GetUnreadNotificationsCount 方法 - 跨度只是不更新。我还尝试提醒 JS 中的 span 标签,它不是 null 什么的。
根据文档,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();
});