Geek asks and answers

JQuery Mobile Same Footer on different pages

I want to have the same header and footer on all pages of my jquery mobile app and manage it using another file like footer.html. This is easy to do using PHP, but I can’t, because I plan to use this telephone service.

The search around that I found using

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

and javascript

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

However, this does not work. I must mention that I am a beginner of javascript, I almost do not understand what is happening.

Thank you so much

+5
source share
3 answers

Try the 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 all the code.

+8
source

jquery 1.9 live , , . TypeError: $(...). Live

$('[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();
            });
        });


 $('[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();
                });
            });
+1

You need to load the external HTML code into the div using data-role = "footer", so you need to change:

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

before

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

and for example, the html of your footer might have h3

  <h3>This is your footer</h3>
0
source

More articles:


All Articles