changePage "jumps" back to old page

Question

I've a big problem with a jQuery Mobile Application: I'm using custom functions (they are triggered by onClick) to switch the page with currentPage.

It only happens on Android-Devices on sites in which has changed (due to ajax requests) with the integrated browser. iOS and Chrome works nice.

After clicking on an element, the animation started but just before it ends, it switches back to the old page. After a half second, it switches back to the new.

I made a movie of the bug here: http://www.youtube.com/watch?v=sXxvVUxniNg

Thank you very much

Code (CoffeeScript):

class Guide

    @categoriesLoaded = false

    @loadSearch: ->

        $.mobile.changePage $("#guide"),
            transition: 'slide'
            changeHash: false

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) ->
                output = Mustache.render $("#tmpl-guide-categories-select").html(), 
                    categories: data

                $("#guide-search-category").append output

                $("#guide-search-category").val($("#guide-search-category option:first").val());

window.WgSwitchGuide = ->
        Guide.loadSearch

Crofoot

jQuery Mobile page transitions are pretty nice in Desktop browsers, but in device browsers they are catastrophic. I prefer $.mobile.defaultPageTransition = 'none'; :-( – Loggins

Answer 1

I was having the same issue. And I tried everything, I finally end with the solution. What I found was the error was principally within the browser. So I set the configuration of the pushStateEnabled as false. I did it by doing the following, adding this script.

<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>

It should be add before the jquery-mobile script is call, for more information you could see it on JQuery description

And it solved the problem no more jumping back.

Man

I really wish i had time to understood why this works, but it worked for me. – Plasterwork

Answer 2

I was having the exact same issue on both android and ios. For me, it was happening for heavy pages, i.e., pages with complex elements etc. Looks like you are using "slide" transition, which was what I was using as well. Taking out the page transitions (i.e., $.mobile.changePage("page.html", { transition: "none" })) for those pages resolved this issue for me. Hope this helps.

If you want to retain the transition, you can try preloading the page first when the previous page is being shown, by using the $.mobile.loadPage, and then show the transition. I am myself exploring this route, but it is probably worth trying.

Edit: OK - I explored the last suggestion and this doesn't seem to be working. Will stick with the first option.

Bonnett

Hi Samik! Unfortunately, this isn't a real solution for me, because my client wants the transition :-/ But thank you for your answer. – Crofoot

Edited the answer with another option. Thanks. – Bonnett

Answer 3

Would you try to add the event stopPropagation and preventDefault methods on the first page's click event? This way the default action of the click event will not be triggered. Moreover the stopPropagation prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

• event.stopPropagation();
• event.preventDefault();

Example:

$("p").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    // change page
});

Boer

default action on href is javascript:; - anyway - didn't solve the problem. but we're on the way to resolve it - it's in all probability a css problem ... – Crofoot

Answer 4

After trying for weeks to find a solution to this, I ended up doctoring the JQM library to disable page transitions one right after another. It's not a good solution, but it's the only thing I could get to work.

I was getting pages jumping back on both $.mobile.changePage and on anchor links. I used the slide transition, but removing it did not fix the problem. Setting pushStateEnabled to false did not work either. The jumps were happening on all devices and browsers (that I tested, anyway).

So here's what I did to the JQM library (v1.3.2).

Before the $.mobile.changePage function is defined, I added:

var justChangedPage = false;

Then within the function there's a line that goes:

if ( pbcEvent.isDefaultPrevented()) {
    return;
}

which I changed to:

if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
    return;
}

Then right after this part of the $.mobile.changePage function:

if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
    settings.dataUrl = documentUrl.hrefNoHash;
}

I added:

justChangedPage = true;
setTimeout(function() {
    justChangedPage = false;
}, 500);

(Putting that earlier in the function didn't work -- all that stuff executes more than once within a single page transition. And half a second seemed to be the minimum timeout that prevented the page jumps.)

I hope this helps someone even if it is a hack...

Zoubek

Answer 5

What is your JQM and Android version?

I'm not sure If I understand correctly. I think transition flicker maybe come from the following assumption.

1. Heavy page DOM transition.
2. Using "translate3d" somewhere in css file.
3. Not using "H/W Acceleration" feature. Enable by add this line to your AndroidManifest.xml in <application>

android:hardwareAccelerated="true"

Weisler

jQM 1.2, tried with 1.3 (similar error there). Android 4.x default Browser and PhoneGap - both. It's probably caused by DOM manipulation just before the transition. HW Acceleration is enabled in PhoneGap Port, translate3d is disabled. Thanks for your help! – Crofoot

Answer 6

I encountered exactly the same behaviour and it seems that few people are having the same issue. At first I thought it is caused by jQuery mobile library. Later on, I manage to find where the problem came from and it is a bug in my own code. I made a demo to explain the issue.

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

Hopefully, this can be hint for people having the same problem.

$(document).on('pagebeforeshow', '#page2', function(){
    console.log('Page2 before show');
    var htmlGeneratedOnTheFly = '<ul data-role="listview" data-inset="true">';
    for(var i=0; i<4; i++)
    {
        htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>';
    }
    htmlGeneratedOnTheFly += '</div>';
    $('#page2UiContent').empty();
    $('#page2UiContent').append(htmlGeneratedOnTheFly);
    $('#page2UiContent').trigger('create');
    
   
    //////////////////////////////////////////////////
    //The following section is where the bug is generated. 
    //Each on "page2 before show event" will add a OK Button click handler. 
    //The handlers never get cleared.
    //More and more handler is added to the Page2 OK button as pages going back and forth.
    //Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. 
    //To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){});
    //////////////////////////////////////////////////
    $('#page2OkButton').click(function(){
        console.log("Page 2 OK Button clicked!!!");
        $.mobile.changePage('#page1', {transition:"flip"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="page1" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 1</h5>
    </div>
    <div data-role="main" class="ui-content">
        <h2>jQuery mobile changepage jumps back to old page demo</h2>
        <p>Click "Go To Page 2" button to go to page2</p>
        <p>On Page2 click Ok Button to come back to page1</p>
        <p>Keeping going back forth between two pages for few times.</p>
        <p>Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. </p>
        <h2>Please read the comments in the javascript for explaination</h2>
        <a href="#page2" data-transition="flip" class="ui-btn ui-icon-carat-r ui-btn-icon-right">Go To Page 2</a>
    </div>
</div>

<div data-role="page" id="page2" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 2</h5>
    </div>
    <div id="page2UiContent" data-role="main" class="ui-content">
    </div>
    <div data-role="footer" data-position="fixed" style="text-align:center;">
        <div data-role="navbar">
            <ul>
                <li><a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left">OK</a></li>
            </ul>
        </div>
    </div>
</div>

Floreneflorentia

This IS a jQuery Mobile bug, in my application I have setup all of my change page events on pagecreate event which triggers only once per page, and I still have the same behaviour of pages going back to the old page. – Construe