JQuery Mobile, mutlipage HTML5 and a common menu

Question

I'm probably thinking about this 'oldschool' but what am I missing?

I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.

I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.

In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.

My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:

<div data-role="page">
    <div data-role="header">
        <h1>MyApp</h1>
    </div>
    <div data-role="content">
        <center>
            <p>This is page 2. <a href='#' onclick="alert('Woooo!'); return false;">Click me</a></p>
        </center>
    </div>
</div>

Here is my demo code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script>
        function handlePageLoaded() {
            $('#loadPage2').on("click",function(){
                $.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
                // Tried these as well:
                //$.mobile.loadPage("pages/page2.php");
                //$('#main_content').load("pages/page2.php");
                alert ("#loadPage2.onClick()");
                return false;
            });
        };
        $(document).ready(handlePageLoaded);
    </script>
    <title>MyApp</title>
  </head>
<body>
    <div data-role="page" id="application">
        <div data-role="panel" id="menu" data-display="overlay">
            <center>
            <a href="#application" data-rel="close" data-role="button" data-inline="true">Close</a><br />
            <a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
            </center>
        </div><!-- /panel -->

        <div data-role="header">
            <h1>MyApp</h1>
            <a href="#menu" data-icon="gear" class="ui-btn-left">Me</a>
        </div>
        <div id="main_content" data-role="content">
            <center>
                <p>This is the landing page.</p>
            </center>
        </div>
        <div data-role="footer"><span class="ui-title" /></div>
    </div>
</body>
</html>

I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.

So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?

It sounds like you would like a decorator that is applied to each page and served when a user loads a page. For my pages I use Sitemesh but others use Tiles. See the question posted here. Using Decorators — Nathan
– Nathan, Commented Dec 6, 2013 at 13:33
That doesn't look like what I want. I'm after a standard multipage app, just with a common menu that I don't have to update in each page. — Nigel Johnson
– Nigel Johnson, Commented Dec 6, 2013 at 13:39
Upcoming JQM 1.4.0 (currently at RC1) will support Panel outside of pages. Checkout release notes: jquerymobile.com/blog/2013/10/24/… — Nirmal Patel
– Nirmal Patel, Commented Dec 6, 2013 at 13:53
Interesting, I may have to wait until the documentation on panels is also release, moving the panel outside the page on the RC just navigates to it when used (i.e. data-display="overlay" is not honoured). Probably missing something again. — Nigel Johnson
– Nigel Johnson, Commented Dec 6, 2013 at 16:21

Ajeet Lakhani · Accepted Answer · 2014-07-30 17:08:25Z

0

you can use $.get to get common header

  $.get('header.html', {}, function(response){ 
   $('div#nav').append(response); 
   });

it will load common header in this div

 <div id="nav" class="navcontain">    
</div

answered Jul 30, 2014 at 17:08

Ajeet Lakhani

3,8883 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Mobile, mutlipage HTML5 and a common menu

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related