Question

I have a single page jQuery mobile application that consists of several list views which I populate dynamically. Whenever I first visit a page they are loaded properly and all the formatting looks great, though if I navigate to another page then return to it, the page will have everything ‘push’ upward by about 50%.

This problem only happens when I click on a link similar to something like

<a href="#mypagewithlist">something</a>

instead of pressing the back button (which shouldn’t cause a page() call).

Here is an example of what some of the pages would be:

<div data-role="page" id="pagewithlist">
    <div data-role="content">
        <ul data-role="listview" id="mylistview"> </ul>
        <!-- I use jQuery Templates to populate the above list -->
    </div>
</div>
<div data-role="page" id="pagewithlink">
    <div data-role="content">
        <a data-role="button" href="#pagewithlist">Go to page with list</a>
    </div>
</div>

At the first load of the page I pull in data from an API and then use that data to populate the empty list with jQuery templates.

Any ideas how to work around this issue?

Answer 1

What is the data-url of your original page (the one you’re returning to using the link)? Have you tried assigning an id to that page (div) and changing the link to <a href="#mypagewithlist">something</a>? If the link and the page’s data-url don’t match, jQM fetches the original page again and it is then loaded twice in the DOM, which might cause problems.