Languages

Menu
Sites
Language
[Gear] openPopup not working?

Hi, I tried the simple example found in documentation and it doesn't work!

Here's the code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
	<title>Wearable UI</title>
	<link rel="stylesheet"  href="lib/tau/themes/default/tau.min.css">
	<!-- load theme file for your application -->
	<link rel="stylesheet"  href="css/style.css">
</head>
<body>
	<div class="ui-page ui-page-active" id="main">
		<header class="ui-header">
			<h2 class="ui-title">Wearable UI</h2>
		</header>
		<div class="ui-content content-padding">
			<button id="button" class="ui-btn" onclick="openP();">Open</button>
		</div>
	</div>
	<div id="confirmPopup" class="ui-popup">
		<div class="ui-popup-header">Delete</div>
		<div class="ui-popup-content">Delete the selected item?</div>
		<div class="ui-popup-footer ui-grid-col-2">
			<button id="2btnPopup-cancel" class="ui-btn">Cancel</button>
			<button id="2btnPopup-ok" class="ui-btn">OK</button>
		</div>
	</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.min.js"></script>
<!-- load javascript file for your application -->
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
</html>

and JS:

( function () {
    window.addEventListener( 'tizenhwkey', function( ev ) {
		if( ev.keyName == "back" ) {
			var page = document.getElementsByClassName( 'ui-page-active' )[0],
				pageid = page ? page.id : "";
			if( pageid === "main" ) {
				tizen.application.getCurrentApplication().exit();
			} else {
				window.history.back();
			}
		}
	} );
} () );

function openP() {
	tau.openPopup("#confirmPopup");
}

absolutely simple ... but when I click the button nothing happens ...

List

Responses

2 Replies
Marco Buettner

You must define your popup in your page container.

Stefano Accorsi

Damn was it so simple? :(

Thank you so much, the documentation led me to a wrong conclusion:

<!--HTML code-->
<div id="1btnPopup" class="ui-popup">
      <div class="ui-popup-header">Power saving mode</div>
      <div class="ui-popup-content">
      </div>
      <div class="ui-popup-footer">
      <button id="1btnPopup-cancel" class="ui-btn">Cancel</button>
   </div>
</div>
/* JavaScript code */
<script>
   /* Popup opens with button click */
   button.addEventListener("click", function(ev) 
   {
      tau.openPopup("#1btnPopup");
   });

   /* Popup closes with Cancel button click */
   document.getElementById('1btnPopup-cancel').addEventListener('click', function(ev)
   {
      tau.closePopup();
   });
</script>

Once again: thank you!