CODEWITHSUNDEEP
dojo
Vhasure Prashant
Vhasure Prashant

Reputation: 188

How to add a Dojo Button in Div dynamically by using Dojo?

I have a the following static div:

    <body>
      <div id="parent">

    </div>
    </body>

<script>
  dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+1+"' label='Edit' />";
  dom.byId('parent').innerHTML +="<input type='submit' data-dojo-type='dijit/form/Button' onClick='test(this)' id='edit"+2+"' label='Edit' />";

</script>

TWo button's are created but they looks like normal HTML not DOJO.

Upvotes: 1

Views: 6780

Answers (1)

phusick
phusick

Reputation: 7352

The shortest possible answer is dojo/parser::parse(domNode):

var parent1 = dom.byId("parent1");
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit1" label="Edit 1">';
parent1.innerHTML += '<input type="submit" data-dojo-type="dijit/form/Button" onClick="test(this)" id="edit2" label="Edit 2">'; 
parser.parse(parent1);

Even though I cannot recommend that. Do not use innerHTML, it belongs to the world of IE6. Create dijits programmatically instead:

var parent2 = dom.byId("parent2");

var button3 = new Button({ label: "Button 3" });
button3.startup();
button3.placeAt(parent2);
button3.on("click", test);

var button4 = new Button({ label:"Button 4"});
button4.startup();
button4.placeAt(parent2);
button4.on("click", function(event) {
    test(this); // `this` points to the button
});

See it in action: http://jsfiddle.net/phusick/9JCAj/

Upvotes: 6

Related Questions