How do I dynamically add a Dijit widget to a Dojo form?

Question

I'm trying to add a new FilteringSelect widget dynamically to a preexisting form I made out of declarative tags (on page load).

prereqs = 0;
function addAnotherPrerequisite(){  

    var newPreReqCursor = dijit.byId("Prerequisite"+(prereqs-1)).domNode;
    dojo.create("input",{
        id:"prerequisite"+prereqs,
        jsId:"Prerequisite"+prereqs,                        
        dojoType:"dijit.form.FilteringSelect",
        store:"PrerequisitesStore",
        searchAttr:"name",
        style:"width: 350px;",
        required:"true",
        class: "appendedPreReq"},newPreReqCursor,"after");


    dojo.parser.parse( newPreReqCursor.parentNode ); 

    prereqs++;
}

This code properly builds a FilteringSelect widget, but the widget does not seem to be registered with the form. Whenever I submit the form, none of the values in the new widgets appear. The validation attribute works, though, and it properly pulls the values from the store.I can even call the new widget via its jsId(Prerequisite1, Prerequisite2, etc) It just won't POST!

Instead of dojo.create I also tried called the FilteringSelect widget directly. This also made the widget, but did not register the values with the form during POSTing.

var filteringSelect = new dijit.form.FilteringSelect({
        id: "prereq"+prereqs,
        jsId: "Prerequisite"+prereqs,
        store: PrerequisitesStore,
        searchAttr: "name",
        required: true,
        style: 'width: 350px;',
        class: 'appendedPreReq'
    },
    "prerequisite"+prereqs).startup();

I'm going crazy trying to figure this out.

Answer 1

It is very easy. Just create a new object like that:

// first let's create an empty node (you can reuse the existing one)
var node = dojo.create("div", {
  // all necessary node attributes
  className: "appendedPreReq",
  style: {
    width: "350px"
  }
}, "myAnchorNodeId", "after");

// now let's create a widget
var widget = new dijit.form.FilteringSelect(
  {
    // all necessary widget properties
    id: "prereq" + prereqs,
    store: PrerequisitesStore,
    searchAttr: "name",
    required: true
  },
  node // optional node to replace with the widget
);

Read all about it:

• http://docs.dojocampus.org/dijit/info
• http://docs.dojocampus.org/dijit/form/FilteringSelect

Answer 2

So it looks like there's some sort of bug or something. I had to define the 'name' attribute explicitly to get the widget to show up in my form's .getDependents() method. That's how dijit.forms gets its list of form values. After doing this I also couldn't access this widget by dijit.byId (didn't return anything, silently caught the error I guess), so I returned the object via its jsId with an eval.

prereqs = 0;
function(){
    var newPreReqCursor = eval("Prerequisite"+(prereqs-1));
    newPreReqCursor = newPreReqCursor.domNode;

    dojo.create("input",{
            id:"Prerequisite"+prereqs,
            name:"Prerequisite"+prereqs,
            jsId:"Prerequisite"+prereqs,
            dojoType:"dijit.form.FilteringSelect",
            store:"PrerequisitesStore",
            searchAttr:"name",
            style:"width: 350px;",
            required:"true",
            class: "appendedPreReq"},newPreReqCursor,"after");

    var filterSelect = dojo.parser.parse( newPreReqCursor.parentNode );
}