CODEWITHSUNDEEP
jquerymobilejquery-mobile
John Brunner
John Brunner

Reputation: 2872

jquery mobile replace just the content div

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?

Upvotes: 6

Views: 10688

Answers (4)

microtich
microtich

Reputation: 1

What has worked for me is to keep the header/navbar off the pages by using external headers. This way, I can still use jquery page transitions and keep the navbar static.

External toolbars are documented here - http://demos.jquerymobile.com/1.4.4/toolbar-external/

I had to initialize the navbar and any other component I to kept out of the page DOM. in this case the menu panel. Here is what the code looks like as per jqm documentation:

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="menu-panel"></div>
<div data-role="page" id="home">
    <div role="main" class="ui-content"></div>
</div>

<script>
$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
    $( "[data-role='panel']" ).panel();
});
</script>

Upvotes: 0

MadNik
MadNik

Reputation: 7793

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

Upvotes: 1

bmurmistro
bmurmistro

Reputation: 1080

Another solution would be to turn off the transition effect $.mobile.defaultPageTransition = 'none';

and use fixed footer. http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

Ryan's suggestion works too. Just keep in mind that if you decide to override the click event, and bypass the jqm navigation model you will have limited access to the jqm page events which can be extremely handy. It really just depends on what your app's needs are.

Upvotes: 0

Ryan
Ryan

Reputation: 28207

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.

Upvotes: 3

Related Questions