CODEWITHSUNDEEP
javascriptcheckboxdojo
Bhagwat Gurle
Bhagwat Gurle

Reputation: 343

Create Dynamic checkboxes by iterating JSONArray in DOJO

I am new to DOJO and I am using DOJO 1.5.0 version.

I want to create dynamic checkboxes by iterating JSONArray in DOJO. This dynamic creation will be done on a particular event like when we selecting some combo-box value.

For example consider below JSONArray:

var tempJSONArray = [{role_id = '1', role_name = 'role1'},{role_id = '2', role_name = 'role2'},{role_id = '3', role_name = 'role3'}]

I want display checkboxes corresponding to Role Name. Lable for checkbox will be role_name and value will be role_id from JSON object. Also I want to add 'onChange' event to check-boxes, as on this event I want to do a Ajax call to server with role_ids.

Thank you for reading and also please let me know if further clarification is needed.

Upvotes: 0

Views: 1393

Answers (2)

Bhagwat Gurle
Bhagwat Gurle

Reputation: 343

After doing some internet surfing and playing around code I able write below code, which working fine for my scenario. So thought it will be helpful for others.

for ( var i = 0; i < roleJSON.length; i++) {
                        var role = roleJSON[i]; 
                        var tr = dojo.create("tr",{id:"rolebasecheckbox"+i,'class':'rolebasecheckbox'});
                        alert("tr=" + tr);
                        var td= dojo.create("td",{innerHTML:'<input id="roleBaseCb_'+i+'" value="'+role.role_id+'" dojoType="dijit.form.CheckBox" onclick="alert('onclick event')" type="checkbox" /> <label for="roleBaseCb_'+i+'">'+role.role_name+'</label>',align:'center'},tr);
                        alert("td=" + td);
                        if(i==0){
                        alert("i is 0");
                        dojo.place(tr, "roleBaseComboTR", "after");
                        }else{
                            dojo.place(tr, "rolebasecheckbox"+(i-1), "after");  
                        }
                    }

Upvotes: 0

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44745

You can use the dojo.create() method for creating DOM nodes and the dojo.place() method for placing them inside another element, for example:

var checkbox = dojo.create("input", {
    type: "checkbox",
    value: "1"
});

You will probably have to wrap it inside a <label> to show the text (which you can also create with dojo.create()). Then you can place them inside a list, for example:

dojo.place(label, "checkboxes");

This will wrap the checkbox (or label) inside an element with ID checkboxes. So, if you create your checkboxes now inside a loop, it should work.

Upvotes: 1

Related Questions