Can we create a dialog box with a checkbox and a combobox using google closure

Question

I am trying to create a dialog box with a checkbox, a user name and a combobox for roles which is enabled only when the checkbox is checked. I have the basic code running on a jsp page but how do i get it to work in a dialog box? All the components are rendered using google closure.

my js file

function combox ()
    {
    goog.events.listen((goog.dom.getElement('switch')), goog.events.EventType.CLICK,
            function(e) {
            var request = new goog.net.XhrIo();
            var cb = new Array();
       goog.events.listen(request, "complete", function(e){
        var xhr = /** @type {goog.net.XhrIo} */ (e.target);
        res = xhr.getResponseJson();
        var mycount = count(res.myrole);
        var content = new Array();
            var userlist = new Array();
            for(var k=0;k<mycount;k++)
            {
                content[k] = res.myrole[k].role;
            }
            var mycount1 = count(res.myusers);
            for(var l=0;l<mycount;l++)
            {
                userlist[l] = res.myusers[l].user;
            }
            var child = new Array();
            var container = goog.dom.getElement('c'); 
            for(var m=0;m<userlist.length;m++)
            {
              child[m] = goog.dom.createDom('div',{'id':'user'+(m+1)},userlist[m]);
              cb[m] = new goog.ui.ComboBox();
              cb[m].setUseDropdownArrow(true);
            for(var n=0;n<content.length;n++)
            {
              cb[m].addItem(new goog.ui.ComboBoxItem(content[n]));;
            }
            cb[m].render();
            goog.dom.append(container, child[m]);
    });
    });
}
function count(obj) {
   var count=0;
   for(var user in obj) {
      if (obj.hasOwnProperty(user)) {
         ++count;
      }
   }
   return count;
}

I'm getting proper response from my servlet, but I want these components in a dialog box(i.e a checkbox,username and a combobox for each user retrieved from my servlet.)

Answer 1

You should look into using a goog.ui.Dialog - http://docs.closure-library.googlecode.com/git/class_goog_ui_Dialog.html

Here is a demo of how to use one : http://closure-library.googlecode.com/git/closure/goog/demos/dialog.html

After instantiating one, you would use the setContent method to place your form as the content html of the dialog.

You can also extend the goog.ui.editor.AbstractDialog class ( http://docs.closure-library.googlecode.com/git/class_goog_ui_editor_AbstractDialog.html ), which helps manage an internal reference to a goog.ui.Dialog rather than directly creating one and gives convenient hide and show methods.

__

As a sidenote, it's typically viewed as an anti-pattern in Javascript to use the "new Array()" syntax rather than var userList = []; for reasons specified here and elsewhere.