Using onBackPressed with Cordova backbutton

Question

I asked a similar question before but I'm hoping with additional information and with what I learnt from the previous question I might be able to solve my issue. I need to be able to use the back button on my Android phone. At the moment I have the Cordova backbutton implemented which caused the application to go back 2 pages per click.

I should also mention that my app is build around JavaScript, HTML and CSS with very minimal Java as you will see below.

Backbutton JS code:

document.addEventListener("deviceready", onDeviceReady, false); 

function onDeviceReady() {
//alert ('123');
document.addEventListener('backbutton', onBackKeyDown, false);
}

function onBackKeyDown()
{
    currentPage = $.mobile.activePage.attr('id');
    if(currentPage == "createUser"){
        $.mobile.changePage("#logIn");
        alert("Return To Login Page");
    }

    if(currentPage == "cardDetails"){
        $.mobile.changePage("#createUser");
        alert("Return to Create User");
    }
    if(currentPage == "mainMenu"){
        $.mobile.changePage("#logIn");
        alert("Return To Log In");
    }
    if(currentPage == "locationPage"){
        $.mobile.changePage("#mainMenu");
        alert("Return To Main Menu");
        $("#pId").empty();
    }
    if(currentPage == "editUserPage")
    {
        $.mobile.changePage("#mainMenu");
        alert("Return To Main Menu");
        $("#trId").empty();
    }
    if(currentPage == "editCardDetailsPage")
    {
        $.mobile.changePage("#editUserPage");
        alert("Return To Edit User");
    }
}

I was told to implement a onBackPressed function inside my java file. I'm not very experienced in Java but with a bit of help I was able to figure out where the code goes

Java code:

import android.os.Bundle;

import org.apache.cordova.DroidGap;

public class FnBApp extends DroidGap {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }

    @Override
    public void onBackPressed() {
       //Log.d("CDA", "onBackPressed Called");
       //if super.getUrl shows a specific page:
       if() {
           super.loadUrl("file://android_asset/www/index.html#login");
       };
    }
}

Now I'm not sure what I should put in the if statement in the Java file I've tried WebView , AppView and a few other things to no avail and from what I can see using Java will only change the page which if that is all I wanted to do I wouldn't need to edit the back button functions but as I have placed in the backbutton js code, I also need to run some DOM functions as well.

Is there a way to be able to run the DOM functions in conjunction with the Java

If any more clarification is needed let me know.

John

Answer 1

So the problem is that the backbutton fires two events because it goes back to page. What you need to do in JavaScript is to stop the event propagation. So, you need to get the event on the onBackKeyDown and stop propagation with event.preventDefault(); . You don't need Java.

function onBackKeyDown(event)
{
    currentPage = $.mobile.activePage.attr('id');
    if(currentPage == "createUser"){
        $.mobile.changePage("#logIn");
        alert("Return To Login Page");
    }

    if(currentPage == "cardDetails"){
        $.mobile.changePage("#createUser");
        alert("Return to Create User");
    }
    if(currentPage == "mainMenu"){
        $.mobile.changePage("#logIn");
        alert("Return To Log In");
    }
    if(currentPage == "locationPage"){
        $.mobile.changePage("#mainMenu");
        alert("Return To Main Menu");
        $("#pId").empty();
    }
    if(currentPage == "editUserPage")
    {
        $.mobile.changePage("#mainMenu");
        alert("Return To Main Menu");
        $("#trId").empty();
    }
    if(currentPage == "editCardDetailsPage")
    {
        $.mobile.changePage("#editUserPage");
        alert("Return To Edit User");
    }
    event.preventDefault();
}