Dynamic generation of checkbox

[Kunal Lakhani]

In my application, data is retrieved from database and then checkboxes are created dynamically. Following is the code

$
						.getJSON(
								url,
								function(data) {

									if (data[0] == "0") {
										$('#wb_Text12').empty();
									} else {
										for ( var i = 0; i < data.length; i++) {
										var checkName = "myCheckbox"+i;
										alert(checkName);
										$("#wb_Text12").append ( "<input type='Checkbox' name = 'cb' value = "+data[i]+"id = "+checkName+" onclick='checkboxClicked("+i+")'/>");
										$("#wb_Text12").append ( "<label for="+checkName+">" + data[i] + "</label>");
										$('<br>').appendTo('#wb_Text12');
										}

									}

								});

When the checkbox is checked/unchecked, it should call another function named "checkboxClicked" in the above code

Following the function code

function checkboxClicked(i) {
	var id = "myCheckbox"+i;
	alert(id);
        if ($('#'+id).is("checked")) {
            alert("true");
        } else {
            alert("false");
        }
	}

Thus, if 4 checkboxes are created , their name would be myCheckbox0,myCheckbox1,myCheckbox2,myCheckbox3 respectively. This is implemented in the 1st code posted
Now, when the 2nd checkbox with id myCheckbox1 is checked , the checkboxClicked function is called. This function contains the parameter, which is passed as a var i. The function runs and It alerts the id, i.e myCheckbox1. However, it alert false.
This happens with all checkboxes. I need that if the checkbox is checked, it should alert true, and if unchecked, it should alert false.

What is wrong with my code?

[Kunal Lakhani]

I spent last day watching my code and I still don't know what's wrong with my code

[Bear Bibeault]

One thing that might help is to repost your code with proper indentation and formatting, The wonky formatting and too-deep indentation of what you have posted makes it hard to read.

Just glancing through the code, I see a number of problems. You are using jQuery for some things, and then you ignore it for others. A few things I'd refactor:

Don't build up HTML strings in text to create DOM elements; use jQuery's DOM methods.

Never use onclick (and other DOM Level 0 attributes) to establish event handlers; use jQuery event handling.

I'd suggest refactoring the code as above, and then if the problems persist, post back with neatly formatted code that is easy to read.

[Bear Bibeault]

Also, if you are still using alerts for debugging, you need to get familiar with the modern debugging consoles built into every modern browser. Otherwise it's like trying to fight a laser remote with the blast shield down -- and you can't use The Force.

[Kunal Lakhani]

Thanks Bear for your reply.

Looking forward to Jquery's DOM methods & jQuery event handling.
But, Still i wonder, what's wrong with the code i have posted?

[Bear Bibeault]

I don't know -- I only glanced at it. Post the refactored code if you have further difficulties with this.

[Kunal Lakhani]

Don't build up HTML strings in text to create DOM elements; use jQuery's DOM methods.
Never use onclick (and other DOM Level 0 attributes) to establish event handlers; use jQuery event handling.

Can you give a link where i can find these topics? Searching them in google, but not able to find a suitable one

[Bear Bibeault]

The jQuery documentation is here.

And, of course, there's my jQuery book: jQuery in Action (2nd Ed)

For creating DOM elements, you can easily create them with code such as:

$("<div>")
  .attr({ id: "someId" })
  .addClass("some-class")
  .appendTo("selector-for-parent");

Establishing a click handler:

$("some-selector").click(function(event){
  //body of handler goes here
});

[Kunal Lakhani]

I am looking into your book only


I need to convert this

$("#wb_Shape1").append("<input type='text' id='"+checkName+"' style='position:absolute;left:395px;top:"+top1+"px;width:100px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px' readonly='readonly' name='"+checkName+"' value='"+checkHead+"'>");

This is what i tried

$('#wb_Shape1').append($(document.createElement('input')).attr({
           id:    checkName
          ,name:  checkName
          ,value: checkHead
          ,type:  'text'
       })
       .addClass("editboxes")
    );

If this is correct, well and good, else provide some guidance.

Also, how can i include css style present in my code. I am looking into .css details

[Bear Bibeault]

Not quite: $(document.createElement('input') should simply be $("<input>")

[Bear Bibeault]

.css() is the correct way to add styles directly to the element; though I recommend applying styles via CSS rather than plunking it on the element.

.css({
  color: "red",
  borderWidth: "4px"
})

[Kunal Lakhani]

Thanks Bear

This is the whole piece of code

 $('#wb_Shape1').append($("<input>")).attr({
          id:    checkName
          ,name:  checkName
          ,value: checkHead
          ,type:  'text'
          ,readonly : 'readonly'
       	  })
       	  .addClass("editboxes")
       	  .css({
       	  position:"absolute",
       	  left:"395px",
       	  top:top1,
       	  width:"100px",
       	  height:"18px",
       	  border:"1px #C0C0C0 solid",
       	  font-family:"Courier New",
       	  font-size:"13px"});

Keeping in mind "name: checkName", checkName is a var type. similarly for id,value, top in .css.

It works , but the looks & positions of textfields are changed.

[Bear Bibeault]

The variables should work fine if they contain valid values.

P.S. I hate the leading commas in the formatting.

[Kunal Lakhani]

The variables are working fine, but, the look and design is changed now. I wish i could show you the screen shots

[Bear Bibeault]

That's likely a matter of the CSS and the structure. The Chrome debugging console, in Element view, also has excellent tools for inspecting the CSS so you can find out exactly what was applied and where.

Select an element in Element view, and the right pane will show you the computed CSS and where it came from. You can use that to debug any style issues.

[Kunal Lakhani]

Okay. Thanks Bear