Languages

Menu
Sites
Language
Back Button in my Web application

Hello,

I am developping a simple inscription form, and a function login() which will be invoked when the user hit the "ok" button:

===========================

 

 <script type="text/javascript">
        function login(){
            
            sessionStorage.setItem("nomp", document.getElementById("tfnom").value);
            
            window.location.href="page2.html";
            
        }
    </script>

 

 

==========================

 

The problem is that: First, the  window.location.href doesn't work, but if I changed it to window.open("page2.html") it works and my page2.html is shown... Second, when I would like to return to my index.html page from page2.html: the back button doesn't work.

 

I've read that it is due that I am opening the page2.html into a new window, all right, but what should I do in that case?

Thank you

List

Responses

8 Replies
karray gargouri

I manage to work with the window.location.href but the hardware back button doesn't still work!

karray gargouri

I even put a console.log instruction like that:

var init = function () {
    // TODO:: Do your initialization job
	console.log("init() called");

	// add eventListener for tizenhwkey
	document.addEventListener('tizenhwkey', function(e) {
		console.log("Inside the function");
		if(e.keyName == "back") {
			try {
				tizen.application.getCurrentApplication().exit();
			} catch (error) {
				console.error("getCurrentApplication(): " + error.message);
			}
		}
	});
};

The "inside the function" message is not shown in the console, instead I always got:

It is disabled for security reasons in run mode.

P.S: I make the call of the js file into my 2 HTML pages

Palitsyna

Hello,

you should run your application in Debug mode to be able to see console.log messages. Use Debug button instead of Run button or right click on project folder -> Debug As -> 1 Tizen Web Application

daniel kim

Hi,

According to help page of Tizen SDK 2.3.1, it seems that you need to use tau method.

 

help > API References > Web Application > Tizen Web UI Framework Reference > Mobile Web > Application Page Layout

   Note

To change pages with Web UI Framework, DO NOT USE location.href or location.replace. Web UI Framework has a self-method for managing histories, and if you use the above methods, it can cause confusion.  To change pages, use tau.changePage() and tau.back().

 

Regards

Palitsyna

Hello,

as daniel kim said, you can use tau method to change pages. Here you can find information about changePage method: https://developer.tizen.org/dev-guide/2.3.1/org.tizen.web.apireference/html/ui_fw_api/mobile/page/page_change.htm#method-changePage

AVSukhov

Hello,

In your case you need add listener for each document object (window) or use window.location = url.

Or you can use jQueryMobile change page or TAU change page methods.

Or you can create template web app - > MultiPage and see how it is implemented.

Vikram

This init function is common

var init = function () {
    // register once
    if ( backEventListener !== null ) {
        return;
    }
    
    // TODO:: Do your initialization job
    console.log("init() called");
    
    var backEvent = function(e) {
        if ( e.keyName == "back" ) {
            try {
                if ( $.mobile.urlHistory.activeIndex <= 0 ) {
                    // if first page, terminate app
                    unregister();
                } else {
                    // move previous page
                    $.mobile.urlHistory.activeIndex -= 1;
                    $.mobile.urlHistory.clearForward();
                    window.history.back();
                }
            } catch( ex ) {
                unregister();
            }
        }
    }
    
    // add eventListener for tizenhwkey (Back Button)
    window.addEventListener( 'tizenhwkey', backEvent, false );
    backEventListener = backEvent;
};

tau.back() is same as window.history.back()

AVSukhov

Hello,

More info about change page in tizen you can find in documentation:

API References > Web Application > Tizen Web UI Framework Reference > Mobile Web > Application Page Layout > Page Changes