Search jQuery

jQuery Forum

Trouble with $.mobile.changePage

in jQuery Mobile • 11 years ago

I'm having a bit of trouble getting $.mobile.changePage working the jQM URL hash history. The history doesn't seem to be updating. As a result, when someone hits the back button (in the header or in the native browser) it navigates away to a previously visited site.

What I'm trying to do is intercept links on the page, build some UI client-side, and then invoke $.mobile.changePage to update the UI to the new screen. I'm doing this with a basic pattern like this:

$('a#my-test-link').live("click", function(evt) {

// build #woot here and insert into DOM...

$.mobile.changePage($("#woot"), "slide");

// prevent the normal click here

evt.preventDefault();

});

This works fine except for the history piece. I'm curious, does $.mobile.changePage not automatically update the history? I'd be surprised because it is adding a "back" button in the header automatically.

If it doesn't, how can I add an item to the history?

Is there a better way to perform this type of pattern without resorting to the default jQM Ajax pattern of requesting HTML from the server?

Thanks,

Stephen

Replies(3)

mckamey

Re: Trouble with $.mobile.changePage

11 years ago

I've been experimenting with the various in-page navigation hooks. An alternative to $.mobile.changePage is $.mobile.path.set. If I set data-url="foo" on the newly created internal page element then call $.mobile.path.set("foo") it will transition to the page and correctly update the history stack. Downside is that it will not produce a back button.

I'm curious what is the recommended way of using these methods if you want/need to handle the Ajax calls yourself?

It looks like the only thing that really works is this:

$('a').live("click", function(evt) {

// build #woot here and insert into DOM...

$.mobile.changePage("#woot", "slide", false, true);

evt.preventDefault();

});