Question

I am creating a mobile app with multiple HTML pages, jquery and Phone gap. I didn’t wanted to copy paste same footer in my app’s pages redundantly so I created a global footer.html and tried to load that file’s content on documents .ready() something like this.

Footer HTML

<div data-role="navbar" data-grid="d">
    <ul class="apple-navbar-ui comboSprite">
        <li><a href="../dashboard.html">Home</a></li>
        <li><a href="../contacts/contacts.html">Contacts</a></li>
        <li><a href="../applications/applications.html">Applications</a></li>
        <li><a href="settings.html">My Account</a></li>
    </ul>
</div>

Main HTML

<div data-role="page">
    <div id="footer" data-role="footer">
    </div>
</div>

$(document).ready(function () {
   $('#footer').load("footer.htm");
   $('#footer').trigger('create');
});

It loads the content of footer.html but the Jquery mobile’s UI doesn’t get rendered.

But when I changed document ready code to this

$(document).ready(function () {
   $.get('footer.htm', function (retData) {
      $('#footer').append(retData);
      $('#footer').trigger('create');
   });
});

It worked great.

So what’s the difference between these two approach ? and why did one worked and another one failed ?

Answer 1

Actually the difference is that in your $.get() you have a callback function and you put there the $('#footer').trigger('create'); while in the .load() you didn’t put a callback function.

You should’ve done this:

$(document).ready(function(){
    $('#footer').load("footer.htm", function(){
        $(this).trigger('create');
    });
});