5

I want to have the same header and footer on all pages on my jquery mobile app and control it using a different file for example like footer.html. This is easy to do use PHP include but I can't because I am planning on using this app with phonegap.

Searching around I found using 

  <div data-role="footer">
<div class="footerExt"></div>
  </div>

and javascript

$('.footerExt').load('footer.html')

However this is not working. I should mention that I am javascript beginner, I barely understand what going on.

Thanks a lot

Praveen Perera
  • 158
  • 3
  • 13

3 Answers3

8

Try with following event, it works with my code:

$('[data-role=page]').live('pageshow', function (event, ui) {
            $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                $("#" + event.target.id).find("[data-role=navbar]").navbar();
            });
        });

This gist shows the entire code.

dhaval
  • 7,611
  • 3
  • 29
  • 38
  • This worked well but any idea how to make it work with ui-btn-active? Or is it even possible because if I add the class to the buttons all the buttons show up as active on the home page. – Praveen Perera Jun 06 '12 at 07:58
  • ideally you should apply the theme to distinguish one button from other http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-themes.html – dhaval Jun 06 '12 at 08:13
  • Better solution: http://stackoverflow.com/questions/7974630/jquery-mobile-include-footer-from-external-file – tomo7 Apr 20 '13 at 19:53
1

from jquery 1.9 and above live is now deprecated please use the function with on. In console it will give TypeError: $(...).live is not a function

example change your code 

$('[data-role=page]').live('pageshow', function (event, ui) {
            $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                $("#" + event.target.id).find("[data-role=navbar]").navbar();
            });
        });

Replace with

 $('[data-role=page]').on('pageshow', function (event, ui) {
                $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
                    $("#" + event.target.id).find("[data-role=navbar]").navbar();
                });
            });
BenMorel
  • 34,448
  • 50
  • 182
  • 322
skhurams
  • 2,133
  • 7
  • 45
  • 82
0

You need to load the external html code to an div with a data-role="footer", so you need to change the:

<div class="footerExt"></div>

to

<div data-role="footer" class="footerExt"></div>

and for example your footer html could have a h3

  <h3>This is your footer</h3>