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

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.

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.

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
});