jquery-mobilejquery-mobile-navbar

jquery mobile navbar links not refresh


<div data-theme="b" data-role="header" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
    <ul>
        <li><a href="list.html" data-transition="fade">List</a></li>
        <li><a href="relations.html" data-transition="fade">Relations</a></li>
        <li><a href="settings.html" data-transition="fade">Settings</a></li>
    </ul>
</div>

I use javascript to fill json response result in page content. But when I switch navbar links, browser(firefox) just show me the cached html with no data. Server log shows list.html and settings.html aren't requested at all. I searched and tried data-prefetch="true", data-dom-cache="true" or data-dom-cache="false", <meta http-equiv="pragma" content="no-cache" />,I got nothing. Every time I manually refresh the settings.html / list.html, json is filled, but the other list.html / settings.html turns out blank html with no data.

I hope there's a way when I hit the navbar link, browser could reload/refresh the whole page, especially the javascript do the ajax call and fill the data.


Solution

  • Try adding rel="external" to anchor tags. Beware that transitions might stop working.