CODEWITHSUNDEEP
javascriptjquery-mobilejquery-mobile-toolbars
LitBe
LitBe

Reputation: 183

Dynamically inserted header and footer don't appear

Hello guys I have one question...

I use JQM 1.4 ... and it sometimes happens that when i click a button an get reddirected (to a new HTML5 file)... on the new page the header and footer are without style... it doesn't happen always but I cant have a page like this...

For the footer and header I use external HTML files (header.html and footer.html) and i call them with

$('#pageprostoriheader').load('header.html').trigger("create");
$('#pageprostorifooter').load('footer.html').trigger("create");

As I said it doesn't happen very often but when it does is ugly ...

I have a multiPage template and i think maybe this is caused because the header and footer don't get loaded quick enough .... so its possible to make like a loader that waits till is everything ready till it shows the page ?

Upvotes: 1

Views: 477

Answers (1)

Omar
Omar

Reputation: 31732

As of jQuery Mobile 1.4, .trigger("create") is deprecated and will be removed on 1.5. Moreover, to create header/footer you should have used .trigger("pagecreate"), however, it is also deprecated and will be removed.

The replacement of the aforementioned functions is .enhanceWthin() to be called on parent element. This issue has several solutuins

  1. Enhance toolbars after successful .load(), using .toolbar().

    $('#pageprostoriheader').load('header.html', function () {
  $(this).toolbar();
});

$('#pageprostorifooter').load('footer.html', function () {
  $(this).toolbar();
});

  2. Enhance toolbars after successful .load(), using .enhanceWithin() on active page.

    $('#pageprostoriheader').load('header.html', function () {
  $.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});

$('#pageprostorifooter').load('footer.html', function () {
  $.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});

  3. If you're using the same toolbars on all pages, I recommend using External toolbars.

    Add HTML markup of header and footer in <body> not inside page div, and then add the below code in head after jQuery Mobile.js.

    $(function () {
   $("[data-role=header], [data-role=footer]").toolbar();
});

Upvotes: 1

Related Questions