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
Maulik
source
to share
2 answers
I'm sorry to bother you guys. I'm so stupid. Thank you for your responses. It is working fine now.
+1
Maulik
source
to share
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
gfullam
source
to share