[JQuery Mobile]Mutlipage template with common parts in external HTML files

Question

I'm very new to JQuery, and have a project to create a small webapp i could use mostly with my mobilephone. I've read the following post https://stackoverflow.com/a/14148550/2943045 about the distinction between MultiHTMLPage and MultiPage, and decided to go with a muultipage tempate. Nevertheless, i'd like to store in independant HTML files the common parts (header, navbar, footer etc), so i tried to generate them on each page load.

Am i doing it right?
I'm having trouble with the right panel (id=options), the attributes are not properly applied (seems to me that the left panel attributes are applied instead).

Now the code:

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile Demos - Slide Panel</title>
        <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>
        <!--Demo source: http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html -->

<script>
$(document).on("pagebeforecreate", function() {

        $(document).on('pagebeforeshow', function() {
            var PageName = $.mobile.activePage.attr( "id" );
            console.log( "Opening " + PageName );

            console.log('Set header');
            $("div[data-role='header']").attr( {
                'data-theme':'d',
                'data-position':'fixed'
            });
            $.get( "header.html", function( data ) {
                var HDiv = $("div[data-role='header']");
                HDiv.html(data);
            });

            console.log('Set left panel');
            $("div[data-role='panel'][id='nav-panel']").attr( {
                'data-position-fixed': 'false',
                'data-display': 'reveal',
                'data-theme': 'd'
            });
            $.get( "left-panel.html", function( data ) {
                var HDiv = $("div[data-role='panel'][id='nav-panel']");
                HDiv.html(data);
            });

            console.log('Set right panel');
            $("div[data-role='panel'][id='options']").attr( {
                'data-position-fixed': 'false',
                'data-display': 'overlay',
                'data-theme': 'd'
            });
            $.get( "right-panel.html", function( data ) {
                var HDiv = $("div[data-role='panel'][id='options']");
                HDiv.html(data);
            });

            console.log('Set footer on opened page');
            $("div[data-role='footer']").attr( {
                'data-theme': 'd'
            });
            $.get( "footer.html", function( data ) {
                var HDiv = $("div[data-role='footer']");
                HDiv.html(data);
                $("#"+PageName).trigger('pagecreate');/*Reload all styles*/
            });
        });

});


</script> 
    </head>
    <body>

        <div data-role="page" id="main" class="ui-responsive-panel">

                <div data-role="header" class="header"></div>


                <div data-role="content">
                    <h2>Page 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis blandit tellus id viverra. Maecenas mollis, quam et accumsan fermentum, erat sapien blandit eros, eu malesuada magna dolor sit amet felis. Vivamus ornare ante in mi aliquet viverra. Nam non massa eu lorem placerat mollis. Mauris bibendum, nulla non blandit iaculis, massa dui blandit tellus, id rhoncus felis libero in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque imperdiet scelerisque mattis. Praesent vel pulvinar leo.</p>
                    <p>Morbi laoreet faucibus tempor. Praesent et enim nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam non diam vitae felis egestas aliquet imperdiet at tellus. Aliquam erat volutpat. Vestibulum auctor sodales lobortis. Morbi eget imperdiet metus. Ut id velit non ligula lacinia cursus in vitae risus. Nam pharetra ullamcorper quam sit amet dictum. Morbi egestas urna vitae leo porta, at tristique risus varius. Ut dictum lacus sed viverra eleifend.</p>
                </div><!-- /content -->


                <!-- left panel (menu) -->
                <div data-role="panel" id="nav-panel" class="left-panel" data-position="left"></div>
                <!-- /panel -->

                <!-- right panel (options)-->
                <style>
                    .userform { padding:.8em 1.2em; }
                    .userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
                    .userform label { display:block; margin-top:1.2em; }
                    .switch .ui-slider-switch { width: 6.5em !important }
                    .ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
                </style>
                <div data-role="panel" id="options" class="right-panel" data-position="right"></div>
                <!-- /panel -->

                <!-- Footer-->
                <div data-role="footer"></div><!-- /footer -->

        </div><!-- /page -->


        <!-- Start of second page: #Userpanel -->
        <div data-role="page" id="userpanel" data-theme="d" class="ui-responsive-panel">

                <div data-role="header"></div>

                <div data-role="content">   
                    <h2>Page 2</h2>
                    <p>Pellentesque at tristique diam. Aenean consectetur, ante in tincidunt tincidunt, ante ligula bibendum velit, ultricies rutrum metus dui vitae nibh. Nulla vestibulum sollicitudin metus eu mollis. Integer risus tellus, tempor ac ipsum sit amet, dapibus luctus nisl. Morbi consectetur ac justo eu suscipit. Vestibulum placerat, ante sed mollis dictum, risus leo ornare arcu, vel auctor turpis nisi eu felis. Sed purus nunc, faucibus et urna in, pretium molestie massa. Donec fermentum vehicula nunc. Etiam auctor gravida lectus ac ullamcorper. Morbi molestie nunc id turpis semper, porta placerat turpis accumsan. Donec vel accumsan purus. Nam facilisis, nulla a placerat mattis, ante ipsum gravida sapien, et volutpat elit mauris at odio. Nunc placerat libero non adipiscing interdum. Praesent in enim eget erat auctor sagittis at id lacus. Proin fringilla lorem vitae porttitor suscipit.</p>
                    <p>Nulla molestie tortor eu felis mattis, sit amet facilisis arcu congue. Suspendisse dictum turpis id tristique tempus. Praesent vulputate aliquam ante, a egestas risus suscipit et. Curabitur leo lorem, laoreet eu malesuada vel, congue id ligula. Phasellus facilisis risus risus. Mauris sed lectus ut risus dapibus consectetur. Nunc non elit arcu. Duis nibh leo, tempor ut accumsan molestie, mollis non justo. Nam in eros in neque pharetra eleifend id ut metus. In facilisis id mauris non cursus. Nunc vitae augue non elit vehicula elementum. Proin sapien massa, convallis et nibh a, convallis congue ligula. Phasellus feugiat, ipsum ac consectetur convallis, ligula tortor egestas quam, in adipiscing tortor arcu id felis.</p>
                </div><!-- /content -->

                <!-- left panel (menu) -->
                <div data-role="panel" id="nav-panel" class="left-panel" data-position="left"></div>
                <!-- /panel -->

                <!-- right panel (options)-->
                <style>
                    .userform { padding:.8em 1.2em; }
                    .userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
                    .userform label { display:block; margin-top:1.2em; }
                    .switch .ui-slider-switch { width: 6.5em !important }
                    .ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
                </style>
                <div data-role="panel" id="options" class="right-panel" data-position="right"></div>
                <!-- /panel -->

            <!-- Footer-->
            <div data-role="footer"></div><!-- /footer -->


    </body>
</html>

Header.html

<h1>My App</h1>
<a href="#nav-panel" data-icon="bars" data-theme="d" data-iconpos="notext">Menu</a>
<a href="#options" data-icon="gear" data-theme="d" data-iconpos="notext">Add</a>

left-panel.html

<ul data-role="listview" data-theme="d" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
    <li data-icon="delete" style="margin-top:13px;">
        <a href="#nav-panel" data-rel="close">Close menu</a>
    </li>
    <li data-filtertext="Home">
        <a href="#main">Home</a>
    </li>
    <li data-filtertext="User Panel">
        <a href="#userpanel">User Panel</a>
    </li>
    <li data-filtertext="Menu Item 2">
        <a href="#">Menu Item 2</a>
    </li>
</ul>

right-panel.html

<form class="userform">
    <h2>Options</h2>

    <div class="switch">
    <label for="status">Audio</label>
    <select name="status" id="slider" data-role="slider" data-mini="true">
        <option value="off">ON</option>
        <option value="on">OFF</option>
    </select>
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#options" data-rel="close" data-role="button" data-theme="d" data-mini="true">Cancel</a></div>
        <div class="ui-block-b"><a href="#options" data-rel="close" data-role="button" data-theme="d" data-mini="true">Save</a></div>
    </div>
</form>

footer.html

<h4>Page Footer</h4>

Thanks you guys in advance for your help and advices,

score 0 · Accepted Answer · answered Oct 31 '13 at 22:32

I am keen with the idea of loading page content from external files. I have followed a similar approach when implemented a hybrid mobile app and web app using jqm, handlebars and ember. I'll provide some information on what i did, that may help you.

1.I kept not only common parts of pages in external files, but the content of templates/pages as well. You could possibly store some or all of your page content in separate files. Then you could lazy load them or simply load them at the very beginning.

2.The loading of the templates/pages code/html happened at the beginning in a separate js file. No need to clutter the main page with logic related to loading the external data, especially as this will increase as your pages increase.

3.The data retrieved from the external files was stored in variables. Specifically in my case it was then handed over to the ember-handlebars templates data structure, that is used to hold all templates at runtime. You could apply this in your case, no need, or potential issue, to request the data for all pages on pagebeforeshow which will be called every time you visit a page. The data should be retrieved once and used as many times as you require. So once you retrieve your data from the external files try to store them in a datastructure i.e. an associative array. Then you can append the html at any page required any time. You could write up a generic code that uses pagebeforeshow callback to check the current page and append the data that you have already stored. This way everything will run faster and smoother.

In general having separate files with template/page content gives you a lot of flexibility such as ease of maintenance, ability to reuse, lighten up the main page, lazy load content, replace implementations.

One last point related to the attributes you try to append, i think it would be best to place them along the jqm code instead of trying to append them dynamically. I do not see the benefit of that. You will have some overhead and complexity in your code especially as your pages increase, with nothing to gain really.

[JQuery Mobile]Mutlipage template with common parts in external HTML files

1 Answers1