jQuery Mobile "Persistent Footer Navbar" buttons don't work until after refresh

Question

Environment

• jQuery 1.7.1
• jQuery Mobile 1.0 Final
• PHP w/ CodeIgniter 2.1.0
• LAMP
• Testing on:
  • GSM iPhone 4 with iOS 5.0.1
  • Kubuntu 11.10
    • Google Chrome 17.0.963.12 dev
    • Firefox 9.0.1

Problem

On loading the page, jQuery Mobile appropriately assumes that I want to view the first "page wrapper" and display that quite beautifully. However, when clicking the "Usage" link, nothing happens. By nothing, I mean that clicking it does not load the page with the appropriate ID, nor does it do a post-back/ajax call. However, if I refresh the page, I can then use the menu (including the Usage button and then the Transaction button while on the usage page) as it should work.

I have looked at the Chrome Developer Tools Network tab and nothing shows up (as it shouldn't because it's an anchor link and the content is already in the DOM). I have tested this on my iPhone and Chrome/Firefox (relevant version numbers above).

I'd really like to have these two pages on the same DOM but I suspect that splitting them up would work. I'd like to leave that as a last resort.

Question

Do I have some syntax error or am I possibly missing something key to the jQuery Mobile environment?

Code

Note: The page below is wrapped in a normal HTML>Head+Body skeletal structure, base_view, I have omitted that but if you would like to see it, just ask and I will append it. The only additions are a meta tag for viewport config, two Javascript script tags and two CSS link tags.

The link that points to the following page/DOM:

<a href="account_detail.php" data-role="button">Account Details</a>

The page with the persistent navbar:

<!-- ============ PAGE ONE ============ -->
<div id="transactions" data-role="page" class="ui-page"> 
<div data-role="header" data-position="fixed">
    <a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
    <h1>Transactions</h1>
</div> <!-- /header -->

<div id="content" data-role="content" class="ui-content">
    Hello World!
</div> <!-- /content -->

<div data-role="footer" data-position="fixed" data-id="account_details">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="#" class="ui-btn-active ui-state-persist">Transactions</a>
            </li>
            <li>
                <a href="#usage" data-transition="fade" data-prefetch>Usage</a>
            </li>
        </ul>
    </div> <!-- /navbar -->
</div> <!-- /footer -->
</div> <!-- /page one -->

<!-- ============ PAGE TWO ============ -->
<div id="usage" data-role="page" class="ui-page">
<div data-role="header" data-position="fixed">
    <a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
    <h1>Usage</h1>
</div> <!-- /header -->

<div id="content" data-role="content" class="ui-content">
    Hello World, Again!
</div> <!-- /content -->

<div data-role="footer" data-position="fixed" data-id="account_details">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="#transactions" data-transition="fade" data-prefetch>Transactions</a>
            </li>
            <li>
                <a href="#" class="ui-btn-active ui-state-persist">Usage</a>
            </li>
        </ul>
    </div> <!-- /navbar -->
</div> <!-- /footer -->

Thanks

Thanks in advance for taking the time to read this and for any help/feedback you can provide!

Answer 1

Sigh. I just didn't read the documentation properly. When linking to a page with multiple pages (multiple data-role="page" divs, or "page wrappers"), the rel="external" param has to be set on the link that points to the multi-page document.

So the solution was to change:

<a href="account_detail.php" data-role="button">Account Details</a>

To:

<a href="account_detail.php" data-role="button" rel="external">Account Details</a>