jquery popup as confirmation

[bahar.wadia]

You say..1) Add Panel to page. Where can I find the Panel component ?

[maxkatz]

Sorry, the Panel has been renamed to HTML component.

[bahar.wadia]

That worked.

Any suggestions on how I can make this reusable code to be used throughout my app. I don't what to keep adding HTML throughout my app. It would be ideal for me to use this instead of the 'alert' dialog.

[Anton Artyukh5836028]

You can try to create Custom Component from this panel and JS-code.

[bahar.wadia]

Can you please provide an example of this.

Thank you.

[Maryna Brodina]

Sorry, don't have code sample. It should be coded by you.

[bahar.wadia]

Of course, it will be coded by me, but you surely must have some example. I am sure the entire community would appreciate your help.

Can you not help out a newbee ?

[Anton Artyukh5836028]

Hello, as asked above, here is code of dialog custom component.

Use it as body of HTML component.

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">&nbsp;<&#47;h1>
<&#47;div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">&nbsp;<&#47;h3>
<p class="dlg_text">&nbsp;<&#47;p>
<a href="#" data-role="button" class="okButton" data-inline="true" data-theme="c">OK<&#47;a>
<a href="#" class="noButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">NO<&#47;a>
<a href="#" class="cancelButton" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Cancel<&#47;a>
<&#47;div>
<&#47;div>

<script>
function MessageDialog( caption, title, text, options ){
function closePopup( next ){
return function( event ){
next&#46;apply( this, arguments );
$( '#myDialog' )&#46;popup( "close" );
}
}
var $dlg = $( '#myDialog' );
options = $&#46;extend({}, {
onOK: closePopup( $&#46;noop ),
onNO: null,
onCancel: null
}, options)

$dlg&#46;find( '&#46;cancelButton' )&#46;toggle( $&#46;isFunction(options&#46;onCancel) );
$dlg&#46;find( '&#46;noButton' )&#46;toggle( $&#46;isFunction(options&#46;onNO) );

$dlg&#46;find( '&#46;okButton' )&#46;off('vclick')&#46;on({ vclick: closePopup( options&#46;onOK )});
$dlg&#46;find( '&#46;noButton' )&#46;off('vclick')&#46;on({ vclick: closePopup( options&#46;onNO ) });
$dlg&#46;find( '&#46;cancelButton' )&#46;off('vclick')&#46;on({ vclick: closePopup( options&#46;onCancel ) });

$dlg&#46;find( '&#46;dlg_caption' )&#46;text( caption '' );
$dlg&#46;find( '&#46;ui-title' )&#46;text( title '' );
$dlg&#46;find( '&#46;dlg_text' )&#46;text( text || '' );

$dlg&#46;popup( "open" );
}
<&#47;script>
/pre
And create custom component.

After this:

ul
liYou can create simple alert as:
preMessageDialog( 'MyAppName', 'Alert Text' );/pre/li
liAlert with additional text:
preMessageDialog( 'MyAppName', 'Alert Bold Text', 'Additional text' );/pre/li
liDialog with OK/NO buttons:
preMessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { &#47;* useful code &#47; },
onNO: function() { &#47; useful code &#47; }
} );/pre/li
liDialog with OK/Cancel buttons:
preMessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { &#47; useful code &#47; },
onCancel: function() { &#47; useful code &#47; }
} );/pre/li
liOr dialog with OK/NO/Cancel buttons:
preMessageDialog( 'MyAppName', 'Alert Text', false, {
onOK: function() { &#47; useful code &#47; },
onNO: function() { &#47; useful code &#47; },
onCancel: function() { &#47; useful code *&#47; }
} );/pre/li

Of Course you can replace 'MyAppName' with constant which defined somewhere else.
And there is no need to add code for closing popup. Every action is wrapped by code for closing popup./ul

[Doug Black]

LOVE THIS! Thank you!

For some reason though, my caption just says my title text. Can't figure it out. Any thoughts?

[Alena Prykhodko]

Hello! Please clarify what title text? Is it bound with code above?