Jquery Mobile Same Footer on Different Pages

cordova, dynamic, footer, jquery, mobile

Solution

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.

Problem

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

Original source

Related problems