a simple and elegant yes no dialog using dojo

a very common situation in ui design is to let the user confirm an action (especially one which is destructive) via a dialog. similar to microsoft windows yes/no or ok/cancel dialogs.

here is how do accomplish this using dojo, something I customized for our needs,

1. first the markup

Yes

No

2. next the handler

function yesno()
{
// assume that yesno is called when the user clicks on the object which is key // to the elements being destroyed.

var obj = this;

// my yesno is reusable, you could arbitrarily bind the same // dialog to more than one object. i store the title and the // description of the dialog in the object itself.

var description = obj.node.dialog_description;
var title = obj.node.dialog_title;

// tie the user action handlers – here if the user clicks on yes, // the object has to be destroyed.

dojo.byId(‘yesbutton’).onclick = dojo.hitch(obj, remove);

// no? simply hide the dialog.

dojo.byId(‘nobutton’).onclick = dojo.hitch(obj, function(){yndialog.hide()}); dojo.byId(‘yncontent’).innerHTML = description;
yndialog.set(‘title’, title);
yndialog.show();
}

function remove()
{

// this is the remove handler. i associate this handler with the // object itself such that ‘this’ points to the object.

var obj = this;

dojo.destroy(obj); // or trigger a server side action and then destroy this node. }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: