“pagechange” event unexpectedly thrown from either Worklight or jQuery Mobile

Question

I am developing a Single Page Hybrid/Cordova app based on IBM Worklight 6.1 and jQuery Mobile 1.4.

At my Home Page I have a popup box which shows a password input and a login button. When I tap the login button, the jQuery method (shown below) captures the login event and takes me to the Admin Tools page, as I expected.

So far so good, but then suddenly a new “pagechange” event is thrown from either Worklight (wljq.js) or jQuery Mobile (jquery.mobile-1.4.0.js)) and I get kicked back to the Home Page.

Can anyone please help me and figure out what is happening?

$('#adminToolsLoginButton').on('tap', function() {
    var password = $('#adminToolsPasswordInput').val();
    if (password === adminToolsPassword) {
        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#adminTools", { } );
    } else {
        WL.Logger.debug('Wrong admin password');
        alert('Wrong admin password');
        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#myHome", { } );
    }
});

Best regards, Magnus.

Answer 1

Thanks for your feedback.

The problem is now solved!

The problem was related to the jQuery Mobile Popup Widget that wanted to take me back to the page where it was located and was opened from. Is this perhaps a bug?

I solved the problem by using the 'afterclose' event as shown below:

        var isLogin = false;

    $('#adminToolsLoginButton').on('tap', function() {
        var password = $('#adminToolsPasswordInput').val();
        if(password === adminToolsPassword){
            isLogin = true;
        }
        else{
            isLogin = false;
            WL.Logger.debug('Wrong admin password');
            alert('Wrong admin password');
        }
    }); 

    $( "#popupAdminLoginDialog" ).on( "popupafterclose", function( event, ui ) {
        if(isLogin){
            $( ":mobile-pagecontainer" ).pagecontainer( "change", "#adminTools", { } );
        }
        isLogin = false;
    } );