Problems with dynamically changing checkbox state with AJAX
I am trying to checkboxes via ajax but it is not working correctly. I cannot change the state of the first checkbox , only the second one works fine. Can anyone spot a bug here?
$.ajax({
type:"POST",
url:"../scripts/domainlist.php?dept="+deptid+"&pro="+proid,
contentType:"application/json; charset:utf-8",
dataType:"json",
success: function(data){
$('#domainlist').empty();
$('#domainlist')
.append("<tr rowspan='2' class='domainname'>
<th class='domainname'>Domain Name</th>
<th class='domainname'>Is this domain applicable to your organization?</th>
<th style='height:30px' class='domainname'>Do you want this domain to be displayed?</th>
</tr>");
var index = 0;
$.each(data,function(i,item){
var index2=index+1;
var display_status = "";
var applicable_status = "";
if(data[i].applicable == 1){
applicable_status = "checked";
}
if(data[i].display == 1){
display_status = "checked";
}
$('#domainlist')
.append("<tr class='domainname'>
<td class='domainname'>
<a href='setcategoryapplicability.php?dom="+ data[i].domid +"'>"+ data[i].domname +"</a>
</td>
<td>
<input id='toggle-"+index+"' name='applicable["+data[i].domid+"]' class='toggle toggle-round' type=checkbox "+applicable_status+">
<label for='toggle-"+index+"]'></label>
</td>
<td>
<input id='toggle-"+index2+"' name='display["+data[i].domid+"]' class='toggle toggle-round' type=checkbox "+display_status+">
<label for='toggle-"+index2+"'></label>
</td>
</tr>");
index = index +2;
});
},
complete: function(){
}
});
+3
source to share
2 answers
Please confirm the correctness of your data
If your data behaves as expected, the application should work.
If you are having problems with the first checkbox, it data[i].applicable
may not display in the expected format.
See example below where I am passing hardcoded data in the expected format (based on my reading of the code since you did not provide an example data object):
var data = [
{
"domid": "domid_A",
"domname": "Domain Name A",
"applicable": 0,
"display": 0
},
{
"domid": "domid_B",
"domname": "Domain Name B",
"applicable": 1,
"display": 1
}
];
var index = 0;
$('#domainlist').empty();
$('#domainlist').append(
"<tr rowspan='2' class='domainname'>" +
" <th class='domainname'>Domain Name</th>" +
" <th class='domainname'>Is this domain applicable to your organization?</th>" +
" <th style='height:30px' class='domainname'>Do you want this domain to be displayed?</th>" +
"</tr>"
);
$.each(data, function (i, item) {
var index2 = index + 1;
var display_status = "";
var applicable_status = "";
if (data[i].applicable == 1) {
applicable_status = "checked";
}
if (data[i].display == 1) {
display_status = "checked";
}
$('#domainlist').append(
"<tr class='domainname'>" +
" <td class='domainname'>" +
" <a href='setcategoryapplicability.php?dom=" + data[i].domid + "'>" + data[i].domname + "</a>" +
" </td>" +
" <td>" +
" <input id='toggle-" + index + "' name='applicable[" + data[i].domid + "]' class='toggle toggle-round' type=checkbox " + applicable_status + ">" +
" <label for='toggle-" + index + "]'></label>" +
" </td>" +
" <td>" +
" <input id='toggle-" + index2 + "' name='display[" + data[i].domid + "]' class='toggle toggle-round' type=checkbox " + display_status + ">" +
" <label for='toggle-" + index2 + "'></label>" +
" </td>" +
"</tr>"
);
index = index + 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="domainlist"></table>
+1
source to share