Back Button in Tizen Web app

Back Button in Tizen Web app

BY 28 May 2015 Web Application Development

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?

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More