13.08.2010

dojo and Notes: Article 8 - dijit.Dialog - Modal dialogs with AJAX

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/dojo-and-Notes-article-8-dijit.Dialog

Category: dojo, Web-Entwicklung, Entwicklung, Lotus Domino

While the last article in this dojo series was only a small modification we will cover dijits in this one. Dijits are GUI elements and the name come from dojo interface widgets = dijit. From the many possible dijits we choose the dijit.Dialog for our sample. The dijit.Dialog object creates a modal dialog.

One way of using a dijit.Dialog is to invoke it with a DOM node as content. Another more interesting way of using it is to specify an URL. The content of this URL is then loaded via AJAX. All the complexity needed for that is capsulated by the object. As an application developer you just have to use it. It is simply genial.

For our sample application we will use the dialog for showing some speaker information after clicking on the speaker name. As always we start with a look at the code we need.

//Loads a dialog
dojo.require("dijit.Dialog");

//Prepare the dialog
function prepareDialog(){
//creates a new dialog
var myDijit = new dijit.Dialog({title: "Referent", id:"dialog", style:"width:300px"});
//appends the dialog to an existing DOM node
dojo.byId("sessions").appendChild(myDijit.domNode);
//the dialog is hidden until called
}

function showSpeakerRefByName(speakerNameEncoded){
//get the dialog
var dialogDijit = dijit.byId("dialog");
var path = webPath + "/SpeakerDescriptionByName/" + speakerNameEncoded;
dialogDijit.attr('href', path);
dialogDijit.show();
}

The first line should be a no-brainer by now. It tells dojo to load the dijit.Dialog package.

The function prepareDialog() creates a new dijitDialog object. The constructor needs a configuration object. This is a common technique for a lot of dojo objects. At this time we just specify the title, an id and the width of the dialog.

The next line looks quite unimpressive. But it is absolutely necessary to make this work and it is important to understand the concepts behind it. While creating the dijit.Dialog object a DOM node for this dialog is created. This DOM node is initially not part of the current HTML document. Only be making it a child node of an existing node in the DOM tree the dialog could interact with the DOM tree.

It is crucial to understand that at the end all dijits are plain HTML, CSS and JavaScript. Our dialog is nothing more than an absolute positioned div element that overlay all other elements in the web page. Directly underneath is another div element with half opacity which covers the page to increase the modal effect of the dialog. Why do I emphasize this aspect? Because sometimes while dealing with dijits people seems to forget that dojo can't change the principles of web applications.

The function showSpeakerByRefName() gets a handle to our dijit.Dialog object by asking the dijit manager for it with the method dijit.byId. Don't confuse this method with dojo.byId which returns a DOM node with the given id. The variable path contains the URL with the speaker description. We place the URL in the attribute "href" of the dijit.Dialog. While calling the method dialogDijit.show() two things happen. First of all the dialog while appear on the web page. Then the content from the URL is loaded using an AJAX request. As soon as the content is loaded it will be displayed in the dialog box. If the server connection isn't fast enough you might see one of those typical animated images telling you that something is going on.

To make the speaker name react on a click we have to register this event. The following lines of code in our dojo.addOnLoad function will do it.

//add the behavior to the speaker name to show the dialog
dojo.behavior.add({
"div.session span.speakerName": {
onclick: function(evt){
var speakerNameEncoded = evt.target.id;
showSpeakerRefByName(speakerNameEncoded);
}
}
});

//add style to name for pointer
dojo.query("div.session span.speakerName").style("cursor", "pointer");

Every speaker name is enclosed in a span element with a CSS class "speakerName". We use this class not only to change the appearance but also to find all DOM nodes for our dojo.behavior object. To make life it little bit easier all the spans have an id with the speaker name encoded. This id will be used in the showSpeakerRefByName() function. The last line changes the style of the speaker name span elements to make them look like a link.

As always the sample can be tested live.

In the sample database belonging to this series of articles you can find the content of this article in the form "webSpeedAgendaing-Step 6 | SpeedAgendaing-6" and the JavaScript library "SpeedAgendaing-Step6.js".

We while enhance our sample in the next article so that a click on the speaker picture will also show the dialog with the speaker description.

Comments

Great Article.

FYI, I think there's a bug in the sample page.
Using FF 3.6.3, scroll the page to the end, then click on 1 of the links. The page goes blank. If you move your mouse around, the screen flickers (the data appears/disappears).

If you scroll up (so the scrollbar on the right is not fully at the end), the issue disappears.

It does not occur using IE8. However, I noticed that when clicking the link, the scrollbar on the right moves up a little, which may prevent the issue from occuring.