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

by Bernd Hort,
assono GmbH, Standort Hamburg,


dojo-Logo 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.

Technical article IBM Domino JavaScript Development

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Do you want an individual solution? Contact us

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

We don’t sell your data. 100% guaranteed. See: Privacy Policy
assono GmbH

Location Kiel (headquarters)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 402

E-Mail adresses:
contact@assono.de
bewerbung@assono.de