Languages

Menu
Sites
Language
How to show question dialog with yes and no buttons

Hello,

I would like to show the user a standard question dialog to confirm a user action with 2 buttons (yes and no). I browsed through the documentation but could not find a way to do this.

Does anyone know of an easy way to pop up a simple dialog like this and get the user response in a callback for further processing?

Thank you for your help.

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

16 Replies
konduri sai swathi
Hi , Try the below code : 
                                                var x;
						var r=confirm("Ok or Cancel ?");
						if (r==true)
						{
							x="You pressed OK!";
	                                                console.log(x);
						}
						else
						{
							x="You pressed Cancel!";
                                                       console.log(x);
						}
Vandersteene
Thank you for the information. I tried it and it works. Now, is there any way to change the captions on the buttons to 'Yes' and 'No' and add a title to the top of the dialog just like in the standard dialogs used by Tizen on the device and emulator?
konduri sai swathi
Hi , I have tried it and here is the code : http://jsfiddle.net/CdwB9/509/
Marco Buettner
Use the Popup UI Element https://developer.tizen.org/help/topic/org.tizen.web.uiwidget.apireference/html/widgets/widget_popup.htm
Vandersteene
Thank you for the information. I looked at the link you provided and noticed that the example was in HTML with div elements. Is there any way to create the Popup widget directly in code instead of in HTML? A code example would be very helpful since I'm not yet very familiar with developing web apps.
Marco Buettner
In your page structur you can easy add a default popup template it should looks like this index.html 
<div id="mainpage" data-role="page">
	<div id="mypopup" data-role="popup" data-position-to="window" class="center_title_2btn">
		<div class="ui-popup-title">
      			<h1>My popup</h1>
		</div>
		<div class="ui-popup-text">My popup dialog</div>
		<div class="ui-popup-button-bg">
			<a data-role="button" id="popup-btn-yes" data-inline="true">yes</a>
			<a data-role="button" data-rel="back" data-inline="true">no</a>
		</div>
	</div>

	<div data-role="header">
		// your header content
	</div>

	<div data-role="content">
		// your main content
	</div>

	<div data-role="footer">
		//
	</div>
</div>
*.js 
$("#mypopup").popup('show'); // shows the popup
$("#mypopup").popup('close'); // close the popup
$("#popup-btn-yes").on("click", function(e, u) {// code on for yes}); // access to the yes button
Vandersteene
Thank you for your sample. I created a new web app project (jQuery Mobile) and copied all of your code in the body section of 'index.html'. In the init() function in 'main.js' I added the line '$("#mypopup").popup('show');' (without the quotes). There are several problems: 1. Next to the line in 'index.html' where the popup is defined ('
Vandersteene
continued... 1. Next to the line in 'index.html' where the popup is defined there is a warning 'Undefined attribute value (popup)'. 2. When I run the app, the popup is not shown and in the console there is an error message 'wgt/js/jquery-1.8.2.min.js (2) :Error: no such method 'show' for popup widget instance'.
konduri sai swathi
Hi , I have created a JQuery app for popup, try the below code 
<body>
	<div data-role="page">
		<div data-role="header" data-position="fixed">
			<h1>Single-page application</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<p>This is a single page boilerplate template that you can copy
				to build your first jQuery Mobile page.</p>
			<a href="#popup_div" data-rel="popup" data-inline="true">Click</a>
			<div id="popup_div" data-role="popup" data-overlay-theme="a" data-position-to="window">
				Yes or No ? <br><a data-role="button" data-rel="back" data-inline="true">Yes</a>
				<a data-role="button" data-rel="back" data-inline="true">No</a>

			</div>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Footer content</h4>
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->
</body>
In JS you can write functionality for the 'yes' & 'no' buttons . In the above code if you click yes or no both with exit the popup ,just remove data-rel="back" for 'yes' button .
Vandersteene
Thank you for your help. I copied your html code exactly in 'index.html' and added a call to the popup in the init function in 'main.js'. Still, I have the same problems as before: 1. Next to the lines with the link to open the popup and the popup div itself in 'index.html' there is a warning 'Undefined attribute value (popup)'. 2. When I run the app, the popup is not shown and in the console there is an error message 'wgt/js/jquery-1.8.2.min.js (2) :Error: no such method 'show' for popup widget instance'. 3. Also, there is a link on the app screen to show the popup but I would like to have no link there and just be able to show the popup from code in 'main.js' only when needed to ask the user.
konduri sai swathi
Hi, You need not add any code in JS , it just works fine with the html part itself . Paste the code i posted in index.html , run it and click on the link then you'll get the popup . Try it once like this
Vandersteene
Thank you. Your sample works perfectly when you click the link on the html page like you said. However, I cannot put a link on the page of my app to activate the popup because the popup should only be displayed when the user performs a certain action and needs to answer 'Yes' or 'No'. That's why I need to be able to show the popup from 'main.js' in response of what the user does.
Marco Buettner
It was my fault... Instead to use "show" you have to use "open"... SORRY!
Marco Buettner
You need jQuery Mobile to use my method... I'm only work with the Tizen Framework which has already include jQuery and jQuery Mobile. If you use jQuery Sample maybe you have to add jQuery Mobile to your project to use .popup('show').
Vandersteene
Great. Thanks. The popup opens now and I can set the callbacks for both buttons. In these callbacks I try to close the popup but unfortunately that does not work and the popup stays on the screen. 

var onDialogNo = function (e, u) {
	console.log ("popup no button clicked");
	$('#mypopup').popup('close');
}

var onDialogYes = function (e, u) {
	console.log ("popup yes button clicked");
	$('#mypopup').popup('close');
}
Marco Buettner
Nice to hear that the opening works... Do you get an error when you press a button? The method of popup widget can you see here. http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/methods.html