StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery Mobile transitions and AJAX Polling on a MasterPage
text
Body
copied!<p>I am trying to use AJAX polling with jQuery to update a span element on a razor MasterPage in ASP.NET MVC3. The page uses the jQuery Mobile 1.0 framework that adorns simple view changes (like navigating from /home to /about) with some sort of "transition" animation.</p> <p>This is the Javascript code that does the polling, while the "unreadBubble" span is located in the body - both are defined in the MasterPage!</p> <pre><code><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); }); </code></pre> <p></p> <p>So, imagine I have a HomeController and a NotificationController that both use the MasterPage and provide an Index view. The AJAX polling works on both views and updates the span every second as expected. As soon as I navigate from one view to another though, the span gets re-initialized with its default value from the MasterPage (empty) and doesn't update anymore. Interestingly the async GetUnreadNotificationsCount method is still called on the NotificationsController repeatedly - the span just doesn't update. I also tried to alert the span tag in JS and it wasn't null or something.</p> <p>According to the <a href="http://jquerymobile.com/test/docs/api/events.html" rel="nofollow">documentation</a>, jQuery Mobile also loads new pages with AJAX to insert this fancy "SWOOSH" transition animation. This seems to somehow disturb the JS/DOM initialization. </p> <p>Do you have any idea how to resolve this? Should I bind to another event or can I somehow force the span tag to update?</p> <p><strong>Solution</strong>: It was a caching problem! The following did the trick: Add <em>class="command-no-cache"</em> to your page div add the following JavaScript to the MasterPage:</p> <pre><code>$(":jqmData(role=page)").live('pagehide', function (event, ui) { if ($(this).children("div[data-role*='content']").is(".command-no-cache")) $(this).remove(); </code></pre> <p>});</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload