How to Replace the Main Page in Cordova?

Question

I made login function so when the users login it will navigating to other page, but the problem is after login succes the users can go back to login page again just with press the physical back button. Now what i want is after login the users cant go back to login page again, so when the physical back button pressed it will close the app instead. here is my onloginsucces method

document.getElementById('auth').onclick = function () {
$fh.auth({
  "policyId": "policyid",
  "clientToken": "appid",
  // Your App GUID
  "endRedirectUrl": window.location.href,
  "params": {
    "userId": document.getElementById('username').value,
    "password": document.getElementById('password').value
  }
}, function(res) {
  // Authentication successful - store sessionToken in variable
  var sessionToken = res.sessionToken;
  alert("Login Succes");
  window.location = './menu.html';

}, function(msg, err) {
  var errorMsg = err.message;
  if (errorMsg === "user_purge_data" || errorMsg === "device_purge_data") {
    // User or device has been black listed from administration console and all local data should be wiped
  } else {
    alert("Authentication failed - " + errorMsg);
  }
})
};

is there anyway beside using window.location to navigating ? like window.replace maybe , thanks?

UPDATE

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>Hello World</title>

    <link rel="stylesheet" href="css/app.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="cordova-2.7.0.js"></script>
    <script type="text/javascript" src="js/jquery.min.1.9.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>

    <script type="text/javascript">
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        // device APIs are available
        //
        function onDeviceReady() {
            // Register the event listener
            document.addEventListener("backbutton", onBackKeyDown, false);
        }

        // Handle the back button
        //
        function onBackKeyDown() {
            e.preventDefault();
        }
        </script>
  </head>

Instead of navigating learn how to make a proper app by dynamically loading and unloading elements. — Darkrum, Apr 10 '18 at 03:38
cordova.js is how it's spelled. There's no version in the file name. — Darkrum, Apr 10 '18 at 04:52
I would also recommend you use the lastest version of Cordova it's currently at 8 your using 2 — Darkrum, Apr 10 '18 at 04:58
wew its so outdated then, ok thanks for your sugest . This Cordova App actualy generated by RHMAP (Red Hat Mobile App Platform) , i didn't know its have 5 version gap with my app — Theodorus Agum Gumilang, Apr 10 '18 at 05:06
Yeah that `cordova-2.7.0.js` was I give away. They did away with the versioning and you just write `cordova.js` note there are other small changes here and there manly with the command line. If you have npm it's as easy as `npm update -g cordova` to update. — Darkrum, Apr 10 '18 at 05:12
@Darkrum hi i tried to make my second page can ovveride the back button too, in here https://stackoverflow.com/questions/9631933/override-android-backbutton-behavior-only-works-on-the-first-page-with-phonegap he told us to add some code in cordova.js, whrere can i find the cordova.js ? — Theodorus Agum Gumilang, Apr 10 '18 at 05:26

Peter · Accepted Answer · 2018-04-10T03:42:21.070

2

try below:

document.addEventListener("backbutton", onBackKeyDown, false);
   function onBackKeyDown(e) {
   #or return False
   e.preventDefault();
}

that function disables the buttons functionality. I pulled this from a page found a while back on stackoverflow page. I think return False works fine but is probably not JS proper usage.

edit thanks to commenters: Note this needs to be in Cordovas on device ready listener to work.

edited Apr 10 '18 at 03:42

answered Apr 10 '18 at 03:33

Peter

302
3
16

Note this needs to be in Cordovas on device ready listener to work. – Darkrum Apr 10 '18 at 03:36
well thanks for your answer but actually thats not the asnwer what im looking for, i dont want my user cant press the back button it bad for the ux, what i want is when the user login, the main page change to menu.html so the users cant go back to login.html. – Theodorus Agum Gumilang Apr 10 '18 at 03:37
@TheodorusAgumGumilang you can make the back button do whatever you want. – Darkrum Apr 10 '18 at 03:41
@TheodorusAgumGumilang you put this in your device listeners just conditional on what page you are on. the sudo code basically being "if page.to_be_rendered == login then return nothing" instead of back. You can have it close the application or minimize. the return statement is up to you 100% – Peter Apr 10 '18 at 03:44
hmm maybe thats good idea , so i need to add the event listener in every page right ? in the menu.html i make when the back button pressed it will close the app – Theodorus Agum Gumilang Apr 10 '18 at 03:54
I would examine @Darkrum advice by dynamically loading items. My solution was a hack in pinch. You can have the listener just check some global "logged_in" variable and then if the page is sent to login, redirect to home page but like I said, it would be better just to make it so the pages reload on the same template new data – Peter Apr 10 '18 at 03:56
@TheodorusAgumGumilang if my memory serves me the Cordova ondeviceready listener lives in a separate world that only fires once and isn't effected by navigations. I could be wrong on this one since I don't navigate in my apps. – Darkrum Apr 10 '18 at 04:03
@TheodorusAgumGumilang did you include cordova.js ? Also the on device ready code needs to be after that. – Darkrum Apr 10 '18 at 04:34
@Darkrum i already include that, do you mind to take a look at my script ? anything wrong in here thanks. and i already add OnLoad in my body tag too – Theodorus Agum Gumilang Apr 10 '18 at 04:46

How to Replace the Main Page in Cordova?

1 Answers1