jquery mobile replace just the content div

Question

i'm working with jquery mobile and i love the multiple page concept, where you could replace the hole page with another page by just refer to their id.

now my app has a navbar (of course), and i hate that when i'm clicking on a link in the navbar the whole page is swiping to the left (inclusive the navbar) and the other page is coming from the right.

i just want to replace the content div, the navbar should be fixed on the bottom without refreshing the whole time! do you know what i mean? if i'm just refer to the content div id, it's not working like i refer to the page id.

i hope you know what i mean. so how can i handle this?

Solution 1

One way of doing that would be to override the click event of the link, and replacing the content of the div (the target) with new content. Doing so in jQuery is trivial, e.g.

 $('#replacement-target').html( $('#source-content').html() ); 

To play along with jQuery, you may need to call refresh on the content to ensure that it is properly styled by the framework.

See this jsFiddle for an example.

Solution 2

$('#replacement-target-page-id div[data-role="content"]').replaceWith(
    function(return$('#source-content-page-id div[data-role="content"]').contents();)

Comments

[John Brunner]

thanks. but at your code you refresh also the whole page, not just the content div?

[John Brunner]

thanks. my footer is fixed, but i find it very annoying that when you click on a button in the navbar, the whole page (including the navbar) are refreshing. i want the navbar to be fixed, like iOS apps (like the ipod app) having fixed navbars.

[Ryan]

It just replaces the content of one div with the content of another. The footer moves because the content is not the same size. To work around that, you could use a fixed footer, i.e. <div data-role="footer" data-position="fixed">

[bmurmistro]

Take a look at the link above, have you tried setting data-position="fixed" on your header? Or you could use a persistent navbar. jquerymobile.com/test/docs/toolbars/footer-persist-a.html