nav-bar element disappears when using data-transition and push.js

Question

I'm using Ratchet to build a prototype for a mobile app. I have a

<nav class="bar bar-tab bar-footer">
...
</nav> 

element in page A and page B.

When using data-transition from page A to page B (using push.js), the element disappears.

Another element

<header class="bar bar-nav">
...
</header>

is displaying in both page A and B. Any idea?

Answer 1

Same issue, If I refresh page B, the menu will appear again.

Answer 2

Had a similar issues with ratchet v2.0.2.

My case: two pages A and B. When transitioning from A to B the footer would not display. A refresh on B would display the footer. Page A did not have a bar-footer, page B did.

Reading through the docs I've found the statement that bars are updated based on their presence in the original page.

So the workaround: make sure that all pages have the bar blocks when the transition is made with push.js

Answer 3

Did you have

<nav class="bar bar-tab bar-footer">
...
</nav> 

in

<div class="content">

block?

Try use this structure:

<header class="bar bar-nav">
...
</header>
<div class="content">
...
</div>
<nav class="bar bar-tab">
...
</nav>