Forum | Appery.io

I need to have a popup confirmation box to confirm whether to continue or not

Javascript confirm is too basic, as I need to display several lines of text with a Yes and No button

I have tried your popups but they just appear to navigate to the popup screen when 'open as popup' used in event.

I just want the confirmation to appear over the top of the existing screen

Any idea how I can accomplish this in Appery

regards
Steve

Hello Steve - you can do it.

To open a popup, you need to use jQuery Mobile API.
code$.mobile.changePage("myPopup.html", {transition: "pop"});/code

where the popup name is 'myPopup'.

Hi IIIya

That code navigates to the popup screen and when I close it it reloads the original screen so all the data is lost

I need it to work like a javascript confirm

Can you describe more specific what kind of logic you want in this confirmation window and what transitions will be included?

Hi Illya

I have a page where users can select services, staff, date etc to book an Appointment via the app

When they click 'Book appointment' button I want to display a popup which displays the Services they have selected and asking them to continue click 'Yes' or 'No' to close popup so they can make any changes required first

The standard javascript confirm does the job, but it has OK / Cancel buttons and I would rather have Yes/No
Also as I am displaying a summary of the Services /Staff / Date etc they have selected, I would like to have more control over the displayed text

I was hoping there was a more feature rich alternative to the plain javascript confirm dialog

regards
Steve

Hello! In fact popup used in Appery.io is a dialog http://api.jquerymobile.com/dialog/. If you need popup use http://api.jquerymobile.com/popup/

Hi!

I have the same problem. When you close the popup the data in the input fields are lost and the user must reenter data. Do we have an example of a javascript that opens a popup in Appery and keeps the data in the form when window is closed? I would also be cool to see the mother screen dimmed in the backgroud. Now we see a black screen in the background.

Hi Ole,

1) Add Panel to page
2) In its properties, untick "Visible"
3) Add to Panel div with data-role="popup", and any content and button handlers you need, for example:
code<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all"> <div data-role="header" data-theme="a" class="ui-corner-top"> <h1>Delete Page?<&#47;h1> <&#47;div> <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> <h3 class="ui-title">Are you sure you want to delete this page?<&#47;h3> <p>This action cannot be undone&#46;<&#47;p> <a href="#" data-role="button" id="okButton" data-inline="true" data-rel="back" data-theme="c">OK<&#47;a> <a href="#" id="noButton" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">NO<&#47;a> <&#47;div> <&#47;div>

<script>
$('#okButton')&#46;die()&#46;live({
click: function() {
alert("OK was clicked");
}
});
$('#noButton')&#46;die()&#46;live({
click: function() {
alert("NO was clicked");
}
});
<&#47;script>/code
4) On Page load run:code$('#popupDialog')&#46;popup();/code
5) To open popup run:code$('#popupDialog')&#46;popup( "open", {});/code

Hi Katya!
Works like a charm! We love you. You are the best!!!

Please don't repeat my mistake.

Take care if you have your app in one HTML file (see Project option) and you want to have multiple dialog boxes.

Do not use edit copy edit paste as I did. Because you must carefully find your own names on the buttons in the example above.

For example change id="okButton" to id="dlg1okButton" and then also

from $('#okButton').die().live({

to

$('#dlg1okButton').die().live({