CODEWITHSUNDEEP
jquery-mobile
Mobie
Mobie

Reputation: 1900

jQuery Mobile - .on('pageinit') for 1.7.1

So I'm using the following code to intialize dynamic content for my various JQM pages, however pageinit, which is apparently the best method to use for JQM page initialization does not clean up after itself.

Ex) I have a dynamic footer. It prints todays date. In my initialization code I have the following:

    $(document).on('pageinit', '#dashboardPage', function() {

      var currentTime = new Date()
      var month = currentTime.getMonth() + 1
      var day = currentTime.getDate()
      var year = currentTime.getFullYear()
      var fullDate = month + "-" + day + "-" + year;

      $('#footer').append('<p>  Today: ' + fullDate + '</p>');

    });

Problem: Each time I navigate away and back to this page, pageinit fires again and adds yet another footer to my page. Is it my job to cleanup? shouldn't JQM know not to fire pageinit again and again? Is there a better way to go about this?

Upvotes: 0

Views: 1214

Answers (3)

ChasseurDesCols
ChasseurDesCols

Reputation: 33

IMHO the real problem of OP is that the pageinit is firing each time, when you navigate back to the page. This seems to happen for ajax-loaded pages, but not for the "first" page in the chain:

Page one --(ajax)-->Page two--(ajax)-->Page three--(ajax)-->Back to page two

In this sequence the pageinit of page two will get fired each time you get back to page two.

I tried to avoid this behavior by specifying data-dom-cache="true", but it didn't help. IMHO this a bug in the JQM Framework.

Upvotes: 2

Romain
Romain

Reputation: 1302

You should create a span dedicated to the date and only update this content, for instance by adding <p> Today: <span id="dateSpan"></span></p> to your footer, and modifying so slightly your code

$(document).on('pageinit', '#dashboardPage', function() {

  var currentTime = new Date()
  var month = currentTime.getMonth() + 1
  var day = currentTime.getDate()
  var year = currentTime.getFullYear()
  var fullDate = month + "-" + day + "-" + year;

  $('#dateSpan').html(fullDate);

});

Upvotes: 0

Suave Nti
Suave Nti

Reputation: 3747

How about remove and append together ?

  $('#footer').remove('p').append('<p>  Today: ' + fullDate + '</p>');

Upvotes: 1

Related Questions