jquery mobile header/footer

Question

I am having some no of jquery pages each having header and footer. How do i make it as single header and footer. (ie) Want to load the header/footer html files in the main page header/footer section.

Please advice.

Please find the page structure below....

<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/customScript.js"></script>  
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
</head> 

<body> 

<div data-role="page" id="page1">
    <div id="hdr">
        <!--Need to include header.html-->
    </div>  
    <div data-role="content">   
        <!--Content-->
    </div>
    <div id="ftr">
        <!--Need to include footer.html-->
    </div>

</div>

</body>
</html>

Thanks in advance....

first of all, you should have JQM scripts and style sheet links in ``. — Omar, Apr 03 '13 at 13:07
I use **php** on my mobile devs with jQuery mobile with a **header.php** file and another **footer.php**. Then i call them with `` on every needed file. — kevin, Apr 03 '13 at 13:09
how the php will work in mobile...? can u please provide some code... — Yesvinkumar, Apr 03 '13 at 13:16
@Yesvinkumar PHP works in the server so it is independent of the front end. Anyhow I guess you should read some web development introductory concepts. — Joqus, Apr 03 '13 at 13:32

score 3 · Answer 1 · edited May 23 '17 at 11:54

Here's a working example:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script>
        $(document).on('pagebeforeshow', '[data-role="page"]', function(){       
            $.mobile.activePage.find('[data-role="header"]').load("header.html", function(){ 
                $(this).parent().trigger('pagecreate');
            }); 
            $.mobile.activePage.find('[data-role="footer"]').load("footer.html", function(){ 
                $(this).parent().trigger('pagecreate');
            });  
        }); 
    </script>
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">

        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

header.html

<h3>
    Header
</h3>

footer.html:

<h3>
    Footer
</h3>

The trick here is to trigger pagecreate (not create) to style header and footer after content has been added through load function.

Read this article/answer to find a difference between

trigger('create')

and

trigger('pagecreate').

Basically, pagecreate will restyle whole page while create will style only content.

@Yesvinkumar, maybe you should mark it as the answer. – Scott Terry Nov 22 '14 at 14:32 — Scott Terry, Nov 22 '14 at 14:32

score 1 · Answer 2 · answered Apr 03 '13 at 13:08

1

You can use jQuery load():

$(document).ready(function() {
    $("#hdr").load("header.html"); 
    $("#ftr").load("footer.html"); 
});

answered Apr 03 '13 at 13:08

Eli

14,779
5
59
77

i used the same. But the styles are not updated even i add trigger('create'). Can u please provide some code samples if any...? Many Thanks... – Yesvinkumar Apr 03 '13 at 13:15

score 1 · Answer 3 · answered Apr 03 '13 at 13:32

Add header

Checks if there is no header and then .append() the header .before() div data-role=content.

$(document).on('pagebeforeshow', function () {
 if ($(this).find('[data-role=header]').length == 0) {
   $('[data-role=content]').before('<div data-role="header"><h1>Page header</h1></div>');
   $('[data-role=page]').trigger('pagecreate');
 }
});

Add footer

Checks if there is no footer and then .append() the footer .after() div data-role=content.

$(document).on('pagebeforeshow', function () {
 if ($(this).find('[data-role=footer]').length == 0) {
  $('[data-role=content]').after('<div data-role="footer"><h1>Page footer</h1></div>');
  $('[data-role=page]').trigger('pagecreate');
 }
});

score 0 · Answer 4 · answered Dec 05 '14 at 09:55

var currentPage=$.mobile.activePage;

$('<div data-role="header" id="myheader">
        <a href="" >Home</a>
        <a href="" >Back</a>
    </div>').prependTo(currentPage).trigger('create');

$('<div data-role="footer" id="myfooter">
        <a href="">About Us</a>
    </div>').appendTo(currentPage).trigger('create');

jquery mobile header/footer

4 Answers4