Question

I am using Dojo 1.8.3

I want to develop a Customizable Form using dnd. I have a list of form elements in the left dojo/dnd/Source and the container in the right dojo/dnd/Target which is supposed to generate dijits when I drop on it.

<div class="normal" style="width: 99%;  height: 99%;" data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'sidebar', gutters: true, liveSplitters: true">
   <div data-dojo-type="dijit/layout/ContentPane"  class="normal" style="width: 30%;  height: 80%;" 
                         data-dojo-props="splitter: true, region: 'left'">

     <div data-dojo-type="dojo/dnd/Source" data-dojo-id="form_tools" id="form_tools"  data-dojo-props="copyOnly: true"   
                                 class="container" style="width:99%;">
                        <div class="dojoDndItem" dndtype="heading">Heading</div>
                        <div class="dojoDndItem" dndtype="textbox">Text Box</div>
                        ... 
                </div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" class="normal" id="form_container" 
                         style="width: 68%; height: 80%;" data-dojo-props="splitter: true, region: 'center'">

                <div data-dojo-type="dojo/dnd/Target" data-dojo-id="form_items" id="form_items" class="container" style="height: 80%;" accept="heading,textbox">
                        <script type="dojo/on" event="DndDrop"> form.transform_item(arguments[0], arguments[1], arguments[2], arguments[3]);//source, nodes, copy, target </script>                        </div>
        </div>
</div>

In my js function transform_item, I am doing this:

this.transform_item = function(){ 
var dragged_items = arguments[3].selection; 

form_items.forInSelectedItems(function(item, id, map){ 
          var dnditem = dojo.byId(id); 
          switch(item.type[0]){ 
            case "textbox": 
              var textbox = new dijit.form.TextBox({ 
                  name: "textbox", 
                  value: "This is a TextBox" 
              }, "textbox_text"); 

              // HERE IS WHERE I SHOULD INSERT THE CODE FOR GENERATING A TEXTBOX 

              require(['dojo/parser'], function(parser){ 
                parser.parse('textbox_text'); 
              }); 

              break; 
 } 
 }); 
    } 

At this point I’m getting an error when I drop over the Target :

dojo/parser::parse() error 
TypeError: root is null 

var node = root.firstChild; 

How can I make Dojo generate, for example a dijit.form.TextBox when I drag an “textbox” dndtype?

Answer 1

Solved: I have just inserted the textbox in the wrong parent, textbox_text does not exist.So No need of parse();