jquery popup as confirmation
Posted: 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". 
Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
The caption text here should read "Nursery Alert Says...". The title text should say "Passwords do not match...etc".
Please post code that you use.
It's the same code as listed above. We call the code using:
MessageDialog( 'Nursery Alert', 'Your password blah blah blah' )
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
PERFECT! Thank you!
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
Hi,
Does this condition pass?preif (Appery('toggle_Privacy').val()=="off")/pre
You can set an alert to check this.
i already did it and the condition pass
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
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?