How to change page in jQuery mobile (1.4 beta)?

Question

I am reading the docs that $.mobile.changePage has been deprecated.

But it doesn't say in favor of what, or what can I use instead.

Is there a new API documentation page for this?

I used to use $.mobile.changePage("index.html", {reloadPage:true}); but it seems that adding reloadPage:true the page breaks

I've been looking for `.changePage` replacement, but couldn't find it. I assume (_not sure, however tested on 1.4 beta 1_) `$.mobile.navigate()` would be replacing it. It accepts same arguments of `.changePage`. — Omar, Oct 04 '13 at 08:25
The above statement is correct, please go through this documentation http://view.jquerymobile.com/1.4.0-beta.1/dist/demos/navigation/ — Sheetal, Oct 04 '13 at 09:05
aha, can someone please post this as an answer so i can check it as correct? — Patrioticcow, Oct 04 '13 at 15:43

Omar · Accepted Answer · 2014-01-07T13:47:39.403

79

As of jQuery Mobile 1.4, $.mobile.changePage() is deprecated and replaced with:

$(":mobile-pagecontainer").pagecontainer("change", "target", { options });

Shortened...

$.mobile.pageContainer.pagecontainer("change", "target", { options });

Even shorter...⁽¹⁾

$("body").pagecontainer("change", "target", { options });

Note: target is #page_id or URL.

Demo

⁽¹⁾ <body> is pageContainer by default, unless $.mobile.pageContainer is modified on mobileinit.

edited Jan 07 '14 at 13:47

answered Oct 04 '13 at 16:30

Omar

4

some more info that i found on this: `$.mobile.pageContainer.pagecontainer ("change", "index.html", {reloadPage: true});` – Patrioticcow Oct 17 '13 at 03:36
12

Thank you - yeah that is a HUGE glaring omission from the documents. – imaginethepoet Jan 07 '14 at 13:41
@Omar How to change the external page using pageContainer... Is that possible..? – kamesh May 24 '14 at 06:20
@Koushik `window.location.href = "url";` should work in case you're trying to load an external page from a different domain with "access origin" disabled. – Omar May 24 '14 at 11:41
Am I the only one who experiences the problem that the browser does not scroll to the top of the target page using this method (v 1.4.5)? – Jan Apr 20 '15 at 14:28
By the way: the `reloadPage` option is deprecated, use `reload` instead with the same values (e.g. `{reload:true}`) – Jan Apr 20 '15 at 14:32
2

Thanks for the expansion - this is SOOO poorly documented on their website. – keldar Nov 26 '15 at 13:42

score 4 · Answer 2 · answered Jan 14 '14 at 10:20

4

This works for me:

$.mobile.pageContainer.pagecontainer('change', nextPage, {
  transition: 'flow',
  reload    : true
});

nextpage: is URL to the nextpage example (var nextPage = 'nextPage.html')

answered Jan 14 '14 at 10:20

Eagle_one

I know but it dose not work for 100% and about 60% it generates a failure that the pagecontainer is not initialized. – Eagle_one Apr 16 '14 at 06:23

2 Answers2