jquery popup as confirmation

Sun Sep 22, 2013 12:08 pm

The caption text here should read "Nursery Alert Says...". The title text should say "Passwords do not match...etc".

Sun Sep 22, 2013 1:00 pm

Please post code that you use.

Sun Sep 22, 2013 7:45 pm

It's the same code as listed above. We call the code using:

MessageDialog( 'Nursery Alert', 'Your password blah blah blah' )

Mon Sep 23, 2013 7:50 am

Hello! Please try the following code:
pre<div data-role="popup" data-dismissible="false" data-overlay-theme="a" data-theme="c" style="max-width:400px;" id="myDialog" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1 class="dlg_caption"> </h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="dlg_title"> </h3>
<p class="dlg_text"> </p>
<a href="#" data-role="button" class="okButton" data-inline="true" data-theme="c">OK</a>
<a href="#" class="noButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">NO</a>
<a href="#" class="cancelButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Cancel</a>
</div>
</div>
<script>
function MessageDialog( caption, title, text, options ){
function closePopup( next ){
return function( event ){
next.apply( this, arguments );
$( '#myDialog' ).popup( "close" );
}
}
var $dlg = $( '#myDialog' );
options = $.extend({}, {
onOK: closePopup( $.noop ),
onNO: null,
onCancel: null
}, options)
$dlg.find( '.cancelButton' ).toggle( $.isFunction(options.onCancel) );
$dlg.find( '.noButton' ).toggle( $.isFunction(options.onNO) );
$dlg.find( '.okButton' ).off('vclick').on({ vclick: closePopup( options.onOK )});
$dlg.find( '.noButton' ).off('vclick').on({ vclick: closePopup( options.onNO ) });
$dlg.find( '.cancelButton' ).off('vclick').on({ vclick: closePopup( options.onCancel ) });
$dlg.find( '.dlg_caption' ).text( caption '' );
$dlg.find( '.dlg_title' ).text( title '' );
$dlg.find( '.dlg_text' ).text( text || '' );
$dlg.popup( "open" );
}
</script>/pre

Mon Sep 23, 2013 10:56 am

PERFECT! Thank you!

Wed Jan 29, 2014 3:11 pm

hello ,
in my app i have several distinct pages (not rendered in one html)
i followed your instructions so
on my first login page
1) i added the html component and added the html Marina suggested.
2) i setted it to invisile and i saved it as a custom component.
3) on the success event of a rest i added a js :
codeif (messaggio2 == 'NON OK') {
//alert('Username o password errata');
MessageDialog( 'Real Time Doctors', 'Attenzione', 'Username o password errata' );
return;
}/code

and everythings works on the login page.

then on another page Registration page i did the steps added the custom component previously saved and on a button click i added
codeif (Appery('toggle_Privacy').val()=="off") {
//alert("per continuare devi prima leggere ed accettare l'informativa sulla privacy");

Code: Select all

MessageDialog( 'Real Time Doctors', 'Attenzione', 'you have to accept privacy conditions' );}/code

where 'toggle_Privacy' is a toggle component in my page.

i tested my app on the chrome and i get no errors in the cosole

But while the login page works in the registration page if i try the alert it works while if try to open the jquery popup nothing appens

is it something wrong with my steps

Wed Jan 29, 2014 7:18 pm

Hi,

Does this condition pass?preif (Appery('toggle_Privacy').val()=="off")/pre
You can set an alert to check this.

Thu Jan 30, 2014 8:16 am

i already did it and the condition pass

Thu Jan 30, 2014 2:10 pm

Hello! If you want to use this popup on several screens:
1) In HTML component you use to create custom component should be precode<div data-role="popup" data-dismissible="false" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all myDialog">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1 class="dlg_caption"> </h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="dlg_title"> </h3>
<p class="dlg_text"> </p>
<a href="#" data-role="button" class="okButton" data-inline="true" data-theme="c">OK</a>
<a href="#" class="noButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">NO</a>
<a href="#" class="cancelButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Cancel</a>
</div>
</div>/code/pre
2) Create new JS asset with the following code precodefunction MessageDialog( caption, title, text, options ){
function closePopup( next ){
return function( event ){
next.apply( this, arguments );
$dlg.popup( "close" );
$dlg = null;
}
}
var $dlg = $( '.myDialog', $.mobile.activePage );
options = $.extend({}, {
onOK: function(){},
onNO: null,
onCancel: null
}, options)
$dlg.find( '.cancelButton' ).toggle( $.isFunction(options.onCancel) );
$dlg.find( '.noButton' ).toggle( $.isFunction(options.onNO) );
$dlg.find( '.okButton' ).off('vclick').on({ vclick: closePopup( options.onOK )});
$dlg.find( '.noButton' ).off('vclick').on({ vclick: closePopup( options.onNO ) });
$dlg.find( '.cancelButton' ).off('vclick').on({ vclick: closePopup( options.onCancel ) });
$dlg.find( '.dlg_caption' ).text( caption '' );
$dlg.find( '.dlg_title' ).text( title '' );
$dlg.find( '.dlg_text' ).text( text || '' );
$dlg.popup( "open" );
}/code/pre

Mon Feb 03, 2014 1:22 pm

thank you it works.
but now i'm having another problem:
i have a popup (added by appery like a new page) with a select component.
i would like to add a jquery popup on a particular selected value.

on the select value change event i added:
codevar stato2 = Appery('select_stato').val();
if (stato2 == "exit"){
MessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { /* useful code / },
onNO: function() { / useful code */ }
} );
}/code

but i get 500 (Error Executing Database Query.) on the console

if i use
codeif (stato2 == "exit"){
alert('Ciao');
}/code

i get the alert.

and if i add a new button and on a click event i run the same js i run on the select value change event
codevar stato2 = Appery('select_stato').val();
if (stato2 == "exit"){
MessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { /* useful code / },
onNO: function() { / useful code */ }
} );
}/code

i get the correct jquery popup.

why i get the error by running the code on the select component value change event?
how i can solve the problem?