Dojo – Dynamically Creating Multiple Dialogs

I have created Dojo Dialog boxes via markup in the past, but I recently began to dynamically create all Dialogs within an application. My primary reason for doing so is to remove some of the code from an html page and give me greater flexiblity with the functionality.

My first step in dynamically creating the Dialog boxes is to create a few empty Divs on my html page. These Divs will be the containers for each dialog box.

<div id="dlgSiteTitle"></div>
<div id="dlgSiteDesc"></div>
<div id="dlgKeywords"></div>

Now, I could have created these Divs dynamically as well, but I chose this approach instead.

Next, in the dojo.addOnLoad, I call an init function. Within this function, I call a createDialog function for each div. I pass the Div’s id and Dialog title as parameters:

createDialog("dlgSiteTitle", "Web Site Title");
createDialog("dlgSiteDesc", "Web Site Description");
createDialog("dlgKeywords", "Web Site Keywords");

Creating the Dialogs

The ‘createDialog’ function gets the appropriate Div, sets the Dialog’s title, and sets the Dialog’s content by calling the appropriate function. The name of the function to be called is the same as the Div’s id:

function createDialog(dId, t) {
     var d = dojo.byId(dId);
     dojo.attr(d, "jsId", dId);
     var di = new dijit.Dialog({
          title: t
     },d);
     var c = eval(dId)();
     di.attr('content', c);
}

The first dialog that is created is ‘dlgSiteTitle’, so the dlgSiteTitle function is called:

function dlgSiteTitle() {
     var div = dojo.doc.createElement("div");
     var textbox=new dijit.form.TextBox({
          id:"tSiteTitle",
          name: "tSiteTitle",
          jsId: "tSiteTitle",
          trim:"true",
          style: "width:350px"
     });
     div.appendChild(textbox.domNode);
     div.innerHTML += '<br />';
     var button = new dijit.form.Button({
          label:"OK",
          type:"submit",
          onClick: function(){
               updateStore("metaTitle", dojo.byId("tSiteTitle").value);
          }
     });
     div.appendChild(button.domNode);
     var button = new dijit.form.Button({
          label:"Cancel",
          type:"button",
          onClick: function(){
               dijit.byId("dlgSiteTitle").hide();
          }
     });
     div.appendChild(button.domNode);
     return div;
}

Now I could have used the Dialog’s ‘execute’ option instead of adding an onClick event for the OK button, but either way will get you there.

I then use the same process to create the other content creation functions for the other Dialog boxes and I’m done. Enjoy.