2

I'm using a static footer and a header. I set the contents of these using javascript. They're dynamic.

<body>
    <div data-role="page" id="page">

        <div data-role="header">
            <h1>App name</h1>
        </div><!-- /header -->

        <div data-role="content" id="content">  
            <p>Loading...</p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" id="menu1">Menu1</a></li>
                    <li><a href="#" id="menu2">Menu2</a></li>
                    <li><a href="#" id="menu3">Menu3</a></li>
                </ul>
            </div>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

I catch the click events on the menu items and I start out using $("#page").live('pageinit', mainMenu);

Then I'd like to change the $("#content") html using the following:

$.mobile.changePage( "main-menu.html", { transition: "slideup" } );

This however changes the entire page. How do I set it to only change the contents of #content?

sougonde
  • 3,438
  • 3
  • 26
  • 35
  • I could obviously use `$('#content').load('main-menu.html');` but this is bypassing jquery mobile and losing the ability to use their transitions! – sougonde Feb 09 '12 at 12:19

1 Answers1

2

It's not natively supported by JQM to only replace the #content html.

However, it's possible to roll your own system, basically writing your own functions that load the content.

$('#content').load('main-menu.html');

You'll have to use the structure I've described here: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

Community
  • 1
  • 1
sougonde
  • 3,438
  • 3
  • 26
  • 35