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?

Answer 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.

Answer 2

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