Dialogs with (popular) JavaScript libraries

The Dojo Toolkit and jQuery UI both offer a dialog “component” (with drag-and-drop). Dojo has two ways of creating such a dialog. There is a declarative and a programmatic way to do so. The declarative approach looks like:

<div dojotype="dijit.Dialog" title="First Dialog">

 Hello New York!

The div element here is containing a special attribute (dojoType) to tell Dojo, that this is a component of type “dijit.Dialog“. This is straightforward, but… it is reasonable that some don’t like the extra expando (dojoType). The programmatic way is IMO more natural to developers:

var dialog = new dijit.Dialog(
  {id:"dialog1", title: "First Dialog"});

var dialogContent = "Hello New York!";

Now you are using the JavaScript-API of Dojo to create (and launch) the dialog, when ever you want.In jQuery UI, this is done in a really cool way:

<div id="dialog1" class="flora"
  title="First Dialog">

  Hello New York!

This little snippet of HTML is not visible (b/c of the used CSS) and when you want to launch the dialog, you just have a very easy JS callback:

launchMyDialog = function()

This is cool. Even more cool is the ready-callback that jQuery “core” is offering you:


When the DOM is ready, the dialog is launched. Pretty neat!


Posted in ajax, javascript, web²

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: