2

I'm not asking how to get a fixed footer.

I've a structure with both multi-page and single page. I'd like to know how to use only one html fragment for the whole site. I'm really looking for a solution because I'd like to edit the footer in only one place and see the modification in all pages.

Thanks.

EDIT: I'm developing a mobile application to be wrapped with PhoneGap, so I'm looking for client side solutions.

SOLUTION (pushing together the solutions by @maco and adapting them to my case):

$(function() {
// load the templates
$('body').append('<div id="module"></div>');
$('#module').load('templates/module.html :jqmData(role="page")',function() {

    // save the actual footer and header
    var hdhtml = $('#module :jqmData(role="header")').clone();
    var fthtml = $('#module :jqmData(role="footer")').clone();

    // removes the header/footer
    $(':jqmData(role="header")').remove();
    $(':jqmData(role="footer")').remove();

    // load at the correct place the header/footer
    $(':jqmData(role="page")').prepend(hdhtml).append(fthtml).page().trigger('pagecreate');

    // delete the temporary div
    $($(this).html()).replaceAll(this).attr('id', 'module');
});

// set the class "ui-btn-active" for the active page
$(document).live('pagecreate', function() {
    // get the current page
    var currentPage = window.location.pathname;
    currentPage = currentPage.substring(currentPage.lastIndexOf("/") + 1, currentPage.length).split("&")[0];

    // remove the class from the footer
    $($.mobile.activePage + ':jqmData(role="footer") li a')
            .removeClass('ui-btn-active ui-state-persist');

    // add the class to the link that points to the particular href
     $($.mobile.activePage + ':jqmData(role="footer") li a[href="' + currentPage + '"]').addClass('ui-btn-active ui-state-persist');

});
});
Hamal000
  • 516
  • 1
  • 5
  • 25

3 Answers3

1

module.html

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>module header</h1>
            </div>
            <div data-role="footer" class="ui-bar">
                <h3>module footer</h3>
            </div>
        </div>
    </body>
</html>

module.js (load this in all pages)

function module() {
    var fthtml = $('#module :jqmData(role="footer")').clone();
    $(':jqmData(role="footer")').remove();
    $(':jqmData(role="page")').append(fthtml).page().trigger('pagecreate');
}

$(function(){
    $('body').append('<div id="module"></div>');
    $('#module').load('YOUR_module.html_PATH :jqmData(role="page")',function(){
        $($(this).html()).replaceAll(this).attr('id','module');
        module();
    });
    $(':jqmData(role="page")').live('pageinit',module);
});

YOUR_module.html_PATH (eg. "../module.html", "../module/module.html")

maco
  • 376
  • 1
  • 9
  • Ok, now it's working: I have deleted the call to .live and inverted the calls to module() and replaceAll() inside the anonymous function. However I'm not so convinced to adopt this way because it also influences dialogs. – Hamal000 Jul 04 '12 at 07:58
  • Indeed, this way doesn't make dialogs-footer. Do you want to make it? I'm trying to make this way utilized also for dialogs. – maco Jul 04 '12 at 15:03
  • No this is not my aim. I commented that because the dialogs are not displayed correctly (they become pages and not anymore dialogs). – Hamal000 Jul 04 '12 at 21:03
  • Instead, do you know how to pass arguments to the template page? For example it could be useful to set dynamically the class ui-btn-active in the footer's nav. – Hamal000 Jul 04 '12 at 21:32
  • In my [sample](http://jsfiddle.net/qpxmn/1/), js( : .live('pagechange') ) is adding "ui-btn-active" to button being linked to active page in footer's nav. – maco Jul 05 '12 at 15:36
  • 1
    Yes, it works in a multi-page template, but I have both single pages and multi-pages; the href in the nav of the footer point to the .html pages and not to the #id pages. – Hamal000 Jul 05 '12 at 20:24
  • I think by using [other attributes](http://jsfiddle.net/qpxmn/2/) instead of "href", you can solve this issue. – maco Jul 06 '12 at 01:43
0

If you are generating HTML pages server side, You can use your server language (php,java,node) templating capabilities to insert a HTML from common file.

i.e. for jsp 

    </div>
    <jsp:include page="scripts/footer.jsp" />
    .....
</body>

And if you are doing heavy stuff in javascript than use any javascript templating engine. ie.e http://handlebarsjs.com/

Nachiket
  • 6,021
  • 6
  • 41
  • 47
  • Thanks, I know it. I wouldn't like to use any server side approach, because I plan to wrap this application with PhoneGap. – Hamal000 Jul 01 '12 at 07:38
  • If you see later part of my answer I have specified, handlebar.js for JavaScript templating. I will put together demo later. – Nachiket Jul 01 '12 at 15:31
0

I solved this by creating partial footer view and calling it where I need it: @Html.Partial("Footer")

user3616770
  • 1