Languages

Menu
Sites
Language
Back Button in Tizen Web app

Hello,

I am developping a Tizen web app, I have an "index.html" file and a button who redirect me into a "bank.html" file, I want to implement the back hardkey button in a page named "bank.html" as follow:

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,body,#map-canvas {
    height: 100%;
	margin: 0px;
	padding: 0px
}
</style>
<title>Place search pagination</title>
<script
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
        <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>

<script>
	var map, placesList;

	function initialize() {
		var pyrmont = new google.maps.LatLng(34.732599, 10.766190);

		map = new google.maps.Map(document.getElementById('map-canvas'), {
			center : pyrmont,
			zoom : 17
		});

		var request = {
			location : pyrmont,
			radius : 500,
			types : [ 'bank' ]
		};

		placesList = document.getElementById('places');

		var service = new google.maps.places.PlacesService(map);
		service.nearbySearch(request, callback);
	}

	function callback(results, status, pagination) {
		if (status != google.maps.places.PlacesServiceStatus.OK) {
			return;
		} else {
			createMarkers(results);

			if (pagination.hasNextPage) {
				var moreButton = document.getElementById('more');

				moreButton.disabled = false;

				google.maps.event.addDomListenerOnce(moreButton, 'click',
						function() {
							moreButton.disabled = true;
							pagination.nextPage();
						});
			}
		}
	}

	function createMarkers(places) {
		var bounds = new google.maps.LatLngBounds();

		for (var i = 0, place; place = places[i]; i++) {
			var image = {
				url : place.icon,
				size : new google.maps.Size(71, 71),
				origin : new google.maps.Point(0, 0),
				anchor : new google.maps.Point(17, 34),
				scaledSize : new google.maps.Size(25, 25)
			};

			var marker = new google.maps.Marker({
				map : map,
				icon : image,
				title : place.name,
				position : place.geometry.location
			});

			placesList.innerHTML += '<li>' + place.name + '</li>';

			bounds.extend(place.geometry.location);
		}
		map.fitBounds(bounds);
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#results {
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -195px;
	height: 380px;
	width: 200px;
	padding: 5px;
	z-index: 5;
	border: 1px solid #999;
	background: #fff;
}

h2 {
	font-size: 22px;
	margin: 0 0 5px 0;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 321px;
	width: 200px;
	overflow-y: scroll;
}

li {
	background-color: #f1f1f1;
	padding: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

li:nth-child(odd) {
	background-color: #fcfcfc;
}

#more {
	width: 100%;
	margin: 5px 0 0 0;
}
</style>

<script type="text/javascript" src="./js/back.js"></script>
</head>
<body id="bankpage">
	<div id="map-canvas"></div>

</body>
</html>

 

Here is the back.js file:

 

var backEventListener = null;

var unregister = function() {
    if ( backEventListener !== null ) {
        document.removeEventListener( 'tizenhwkey', backEventListener );
        backEventListener = null;
        window.tizen.application.getCurrentApplication().exit();
    }
}

//Initialize function
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)
    document.addEventListener('tizenhwkey', backEvent);
    backEventListener = backEvent;
};

$(document).bind('pageinit', init );
$(document).unload( unregister );

 

The problem is that, when i added this two lines:

<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>

 

in the "bank.html" file, I got a blank page, and when I remove them, the button key didn't work with this error:

 

js/back.js (44) :ReferenceError: Can't find variable: $

on the following line:

$(document).bind('pageinit', init );

 

What's wrong?

List

Responses

14 Replies
AVSukhov

Hello,

This error occurs due to the fact that you delete jQuery library where defined $ variable.

karray gargouri

sounds bizarre! so what should I do to avoid deleting the jQuery library?

AVSukhov

Hello,

There is not a bizzare. You ar using jQuery in your project:

$(document)

but after deleteing this library you wonder what the code stops working.

Could you please provide you code with button and handler?

Or share your project. This will be useful for analysis.

And with jQuery try to launch your app in Debug As mode, can be in the console there are any errors.

karray gargouri

ok, I 've test it with two ways:

First one:

As I said before, I made a "back.js" file which contains this code:

var backEventListener = null;

var unregister = function() {
    if ( backEventListener !== null ) {
        document.removeEventListener( 'tizenhwkey', backEventListener );
        backEventListener = null;
        window.tizen.application.getCurrentApplication().exit();
    }
}

//Initialize function
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)
    document.addEventListener('tizenhwkey', backEvent);
    backEventListener = backEvent;
};

$(document).bind('pageinit', init );
$(document).unload( unregister );

this page will be invoked in the "bank.html" like that:

 

<script type="text/javascript" src="./js/back.js"></script>

 

Second way:

in the same file "back.js", I replace the above code with this:

 

window.addEventListener('tizenhwkey', function(e) {
    if ( e.keyName == "back" ) {
        try {
            if ( $.mobile.urlHistory.activeIndex <= 0 ) {
                // if first page, terminate app
            	window.tizen.application.getCurrentApplication().exit();
            } else {
                // move previous page
                $.mobile.urlHistory.activeIndex -= 1;
                $.mobile.urlHistory.clearForward();
                window.history.back();
            }
        } catch( ex ) {
          console.log("Exception occured!");
        }
    }
	});

But in the execution, I got in the IDE console:

Exception occured!

 

karray gargouri

This is the code of the "bank.html":

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,body,#map-canvas {
    height: 100%;
	margin: 0px;
	padding: 0px
}
</style>
<title>Place search pagination</title>
<script
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

<script>
	var map, placesList;

	function initialize() {
		var pyrmont = new google.maps.LatLng(34.732599, 10.766190);

		map = new google.maps.Map(document.getElementById('map-canvas'), {
			center : pyrmont,
			zoom : 17
		});

		var request = {
			location : pyrmont,
			radius : 500,
			types : [ 'bank' ]
		};

		placesList = document.getElementById('places');

		var service = new google.maps.places.PlacesService(map);
		service.nearbySearch(request, callback);
	}

	function callback(results, status, pagination) {
		if (status != google.maps.places.PlacesServiceStatus.OK) {
			return;
		} else {
			createMarkers(results);

			if (pagination.hasNextPage) {
				var moreButton = document.getElementById('more');

				moreButton.disabled = false;

				google.maps.event.addDomListenerOnce(moreButton, 'click',
						function() {
							moreButton.disabled = true;
							pagination.nextPage();
						});
			}
		}
	}

	function createMarkers(places) {
		var bounds = new google.maps.LatLngBounds();

		for (var i = 0, place; place = places[i]; i++) {
			var image = {
				url : place.icon,
				size : new google.maps.Size(71, 71),
				origin : new google.maps.Point(0, 0),
				anchor : new google.maps.Point(17, 34),
				scaledSize : new google.maps.Size(25, 25)
			};

			var marker = new google.maps.Marker({
				map : map,
				icon : image,
				title : place.name,
				position : place.geometry.location
			});

			placesList.innerHTML += '<li>' + place.name + '</li>';

			bounds.extend(place.geometry.location);
		}
		map.fitBounds(bounds);
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#results {
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -195px;
	height: 380px;
	width: 200px;
	padding: 5px;
	z-index: 5;
	border: 1px solid #999;
	background: #fff;
}

h2 {
	font-size: 22px;
	margin: 0 0 5px 0;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 321px;
	width: 200px;
	overflow-y: scroll;
}

li {
	background-color: #f1f1f1;
	padding: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

li:nth-child(odd) {
	background-color: #fcfcfc;
}

#more {
	width: 100%;
	margin: 5px 0 0 0;
}
</style>

	<script type="text/javascript" src="./js/back.js"></script>
	
</head>
<body id="bankpage">
	<div id="map-canvas"></div>
</body>
</html>

 

And this is the code of invoking the "bank.html":

 

<div class="caption-text">
    	<h3>Banks</h3>
		<a class=" btn btn-default" href="bank.html" data-ajax="false"><i>search</i></a>
</div>

 

AVSukhov

Hello,

Using data-ajax="false" you are define a hyperlink as external, which not only disables Ajax, but also removes it from the page hash history and refreshes the webpage.

Therefore you can not go back.

Try to guide Multi Page Application template in IDE.

Marco Buettner 
var backEventListener = null;
var unregister = function() {
    if ( backEventListener !== null ) {
        document.removeEventListener( 'tizenhwkey', backEventListener );
        backEventListener = null;
        window.tizen.application.getCurrentApplication().exit();
    }
}

//Initialize function
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 (window.history.length <= 0 ) {
                    // if first page, terminate app
                    unregister();
                } else {
                    // move previous page
                    window.history.pop()
                    window.history.back();
                }
            } catch( ex ) {
                unregister();
            }
        }
    }
    
    // add eventListener for tizenhwkey (Back Button)
    document.addEventListener('tizenhwkey', backEvent);
    backEventListener = backEvent;
};

document.addEventListener('pageinit', init);
document.addEventListener('unload', unregister);

Try it without jQuery?

karray gargouri

Unfortunately, it doesn't work!

Marco Buettner

Did you get an error? Maybe you have to debug with console.log where it stopped

karray gargouri

I didn't get any error, but the back button doesn't work.

I added some "console.log" to my code, but nothing is displayed on the IDE console.

var backEventListener = null;
var unregister = function() {
    if ( backEventListener !== null ) {
        document.removeEventListener( 'tizenhwkey', backEventListener );
        backEventListener = null;
        window.tizen.application.getCurrentApplication().exit();
    }
}

//Initialize function
var init = function () {
    console.log("init");
    // 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 (window.history.length <= 0 ) {
                    // if first page, terminate app
                	console.log("terminate app");
                    unregister();
                } else {
                    // move previous page
                	console.log("else clause");
                    window.history.pop()
                    window.history.back();
                }
            } catch( ex ) {
            	console.log("catch bloc");
                unregister();
            }
        }
    }
    
    // add eventListener for tizenhwkey (Back Button)
    document.addEventListener('tizenhwkey', backEvent);
    backEventListener = backEvent;
};

document.addEventListener('pageinit', init);
document.addEventListener('unload', unregister);

 

I didn't figure out the reason?

Seoghyun Kang

Hello,

 

When I run your code, the following line did not work well.

[46line] document.addEventListener('pageinit', init);

 

So I changed it to "window.onload = init;". After I fixed it, the back button worked well.

 

In summary,

document.addEventListener('pageinit', init);  =>  window.onload = init;

 

 

Please refer it.

 

karray gargouri

Hi,

your solution is great, I tested it using this code:

 

 var backEvent = function(e) {
        if ( e.keyName == "back" ) {
            try {
                if (window.history.length <= 0 ) {
                    // if first page, terminate app
                    console.log("terminate app");
                    unregister();
                } else {
                    // move previous page
                	console.log("else clause");
                    window.history.pop()
                    console.log("else clause2");
                    window.history.back();
                }
            } catch( ex ) {
            	console.log("catch bloc");
                unregister();
            }
        }
    }

When I run my application, I got this display:

js/back.js (31) :else clause
js/back.js (37) :catch bloc
js/back.js (3) :unregister

and the application closed.

karray gargouri

Just to mention that I tested it when I am in the "bank.html". What's wrong?

karray gargouri

I figure out why!

this line make the exception:

window.history.pop()

 

I comment it and my code is working!