Ikram Hasib Ikram Hasib - 1 month ago 10
Ajax Question

Ajax loaded checkbox shows undefined in jquery

I'm using a checkbox to enable my select Option tag. Both select option tag and checkbox are load from ajax. Select option work fine but checkbox shows undefined. But work fine to enable my disabled select tag. Here is my code:

$.ajax({
url: url,
type: "GET",
cache: false,
dataType: "JSON",
success: function (data) {
var content = '';
content += '<select id="package" name="package" class="form-control col-md-7 col-xs-12" required="required" disabled="disabled">';
content += '<option value="0"></option>';
content += '<option value="500">having 200 to 500 students</option>';
content += '<option value="750">having 500 to 750 students</option>';
content += '<option value="1000">having 750 to 1000 students</option>';
content += '<option value="1500">having 1000 to 1500 students</option>';
content += '</select>';

$("#package_field").html(content);
/*for unable_package_field*/
var content2;
content2 += '<div class="col-md-1 col-sm-1 col-xs-1" style="margin-top: 6px;">';
content2 += '<input type="checkbox" id="unable_package" name="unable_package" class="flat" checked="checked">';
content2 += '</div>';
$("div#unable_package_field").html(content2);


$('input[type="checkbox"]').on("click", function () {
$("div#package_field select").prop("disabled", false);
});
}
});


When it's load everything is ok. But undefined text shows over the checkbox. What kind of change for undefined...

Answer

When you do var content2; the variable content2 still undefined for the javascript you've to initialize your variable first :

var content2="";

Then append to it.

Hope this helps.