CODEWITHSUNDEEP
javascriptandroidhtmlcordova
LaurelS
LaurelS

Reputation: 492

How to get a javascript/html5 button to return to previous page? (Browser/PhoneGap)

Second Edited Version

***** Works in PhoneGap (as well as Safari) *******

**** Using ideas from Matthais responses below **** I still don't have the "navigator.notification.alert" technique (found in ) How to navigate one page to another page in android phonegap? working, because I think that's a PhoneGap function and I don't yet understand how to download or link to those libraries (searching wrong somehow) phonegap page 1

phonegap page 2

****** index.html is the page that - with a button - links out to secondLinkPageVerK.html, which links back - with a button -to this page *******

<!DOCTYPE HTML>
<html>
<head>


<title>FIRST PhoneGap Page 1</title>

      <script type="text/javascript" charset="utf-8">




      </script>      
      <script type="text/javascript" charset="utf-8">

         function onLoad()
         {
              document.addEventListener("deviceready", onDeviceReady, true);
         }

         function onDeviceReady()
         {
              // navigator.notification.alert("PhoneGap is working");
         }

         function callAnothePage()
         {
            window.location = "secondLinkPageVerK.html";
         }

      </script>

   </head>

   <body onload="onLoad();">
    <h1>Welcome to Page 1</h1>
    <h2> Version K </h2>

    <button name="buttonClick" onclick="callAnothePage()">Click Me To Move to Second Page</button>

******secondLinkPageVerK.html - The second page to link to ********

<!DOCTYPE HTML>
<html>
<head>


<title>SECOND PhoneGap Page 2</title>

       <script>   


         function onLoad()
         {
              document.addEventListener("deviceready", onDeviceReady, true);
              // document.addEventListener("backbutton", BackKeyDown, true);
         }

        // using it this way causes confusion, so moving to onLoad
         function onDeviceReady()
         {
              // navigator.notification.alert("PhoneGap is working");

         }

         function callAnothePage()
         {
            window.location = "index.html";
         }


         // for the back button
         /*
           document.addEventListener("deviceready", onDeviceReady, true);
         */

         function onDeviceReady()
         {     
               document.addEventListener("backbutton", BackKeyDown, true);
         }

         function BackKeyDown()
         {
             navigator.notification.alert();
             //navigator.app.exitApp();  // For Exit Application
         }



         function historyBack(){   
              history.go(-1);
              navigator.app.backHistory();
              }     



      </script>

  </head>

  <body onload="onLoad();">
     <h1>Welcome to Page 2</h1>
       <h2> Version K </h2>
    <h2>Link Back and Forth</h2>
    <button name="buttonClick" onclick="callAnothePage()">RETURN to Page 1 - hardcoding local URL</button>
      <center> .* .* . </center>
    <center> . . . </center>
      <center> .* .* . </center>
    <button onclick="historyBack()">Return - history.go technique - cleaner technique</button>

  </body>

  </html>

Upvotes: 0

Views: 1529

Answers (1)

Matthias Gwiozda
Matthias Gwiozda

Reputation: 595

Im not sure if i understood everything. But i think thats your problem: this (navigator.notification.alert();) is a function, with which you can use dialogs. Its a plugin for cordova, which you have to install if you want to use it. The following code shows how to override the backbutton-event (the backbutton of your device) and not how to return to the previous page:

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

         function onDeviceReady()               
     {                    
           document.addEventListener("backbutton", BackKeyDown, true);               
     }               

     function BackKeyDown()               
     {               
         console.log ("user return");               
         //debugger;               
         navigator.notification.alert();               
         //navigator.app.exitApp();  // For Exit Application               
     }

I think the solution for your problem could be the following button:

<button onclick="goback()">go back</button>

with the following function:

    <script>
    function goback(){   
    history.go(-1);
    navigator.app.backHistory();}     </script>

here the reference

Edit: To explain the navigator.notification.alert function i show you an example of the cordova plugin Page.

First of all (if you want to use the dialogs) you need to install the plugin with your cli:

cordova plugin add cordova-plugin-dialogs

Then this plugin is installed in your selected cordova folder. Afterwards you can use this function like this for example: 

function alertDismissed() {
    // do something
}

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

with that you are creating something like an alert(); function, but you can define a function ( alertDismissed() ) that will run after the user clicks on the 'Done' - Button. I hope this helped you to understand.

Upvotes: 1

Related Questions