0

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?

Community
  • 1
  • 1
Nigel Johnson
  • 522
  • 1
  • 5
  • 21
  • 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](http://stackoverflow.com/questions/4439651/sitemesh-or-tiles) – Nathan Dec 06 '13 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 Dec 06 '13 at 13:39
  • Upcoming JQM 1.4.0 (currently at RC1) will support Panel outside of pages. Checkout release notes: http://jquerymobile.com/blog/2013/10/24/jquery-mobile-1-4-0-rc1-released/ – Nirmal Patel Dec 06 '13 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 Dec 06 '13 at 16:21

1 Answers1

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
Ajeet Lakhani
  • 3,768
  • 2
  • 22
  • 37