Question

I ran in to a problem while developing a mobile app using Phonegap & jQuery Mobile.

I’ve an entry condition to be checked everytime before a page is shown, say page A. If the condition goes false, i navigate the app to another page, say page X. I did that using the page event pagebeforeshow.

But my problem is that…

Even though i used the pagebeforeshow event, the page page A is getting shown. Ie; the page A is shown once and then the apps navigates to page X. I dont want this page A to be displayed if the condition is wrong. I mean, cancel the that page show event and move on to other page.

Hope you’ve got what i asked.

Why it is so? is there any other method through which i can accomplish my task perfectly.

Any kind of helps would be deeply appreciated! 🙂

Answer 1

Don’t use pagebeforeshow event in this case, that is one of the last page events to trigger. At that point second page is already created and ready to be shown. This must be done before second page is about to be created.

First take a look at my other ARTICLE, there you will find a list of page events during a transition from page one to page two. Or it can be found HERE.

Now about your problem, here’s a code that you can use to fix your problem. It is using pagebeforechange event (which is a first event to trigger during a page transition):

$(document).on('pagebeforechange', function(e, data){  
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to  === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#index' && to === '#second') {
            alert('Can not transition from #index to #second!');
            e.preventDefault();
            e.stopPropagation();

            // remove active status on a button, if transition was triggered with a button
            $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus ui-btn');;
        }  
    }
});

And here’s a live jsFiddle example: http://jsfiddle.net/Gajotres/3PhKZ/, you should click on a next button to trigger a page change.