jQuery在phonegap中 [英] Jquery in phonegap
问题描述
这是我的全部代码
<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.我必须再次按返回按钮，然后重新进入此页面才能使其正常工作.
The problem I am having is that, first time when I execute, everything works properly. But after it is updated once, if I try checking/unchecking the checkbox, chkbox= row.cells[0].childNodes[0]; inside this function, function getCheckedRow() the code returns undefined instead of true or false. I have to again press back button, and re enter this page for it to work correctly.
我要去哪里错了? 谢谢！
Where am I going wrong? Thanks!
推荐答案
所以我真的不知道在phonegap应用程序上下文中您的代码到底发生了什么，但是我认为简化JS可以帮助您理解发生了什么，也许还揭示了任何潜在的问题.
So I can't really know what is really going on with your code in the context of the phonegap app, but I think simplifying the JS will help you understand what is going on and maybe shed some light on any potential issues.
首先，我将添加一个类并依赖于您创建的输入，因此它们看起来像这样:
First I would add a class and rel to the input's your creating, so they would look something like this:
<input class="agent-checkbox" rel="123456" type="checkbox" checked />
这将使您大大简化确定启用和不启用哪种代理所需的时间.
This will allow you to drastically simplify what it takes to determine what agent is and isn't enabled.
这将更新您的getCheckedRow()函数为以下内容...
This I would update your getCheckedRow() function to be the following...
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，如下所示:
And lastly, I would make a small mod to the function enableDisableInDatabase() function to accept the a_id from the getCheckedRow() function, like this:
function enableDisableInDatabase(a_id, enabled) {}
下面是我创建的要点的链接，向您展示了它们如何协同工作的示例.
Below is a link to a gist that I created to show you an example of how it all work together.
https://gist.github.com/anonymous/6f36b242e9d7ebee3b56
祝你好运.我希望这会有所帮助并且有意义.
Good luck. I hope this helps and makes sense.
这篇关于jQuery在phonegap中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
