CODEWITHSUNDEEP
javascriptibm-mobilefirstdojo
Anand Jha
Anand Jha

Reputation: 10714

Rendering DOM at run time is not working in Dojox

What I am doing here is, I am rendering DOM(having check box) in a div (id="euiview") programmatically . my code is like

var iHtml='<span><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox" onclick="toggleCheckbox()" class="addremove-check"><label for="cbox"> E&amp;U Imperatives </label> </span></p><p><span><input type="checkbox" id="cbox1" data-dojo-type="dojox.mobile.CheckBox" class="addremove-check"><label for="cbox1"> Transform the utility network </label></span></p>';

domConstruct.place(iHtml,"euiview");

where I have a div in html page is like.

  <div id="euiview" data-dojo-type="dojox.mobile.View">

    </div>

Now the problem is I am unable to check or un check the check box in some android device browsers but it is working fine in desktop browser. can I render html this way or I need to create DOM programmetically? Please help me. Thanks

Upvotes: 0

Views: 102

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

It depends on when you're parsing your page. If you parse your page after you add the new HTML, there will be no problem. However, if you parse your page before you add the new HTML, Dojo won't parse that DOM into widgets and so your checkbox won't work.

I assume you're parsing the page on DOM load, so it really depends on what's getting executed first. A solution that might work is the following: 

var iHtml='<div id="new-content"><p><span><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox" onclick="toggleCheckbox()" class="addremove-check"><label for="cbox"> E&amp;U Imperatives </label> </span></p><p><span><input type="checkbox" id="cbox1" data-dojo-type="dojox.mobile.CheckBox" class="addremove-check"><label for="cbox1"> Transform the utility network </label></span></p></div>';

domConstruct.place(iHtml,"euiview");
parser.parse("new-content");

With this, you can make sure that the new content is parsed. I also noticed that you're closing your </p> tag but you didn't put a <p> in front of it.

Upvotes: 1

Related Questions