Update one page with jQuery, in single html file

Question

I've got a single html with 5 pages + navbar. To force a refresh of one page I use this:

$("#page3").on("pagecreate", function(e) {});

It works the first time, but I want it to update every time I visit the page. I know there is .trigger("create"), and "refresh", but I can't get it to work properly...

jQuery Mobile 1.4.0

`pagecreate` fires once per _page_. `.trigger("create")` is deprecated and replaced with `.enhanceWithin()`. What do you want to refresh exactly? — Omar, Mar 04 '14 at 08:56
I want #page3 to reload everytime i browse to it. It holds some data I need to be updated. Or placing it inside a — Baked Inhalf, Mar 04 '14 at 08:59
I think you want a hard refresh. Your question has been answered here, and can be achieved without jQuery. http://stackoverflow.com/questions/2099201/javascript-hard-refresh-of-current-page — AKG, Mar 04 '14 at 08:59
@AKG this jQM not jQuery, `window.reload()` will reload the whole document. in jQM _page_ is a div inside a document. — Omar, Mar 04 '14 at 09:00
Then you need to use `pagecontainerbeforeshow` to update page's content. Are you retrieving data via Ajax? — Omar, Mar 04 '14 at 09:01
On this page there is no Ajax. It holds a "summary" of some data based on the other pages, so it's generated only on the client. — Baked Inhalf, Mar 04 '14 at 09:05
Then all you need is on `pagecontainerbeforeshow` collect data from other pages and update _that_ page. Or, create page dynamically and remove it once you navigate away. — Omar, Mar 04 '14 at 09:12
Doesn't work.. The event is not triggered. $("#page3").on("pagecontainerbeforeshow", function(e) { alert("test"); }); — Baked Inhalf, Mar 04 '14 at 09:18
Good that you've tried it ;) Unfortunately, new _pageContainer_ events cant be attached to a specific page. You need to check which page is currently visible, if this == "page3" doSomething(). — Omar, Mar 04 '14 at 09:23
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48938/discussion-between-omar-and-baked-inhalf) — Omar, Mar 04 '14 at 09:26

Omar · Accepted Answer · 2014-03-07T11:14:23.080

You need to listen to pageContainer event in order to determine which page is active and accordingly run the functions you want.

The new events can't be attached to a specific page, unlike successor versions of jQuery Mobile. Once an event is occurred, retrieve ActivePage's ID.

$(document).on("pagecontainerbeforeshow", function (e, ui) {
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
  if(activePage == "page3") {
    doSomething();
  }
});

Demo

Update one page with jQuery, in single html file

1 Answers1