【发布时间】：2015-06-11 18:29:14
【问题描述】：
AJAX 本身对我来说很新，虽然我可以在大多数情况下糊弄过去并弄清楚事情，但这个问题已经困扰了我好几天。
我有一个分为 2 列的页面。左侧是表格中显示的作业列表。单击表格行时，通过此脚本在页面右侧通过ajax加载所选作业的详细信息：
$(".jobTable").on("click", "tr", function() {
var job_id = $("td:first a.ajaxCall", this).attr("rel");
$("#jobDetails").html("Loading...");
$.ajax({
type: "GET",
url: "jobs/jobdetails.php",
data: {
'id': job_id
},
success: function(data) {
$("#jobDetails").html(data);
$('#validation').html("");
}
});
return false;
});
这本身就可以正常工作。
我想添加一个下拉菜单，允许在打开的工作、已完成的工作、等待开票的工作和所有工作之间进行排序。我通过使用适当的 SELECT 语句简单地制作 4 个单独的页面并使用此功能来完成此操作：
$(document).ready(function() {
$("#jobSorter").change(function() {
$("select option:selected").each(function() {
if ($(this).attr("value") == "open-jobs") {
$.ajax({
url: "jobs/open-jobs.php",
success: function(data) {
$("#activeJobTable").html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
}
if ($(this).attr("value") == "closed-jobs") {
$.ajax({
url: "jobs/closed-jobs.php",
success: function(data) {
$("#activeJobTable").html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
}
if ($(this).attr("value") == "waiting-for-invoice") {
$.ajax({
url: "jobs/waiting-for-invoice.php",
success: function(data) {
$("#activeJobTable").html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
}
if ($(this).attr("value") == "all-jobs") {
$.ajax({
url: "jobs/all-jobs.php",
success: function(data) {
$("#activeJobTable").html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
}
});
}).change();
});
这本身也可以正常工作，但是一旦我开始通过 ajax 加载表格，它就不再响应此脚本。当我点击表格时，什么都没有发生。通过一些研究，我认为答案取决于我将第一个函数放入选择器脚本中的“完成：”下，但随后发生的只是表格无法加载。
如何在使用选择菜单加载作业列表时保持加载作业详细信息的功能？
编辑：这是发生这一切的页面的 HTML：
<div class="row">
<div class="col-md-4" id="jobList">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="jobSorter">View Only:</label>
<div class="col-sm-10">
<select class="form-control" name="jobSorter" id="jobSorter">
<option value="open-jobs">Open Jobs</option>
<option value="closed-jobs">Closed Jobs</option>
<option value="waiting-for-invoice">Waiting for Invoice</option>
<option value="all-jobs">All Jobs</option>
</select>
</div>
</div>
</form>
<div id="activeJobTable" </div>
<div class="col-md-8">
<div class="row">
<div class="col-lg-12" id="validation"></div>
</div>
<div class="row">
<div id='jobDetails'>
</div>
</div>
</div>
</div>
还有open-jobs.php页面（其余都一样，只是查询变了）：
<?php require 'libraries/database.php'; $query="SELECT jobs.*, customers.cust_name, customers.id FROM `jobs`
INNER JOIN customers ON jobs.customer = customers.id
WHERE status != 'Completed' ORDER by job_id" ; $jobs=$ mysqli->query($query) or die($mysqli->error . __LINE__); ?>
<table class="table table-hover jobTable" data-link="row">
<thead>
<tr>
<th class="col-md-2">Job #</th>
<th class="col-md-4">Customer Name</th>
<th class="col-md-6">Description</th>
</tr>
</thead>
<tbody>
<?php while ($row=m ysqli_fetch_array($jobs)) { $jobid=$ row[ 'job_id']; $query="SELECT * FROM parts WHERE job = '$jobid' AND status != 'In Stock'" ; $result=m ysqli_query($mysqli, $query); $partrows=m ysqli_num_rows($result); if ($partrows>0) { $highlight = 'warning'; } else { $highlight = ''; } echo '
<tr class="' . $highlight . '" id="row'.$row['job_id'].'">'; echo '
<td>
<a class="ajaxCall" href="#" rel="' . $row['job_id'] . '"></a>' . $row['job_id'] . '</td>'; echo '
<td>' . $row['cust_name'] . '</td>'; echo '
<td class="col-lg-2">' . $row['description'] . '</td>'; echo '</tr>'; } ?>
</tbody>
</table>
【问题讨论】：
-
我们可能应该查看您的 html 标记以了解您要执行的操作。
-
编辑了我的问题以包含它:)
标签： javascript jquery ajax