Question

I have a JQuery Mobile app with two pages: page1 and page2

On page1, I am redirecting the user to page2 via the following code:

$.mobile.changePage("/home/page2/", { transition: "slide" });

Page2 has three data-role="page" elements in it. Each of these pages has the following in the footer:

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar">
        <ul>
          <li><a href="#screen1">Screen 1</a></li>
          <li><a href="#screen2">Screen 2</a></li>
          <li><a href="#" class="ui-btn-active">Screen 3</a></li>
        </ul>
    </div>
</div>

If I navigate directly to /home/page2 the tabs work fine. However, when I redirect the user to page2 via changePage(), the tabs do not work. What would cause this?

Answer 1

From the jQuery Mobile documentation:

Linking within a multi-page document

It’s important to note that if you are linking from a mobile page that
was loaded via Ajax to a page that contains multiple internal pages,
you need to add a rel=”external” or data-ajax=”false” to the link.
This tells the framework to do a full page reload to clear out the
Ajax hash in the URL. This is critical because Ajax pages use the hash
(#) to track the Ajax history, while multiple internal pages use the
hash to indicate internal pages so there will be conflicts in the hash
between these two modes.

changePage() inherently uses Ajax to load the page and that is the cause of your problem, because only #screen1 gets loaded.

If your app UI and logic allow you make your redirect from Page1 to Page2 with a link:

<a href="page2.html" rel="external" data-transition="slide">Go to Page 2</a>

If you have to redirect programmatically consider splitting the multipage Page2 into separate JQM pages (e.g. page21.html, page22.html, page23.html) and link them appropriately or produce your content dynamically when user clicks on navbar tabs.