Skip to content
This repository

Transition to the same page #2529

Closed
gemehendrix opened this Issue September 26, 2011 · 23 comments
gemehendrix

It would be extremely useful to be able to transition to the same page for applications that dynamically produce their own content.

For example, let's take jQuery Mobile's own dynamic page creation demo...

http://jquerymobile.com/test/docs/pages/dynamic-samples/sample-reuse-page.html

Now let's say the data structure generating this content was 10 x deep. Or potentially without depth. It would be really nice
to hyperlink to the same page (with a different hash of course) so the DOM wasn't need to be constantly added too.

Kin Blas

@gemehendrix

The main issue with allowing transitioning to the same page is the actual transition animations themselves. They usually require 2 different elements to operate on. That said, we were thinking of disabling the same page check in changePage() via a config option, whose default could be tweaked to turn off. The caveat would be that you would be responsible for either turning off transitions when going to the same page or defining your own transition that makes sense.

gemehendrix
Kin Blas

@gemehendrix

Landed a fix on the HEAD:

6cd1e1b

To allow same page transitions, you will have to change the default config option:

// To toggle the default behavior for all changePage() calls,
// set the default value of allowSamePageTransition to whatever
// you want it to be. The default is false.

$.mobile.changePage.defaults.allowSamePageTransition = true;

or pass it in as an option to your manual call to changePage():

// To specify the behavior when manually calling changePage(),
// pass it as an option. If not specified, the default value
// specified by $.mobile.changepage.defaults.allowSamePageTransition
// is used.

$.mobile.changePage( "#reused-page", { allowSamePageTransition: true } );

@gseguin

This is the last item I think Jive needed.

Kin Blas jblas closed this September 26, 2011
gemehendrix
Kin Blas

@gemehendrix

Sorry 'bout that, it's fixed now on the HEAD:

ca9df11

gemehendrix
Mat Marquis Wilto referenced this issue from a commit in Wilto/jquery-mobile September 28, 2011
Kin Blas Fixes #2529 - Transition to the same page
- So it seems just allowing changePage() to process same toPage and fromPage is not enough. I modified the CSS3 keyframe

animation plugin so that it only removes the ui-page-active class from the fromPage if it is *NOT* the same as the toPage.

- I also re-ordered the in/out transition rules for forward/reverse transitions so that the user always views some sort of animation/motion.
ca9df11
gemehendrix
Kin Blas

@gemehendrix

You're welcome. :-)

Timmy Willison timmywil referenced this issue from a commit September 28, 2011
Kin Blas Fixes #2529 - Transition to the same page
- So it seems just allowing changePage() to process same toPage and fromPage is not enough. I modified the CSS3 keyframe

animation plugin so that it only removes the ui-page-active class from the fromPage if it is *NOT* the same as the toPage.

- I also re-ordered the in/out transition rules for forward/reverse transitions so that the user always views some sort of animation/motion.
178986c
David Levy

Hi

I am using JQM 1.0 with latest Backbone.js and I experience the same kind of issue.
My web app is injecting dynamic DOM elements in the same JQM page. During the transition (slide), a blank screen appears for a few ms, which can be annoying for users.
Is there a way to fix this ?

I have allowSamePageTransition=true, and I call manually the showPage method from the render method of my Backbone views.
Also, the blank screen does not appear if I transition to one page to a page with a different ID.

Thanks !

Jameson Stafford

@davidlevy did you find any resolution to this? I'm facing the same issue. While I'm VERY grateful that there is a way to transition to the same page, the blank page you mention is a very bad user experience.

I'm using plain old JQM and HTML, seeing exact same issue. Anyone know of a fix for this?

David Levy

@jjstafford , no did not find any fix for this. I disabled transitions in these cases for now. :(

Jameson Stafford

@davidlevy yeah, I assumed that would be the case. I ended up cloning the "to" page with a bunch of temp IDs, then removing the from page and re-naming everything back on pageshow. Not what I wanted to spend a day on, but it works. I just couldn't bear not having the transition.

Thanks for the reply!

Evan Culver

I just ran in to this little bugaboo and to solve it, immediately after calling $.mobile.changePage, I bind to the CSS animation complete callback to enable the page again:

$.mobile.changePage($page, options);

$page.animationComplete(function () {
    $page.addClass('ui-page-active');
});

Because the animations are set to 200-350ms (roughly) in the CSS, the bind should be queued up and fired after all the magic that $.mobile.changePage sets up in terms of transition callbacks. This feels kind of hacky, but allows me a much easier way of 'transitioning' to the same page in the DOM in that I don't have to dynamically create pages in the DOM and worry about history and all that.

Thoughts?

David Levy

@eculver : just tested it and it works indeed (with JQM 1.1.0) !

Though, it does blink in some pages, seems to be related to my fixed positioning header

Michael Mahoney

@eculver @davidlevy I am also trying to get this fix to work. it doesnt blink for me but the position of the listview is shifted up. It seems to not recognize that there is a header.

wiltontilt

i'm on JQM 1.1 and i'm getting this when trying to changePage to the same page:

jquery.mobile-1.1.0.js:2815 Uncaught TypeError: Cannot call method '_trigger' of undefined

When I call:

function showQuestion(question_id, customTransition, reverseTransition)
{
if (!customTransition)
{
customTransition = "pop";
}

if (!reverseTransition)
{
    reverseTransition = false;
}

$.jStorage.set("question_to_show", question_id);
$.mobile.changePage("question_show.html", {transition: customTransition, reverse: reverseTransition, allowSamePageTransition: true});

}

The function works just fine when i'm not on question_show.html but when I am, it bombs with the above error. Thoughts?

Alexander Gabriel

I am having the same issue as wiltontilt

I'm on jQM 1.1

I am transitioning to the same page (to a new dataset).

All other transitions work perfect (dozens).

But this on gives either a blanc page or does not transition to the next page (dataset)
and depending on which Browser I use I get these errors:

  • Firefox with firebug: b.data("page") is undefined
  • Chrome, develloper tools: Uncaught TypeError: Cannot call method '_trigger' of undefined

Both on line 43 of jquery.mobile.js (compressed).

If I then refresh the page, it shows correctly.

Now what really gets me is that this behavior does not occur every time. I have spent hours trying to find a way to get this working and several times I thought I had it working but - bang - all of a sudden here comes the error.

O.k., I got it now: The error occurs when I transition from a page that has a data-url value that represents its url.
When I transition from a page that has a dara-url value of its id it works.

So I check the data-url and choose window.open instead of changePage when data-url is a path:

if ($("#ZeitEditPage").length > 0 && $("#ZeitEditPage").attr("data-url") !== "ZeitEditPage") {
window.open("hZeitEdit.html", target = "_self");
} else if ($("#ZeitEditPage").length > 0 && $("#ZeitEditPage").attr("data-url") === "ZeitEditPage") {
$.mobile.changePage($("#ZeitEditPage"), {allowSamePageTransition: true});
} else {
$.mobile.changePage("hZeitEdit.html");
}

This is a bad hack and it is a bad user experience but it works.

PJ

I'm having an issue using the back button after transitioning to the same page. The url (including hash) updates correctly to the page prior to the one that was reloaded, but no transition is made to this prior page.

dpeacock

@mgm8870 I'm having the same issue as you, after the transition the page is still shifted up. Were you able to resolve this?

Michael Mahoney

@dpeacock No I didn't... I since scrapped the idea of doing that and alternate between two identical page templates, A.html and B.html

thetiby

If you only need to refresh the page (like reloading a normal non-ajax one), use an empty form with no action, and submit it. It will effectively reload the page with the same animation that all your pages load.

Shukri Adams

Having the same problem as @wiltontilt, having to code an awful hack made even more awful by the fact that it collides with my hacks for jquery mobile's other glaring mistakes like broken history and no querystring support. This framework is just one emergency solution after the next.

Alexander Gabriel

the problem still persists

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.