Transition to the same page #2529

gemehendrix · 2011-09-26T15:05:10Z

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.

jblas · 2011-09-26T16:38:53Z

@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 · 2011-09-26T16:49:40Z

Well that sounds reasonable. Although it's difficult to appreciate without a
code example.

Currently my software team is having to create new DOM elements instead of
just reloading the current page which is a pain. Here's some more
information on our use case...

Our JS is completely dynamic in nature.
Our JS plugs directly into the jQuery Mobile events (i.e. pageshow,
pagehide etc). It's nice because in our JS, we have a JS Object per page
that has associated event handlers on it.
It's really cool to pass 'parameters' for a page (that's contained in the
URL) into the associated page JS Object. As shown in your example, we parse
the parameters out on the pagebeforechange event and then create the page.

If you'd like an example of our approach, let me know and I can provide a
more detailed use case on our approach.

Finally, many thanks for your quick and prompt response!

On 26 September 2011 17:38, Kin Blas <
reply@reply.github.com>wrote:

@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.

Reply to this email directly or view it on GitHub:
#2529 (comment)

jblas · 2011-09-26T17:29:09Z

@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.

gemehendrix · 2011-09-28T10:48:27Z

I tried this out with the latest jQuery Mobile build and it doesn't seem to
work.

It transitions to a blank screen. According to the Google Chrome Elements
viewer, it appears that no page is currently selected.

On 26 September 2011 18:29, Kin Blas <
reply@reply.github.com>wrote:

@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.

Reply to this email directly or view it on GitHub:
#2529 (comment)

jblas · 2011-09-28T16:21:58Z

@gemehendrix

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

ca9df11

gemehendrix · 2011-09-28T17:55:01Z

OK I'll give it another go.

FYI. I managed to get some of it working earlier by not using transitions.
However the history was all screwed up so I stopped.
On Sep 28, 2011 5:21 PM, "Kin Blas" <
reply@reply.github.com>
wrote:

@gemehendrix

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

ca9df11

Reply to this email directly or view it on GitHub:
#2529 (comment)

- 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.

gemehendrix · 2011-09-30T15:45:45Z

I've been testing your change and it works great.

Many thanks for your help,
Gareth

On 28 September 2011 17:21, Kin Blas <
reply@reply.github.com>wrote:

@gemehendrix

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

ca9df11

Reply to this email directly or view it on GitHub:
#2529 (comment)

jblas · 2011-09-30T15:47:56Z

@gemehendrix

You're welcome. :-)

davidlevy · 2012-01-09T09:18:33Z

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 !

jjstafford · 2012-02-26T17:35:25Z

@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?

davidlevy · 2012-02-28T14:11:02Z

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

jjstafford · 2012-02-28T18:00:13Z

@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!

eculver · 2012-04-13T19:40:58Z

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?

davidlevy · 2012-04-16T06:41:23Z

@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

mgm8870 · 2012-04-17T15:28:07Z

@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 · 2012-04-19T19:46:00Z

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?

barbalex · 2012-05-17T16:01:23Z

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.

knightcode · 2012-06-01T19:01:47Z

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 · 2012-07-18T18:59:33Z

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

mgm8870 · 2012-07-18T19:02:00Z

@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 · 2012-09-25T09:35:59Z

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.

shukriadams · 2012-10-02T16:26:31Z

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.

barbalex · 2013-05-02T13:24:18Z

the problem still persists

ghost assigned jblas Sep 26, 2011

jblas closed this as completed Sep 26, 2011

tza mentioned this issue Jun 4, 2013

Page receives display:none after samePageTransition #4078

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Transition to the same page #2529

Transition to the same page #2529

gemehendrix commented Sep 26, 2011

jblas commented Sep 26, 2011

gemehendrix commented Sep 26, 2011

jblas commented Sep 26, 2011

gemehendrix commented Sep 28, 2011

jblas commented Sep 28, 2011

gemehendrix commented Sep 28, 2011

gemehendrix commented Sep 30, 2011

jblas commented Sep 30, 2011

davidlevy commented Jan 9, 2012

jjstafford commented Feb 26, 2012

davidlevy commented Feb 28, 2012

jjstafford commented Feb 28, 2012

eculver commented Apr 13, 2012

davidlevy commented Apr 16, 2012

mgm8870 commented Apr 17, 2012

wiltontilt commented Apr 19, 2012

barbalex commented May 17, 2012

knightcode commented Jun 1, 2012

dpeacock commented Jul 18, 2012

mgm8870 commented Jul 18, 2012

thetiby commented Sep 25, 2012

shukriadams commented Oct 2, 2012

barbalex commented May 2, 2013

Transition to the same page #2529

Transition to the same page #2529

Comments

gemehendrix commented Sep 26, 2011

jblas commented Sep 26, 2011

gemehendrix commented Sep 26, 2011

jblas commented Sep 26, 2011

gemehendrix commented Sep 28, 2011

jblas commented Sep 28, 2011

gemehendrix commented Sep 28, 2011

gemehendrix commented Sep 30, 2011

jblas commented Sep 30, 2011

davidlevy commented Jan 9, 2012

jjstafford commented Feb 26, 2012

davidlevy commented Feb 28, 2012

jjstafford commented Feb 28, 2012

eculver commented Apr 13, 2012

davidlevy commented Apr 16, 2012

mgm8870 commented Apr 17, 2012

wiltontilt commented Apr 19, 2012

barbalex commented May 17, 2012

knightcode commented Jun 1, 2012

dpeacock commented Jul 18, 2012

mgm8870 commented Jul 18, 2012

thetiby commented Sep 25, 2012

shukriadams commented Oct 2, 2012

barbalex commented May 2, 2013