Transition to the same page #2529

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

Projects

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

@jblas jblas was assigned Sep 26, 2011
@jblas
jblas commented Sep 26, 2011

@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

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
jblas commented Sep 26, 2011

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

@jblas jblas closed this Sep 26, 2011
@gemehendrix

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
jblas commented Sep 28, 2011

@gemehendrix

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

ca9df11

@gemehendrix

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)

@Wilto Wilto pushed a commit to Wilto/jquery-mobile that referenced this issue Sep 28, 2011
@jblas jblas 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

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
jblas commented Sep 30, 2011

@gemehendrix

You're welcome. :-)

@davidlevy

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

@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

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

@jjstafford

@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
eculver commented Apr 13, 2012

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

@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
mgm8870 commented Apr 17, 2012

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

@barbalex

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

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?

@mgm8870
mgm8870 commented Jul 18, 2012

@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
thetiby commented Sep 25, 2012

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

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
barbalex commented May 2, 2013

the problem still persists

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment