Dojo domConstruct - Inserting rows into a table

Question

I'm working on an application that will allow people to select which data fields they would like a form to have. I had it working but when I tried to move the form fields into a table for a bit of visual structure I'm running into a problem.

  // Now print the form to a new div
  array.forEach(selectedFields, function(item, i) {
      var l = domConstruct.create("label", {
                                    innerHTML: item + ': ',
                                    class: "dataFieldLabel",
                                    for: item
                                });
                                var r = new TextBox({
                                    class: "dataField",
                                    name: item,
                                    label: item,
                                    title: item
                                });
                                var a = domConstruct.toDom("<tr><td>" + l + r + "</td></tr>");
                                domConstruct.place(a, "displayDataForm");

When I run the code I can select the fields I want but instead of textboxes being drawn on the screen text like:

[object HTMLLabelElement][Widget dijit.form.TextBox, dijit_form_TextBox_0] [object HTMLLabelElement][Widget dijit.form.TextBox, dijit_form_TextBox_1]

Is printed to the screen instead. I think this is because I am passing domConstruct.place a mixture of text and objects. Any ideas about how to work around this? Thanks!

Answer 1

Try this :

require(["dojo/_base/array", "dojo/dom-construct", "dijit/form/TextBox", "dojo/domReady!"], function(array, domConstruct, TextBox){
    var selectedFields = ["Foo", "Bar", "Baz"];
    array.forEach(selectedFields, function(item, i) {
        var tr = domConstruct.create("tr", {}, "displayDataForm"),
            td = domConstruct.create("td", {}, tr),
             l = domConstruct.create("label", {
                 innerHTML: item + ': ',
                 'class': 'dataFieldLabel',
                 'for': item
             }, td, 'first'),
             r = new TextBox({
                 'class': 'dataField',
                 name: item,
                 title: item
             }).placeAt(td, 'last');
    });
});

This assumes you have this in your html :

<table id="displayDataForm"></table>

Don't forget to quote "class" and "for" as these are part of javascript's grammar.

Answer 2

The domConstruct functions will not work with widgets. You can create the html and then query for the input node and create the test box.

var root = dom.byId("displayDataForm");
domConstruct.place(root, 
    lang.replace(
      '<tr><td><label class="dataFieldLabel" for="{0}>{0}:</label><input class="inputNode"></input></td></tr>', 
      [item])
);

query('.inputNode', root).forEach(function(node){
    var r = new TextBox({
        'class': "dataField",
        name: item,
        label: item,
        title: item
    });
});

Answer 3

Craig thank you for all your help, you were right except that in the call to domConstruct.place the first argument is the node to append and the second argument is the refNode to append to. Thank you.

// Now print the form to a new div
array.forEach(selectedFields, function(item, i) {
    var root = dom.byId("displayDataForm");
    domConstruct.place(lang.replace(
          '<tr><td><label class="dataFieldLabel" for="{0}">{0}: </label><input class="dataField"></input></td></tr>', 
          [item]), root
    );

    query('.dataField', root).forEach(function(node) {
        var r = new TextBox({
            'class': "dataField",
            name: item,
            label: item,
            title: item
        });
    });
});