这是我的全部代码
<html>
<title>Enable or Disable Agents</title>
<head>
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="css/iconFont.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!-- Load JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.widget.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/prettify.js"></script>
</head>
<body class= "metro">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type=text/javascript>
var cellData;
$(document).on("pageinit", function() {
getTable();
});
function getTable() {
$.ajax({
type : 'GET',
url : "http://192.168.1.8:8080/SurveyApp3/getAgents",
dataType : 'html',
success : function(data) {
var i;
var row;
var jsonData = JSON.parse(data);
createTable(jsonData);
},
error : function(xhr, status, errorThrown) {
console.log(xhr);
console.log(status);
console.log(errorThrown);
}
});
}
function createTable(json) {
var element = "";
var i;
console.log(json.length);
for (i = 0; i < json.length; i++) {
element = element
+ '<tr><td><input type= "checkbox"'+ ( json[i].enabled== "TRUE" ? ' checked' : '' )+ '/></td><td>'
+ json[i].a_id + '</td><td>' + json[i].name + '</td><td>';
}
element = element + '</tbody>';
$('#dataTable > tbody').remove();
$("#dataTable").append(element);
}
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
function getCheckedRow() {
var chkbox;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
console.log(rowCount);
for (var i = 1; i < rowCount; i++) {
console.log("inside");
var row = table.rows[i];
chkbox= row.cells[0].childNodes[0];
cellData = row.cells[1].childNodes[0].data;
console.log(cellData);
console.log(chkbox.checked);
if (chkbox.checked== true) {
console.log("inside2");
enableDisableInDatabase("true");
}
else
{
console.log("inside3");
enableDisableInDatabase("false");
}
}
return false;
}
function enableDisableInDatabase(enabled) {
var arr= {a_id: cellData, enable: enabled};
$.ajax({
type : 'POST',
url : "http://192.168.1.8:8080/SurveyApp3/enableDisableAgent",
data: JSON.stringify(arr),
dataType : 'html',
async : false,
contentType : 'application/json; charset=utf-8',
success : function(data) {
if (data === "Successful")
document.getElementById("invalid").innerHTML= "Updated Successfully";
else {
console.log("Failed");
document.getElementById("invalid").innerHTML = "Invalid agent id";
}
},
error : function(xhr, status, errorThrown) {
console.log(xhr);
console.log(status);
console.log(errorThrown);
}
});
}
</script>
<h2>ENABLE/DISABLE AGENT(s)</h2>
<br>
<p>Checked boxes will enable agents</p>
<TABLE class="table striped hovered dataTable" id="dataTable">
<thead>
<tr>
<th class="text-left"><INPUT type="checkbox"
onchange="checkAll(this);" name="chk[]" /></th>
<th class="text-left">Agent Id</th>
<th class="text-left">Agent Name</th>
</tr>
</thead>
<tbody></tbody>
</TABLE>
<button onClick= "return getCheckedRow();">Update</button>
<p id="invalid"></p>
我遇到的问题是,第一次执行时,一切正常。但是,一旦更新一次,如果我尝试选中/取消选中此函数内的
chkbox= row.cells[0].childNodes[0];
复选框,则function getCheckedRow()
该代码将返回undefined,而不是true或false。我必须再次按返回按钮,然后重新进入此页面才能正常工作。我要去哪里错了?
谢谢!
最佳答案
因此,我真的不知道在phonegap应用程序上下文中您的代码真正发生了什么,但是我认为简化JS将有助于您了解正在发生的事情,并且可能会阐明一些潜在的问题。
首先,我将添加一个类并依赖于您创建的输入,因此它们看起来像这样:
<input class="agent-checkbox" rel="123456" type="checkbox" checked />
这将使您大大简化确定启用和不启用哪种代理所需的时间。
这将更新您的getCheckedRow()函数,使其如下:
function getCheckedRow() {
//loop through all elements with agent-checkout class
$('.agent-checkbox').each(function(){
//call the function passing the id via the rel and a boolean if checked or not
enableDisableInDatabase( $(this).attr('rel'), ( $(this).is(':checked') ) );
});
}
最后,我将对功能enableDisableInDatabase()函数进行小的修改,以接受getCheckedRow()函数的a_id,如下所示:
function enableDisableInDatabase(a_id, enabled) {}
以下是我创建的要点的链接,以向您展示所有功能如何协同工作的示例。
https://gist.github.com/anonymous/6f36b242e9d7ebee3b56
祝好运。我希望这会有所帮助并且有意义。