有这个涉及的代码。该页面列出了团队成员提交的请假申请，并允许经理批准或拒绝申请。页面的流程是：
- 在 pageshow 上，调用 getLeaveDetails()
- getLeaveDetails() 使用 $.ajax 调用 /webservices/getPendingLeaveApps.ashx
- 成功后，调用 showForm(data, textStatus, jqXHR) - 这工作正常
- showForm 在 a 内创建标记 - 这很好用
- 在运行时创建的标记包括按钮 - 这很好用
- “approve”和“reject”这两个按钮分别调用它们各自的函数approveLeave(iID)和rejectLeave(iID)——当然是通过ID来批准或拒绝——这也可以
- approvalLeave(iID) 和 rejectLeave(iID) 依次使用 $.ajax 调用 .ASHX 页面，将 ID 作为参数传递给 ASHX 以处理操作 - 在页面上选择批准或拒绝 - 这不是在职的
我究竟做错了什么？或者有没有人可以提出更好的结构？非常非常欢迎任何帮助。完全没有 JS 和 HTML 方面的经验。
非常感谢
最好的祝愿
艾尔
<div data-role="page" id="pLeave" data-add-back-btn="true" data-back-btn-text="Home">
<script type="text/javascript">
$('#pLeave').live('pageshow', function () {
getLeaveDetails() ;
}) ;
function getLeaveDetails() {
$.ajax({
type: 'POST',
data: {numRows: 10},
url: '/webservices/getPendingLeaveApps.ashx',
success: function(data, textStatus, jqXHR) {
showForm(data, textStatus, jqXHR) ;
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error' + textStatus + ' ' + errorThrown + ' ' + jqXHR.status + ' ' + jqXHR.statusText + ' ' + jqXHR.data + ' ' + jqXHR.responseText);
//$("#result_labels").append('<p> textStatus ' + textStatus + '</p>') ;
}
});
}
function showForm(data, textStatus, jqXHR) {
$("#resultsArea").html("") ;
var h = '' ;
for (i = 0; i < data.length; i++) {
h = h + '<ul data-role="listview" data-inset="true">' ;
h = h + '<li>' ;
h = h + '<p><strong>' + data[i].empName + '</strong></p>' ;
h = h + '<p><strong>' + data[i].designation +'</strong></p>' ;
h = h + '<p><strong> Applied for ' + data[i].noOfDays + ' days of ' + data[i].category + ' leave' ;
h = h + '<p><strong> From ' + data[i].startDate + ' To ' + data[i].endDate + '</strong></p>' ;
h = h + '<input type="button" value="Approve" data-inline="true" onclick="approveLeave(' + data[i].id + ');" />' ;
h = h + '<input type="button" value="Reject" data-inline="true" onclick="rejectLeave(' + data[i].id + ');" />' ;
h = h + '</li></ul>' ;
}
$("#resultsArea").html(h) ;
$("#resultsArea").trigger("create");
}
function approveLeave(iID) {
$.ajax({
type: 'POST',
data: {id: iID, action: "A"},
url: '/webservices/mob_processLeave.ashx',
success: function(data, textStatus, jqXHR) {
//showForm(data, textStatus, jqXHR) ;
getLeaveDetails() ;
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error' + textStatus + ' ' + errorThrown + ' ' + jqXHR.status + ' ' + jqXHR.statusText + ' ' + jqXHR.data + ' ' + jqXHR.responseText);
getLeaveDetails() ;
}
});
}
function rejectLeave(iID) {
$.ajax({
type: 'POST',
data: {id: iID, action: "R"},
url: '/webservices/mob_processLeave.ashx',
success: function(data, textStatus, jqXHR) {
//showForm(data, textStatus, jqXHR) ;
getLeaveDetails() ;
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error' + textStatus + ' ' + errorThrown + ' ' + jqXHR.status + ' ' + jqXHR.statusText + ' ' + jqXHR.data + ' ' + jqXHR.responseText);
getLeaveDetails() ;
}
});
}
</script>
<div data-role="header">
<h1>Leave Apps</h1>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<div id="resultsArea">
</div>
</div>
</div><!-- /content -->