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
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.
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();
});
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.