-1
這是事情。我正在製作一個網頁，顯示其數據來自SQL表的數據表。我裝載表的方法是剛剛結束標記之前添加此：AJAX查詢後修改html表時重新加載網頁
<script>
fillTaskTable();
console.log("All laoded");
</script>
我的頭是這樣的：
<head>
<meta charset="UTF-8">
<title>Vista principal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/thestyle.css" rel="stylesheet">
<script src="js/js_tools.js"></script>
<script src="js/js_index.js"></script>
</head>
現在被調用的函數是在js_index.js這裏是代碼：
function fillTaskTable(){
var form = {
task_header:"task_table_header",
task_body: "task_table_body",
proyect_list: "proyect_box"
};
var search = document.getElementById("search_box").value;
var proyect = document.getElementById("proyect_box").value;
var status = document.getElementById("status_box").value;
var msgid = "msg_cont";
console.log("STATUS: " + status);
jQuery.ajax({
type: "POST",
url: 'db_access/get_proyect_and_task_data.php',
dataType: 'json',
data: {functionname: 'get_allowed_tasks', args: [search, proyect, status]},
success: function (obj) {
if (obj.error != ""){
postMessage(obj.error,true,msgid);
}
else{
//Se llena la lista de proyectos
var html = "<option></option>";
for (i = 0; i < obj.plist.length; i++){
html = html + "<option>" + obj.plist[i] + "</option>";
}
document.getElementById(form.proyect_list).innerHTML = html;
//Se llena la tabla dependiendo de si se pueden ver las tareas de todos los usuarios o no.
if (obj.rights.view_all){
//Se llena el header.
var col_titles = ["Tarea","Usuario","Proyecto","Inicio","Actualización","Estado","%"];
var header = "<tr>";
for (i = 0; i < col_titles.length; i++){
header = header + "<th>" + col_titles[i] + "</th>";
}
header = header + "</tr>";
document.getElementById(form.task_header).innerHTML = header;
//Se llena el resto de la tabla.
var table = "";
var color = "";
for (i = 0; i < obj.list.length; i++){
table = table + "<tr onclick='descRequest(" + obj.list[i].keyid + ")' ondblclick='loadTaskForEdition(" + obj.list[i].keyid + ")'>";
table = table + "<td>" + obj.list[i].name + "</td>";
table = table + "<td>" + obj.list[i].user + "</td>";
table = table + "<td>" + obj.list[i].proyect + "</td>";
table = table + "<td>" + obj.list[i].start_date + "</td>";
table = table + "<td>" + obj.list[i].update_date + "</td>";
if (obj.list[i].status == "Finalizada"){
color = "finalizado";
}
else if (obj.list[i].status == "Pendiente"){
color = "pendiente";
}
else{
color = "frenado";
}
table = table + "<td><b class='" + color + "'>" + obj.list[i].status + "</b></td>";
table = table + "<td>" + obj.list[i].percent + "</td>";
table = table + "</tr>";
}
document.getElementById(form.task_body).innerHTML = table;
}
else{
//Se llena el header.
var col_titles = ["Tarea","Proyecto","Inicio","Actualización","Estado","%"];
var header = "<tr>";
for (i = 0; i < col_titles.length; i++){
header = header + "<th>" + col_titles[i] + "</th>";
}
header = header + "</tr>";
document.getElementById(form.task_header).innerHTML = header;
//Se llena el resto de la tabla.
var table = "";
for (i = 0; i < obj.list.length; i++){
table = table + "<tr onclick='descRequest(" + obj.list[i].keyid + ")' ondblclick='loadTaskForEdition(" + obj.list[i].keyid + ")'>";
table = table + "<td>" + obj.list[i].name + "</td>";
table = table + "<td>" + obj.list[i].proyect + "</td>";
table = table + "<td>" + obj.list[i].start_date + "</td>";
table = table + "<td>" + obj.list[i].update_date + "</td>";
if (obj.list[i].status == "Finalizada"){
color = "finalizado";
}
else if (obj.list[i].status == "Pendiente"){
color = "pendiente";
}
else{
color = "frenado";
}
table = table + "<td><b class='" + color + "'>" + obj.list[i].status + "</b></td>";
table = table + "<td>" + obj.list[i].percent + "</td>";
table = table + "</tr>";
}
document.getElementById(form.task_body).innerHTML = table;
}
console.log("DEBUG: " + obj.dbug);
}
}
});
}
頁面加載得很好。但是現在我想添加一個搜索功能。我想我可以通過簡單地改變返回表數據的查詢來做到這一點。我在控制檯中測試了這些查詢，他們工作得很好。所以我暗示了它。但是，當我嘗試它。似乎新表被加載，然後頁面立即重新加載到其默認值（顯示所有條目）。我認爲這是由於幾個原因發生的。第一個過濾器是一個select html對象。我選擇一些東西。當我點擊過濾器選項時，選擇會回到默認狀態（第一個選項），第二，當我第一次在頁面末尾調用該函數時，我添加了一個控制檯日誌，並且我始終得到該消息（應該得到它只有一次）。最後，當我點擊後退按鈕時，我會得到正確過濾結果的表格。所以我的結論是，在對html表進行更改後，頁面將重新進行調整。我已經在Chromiumn和Iceweasel中測試了這個beahaviour，它也是一樣的。所以我知道我做錯了，但我無法弄清楚什麼。
編輯：在請求我加入的HTML代碼過濾棒：
<div class="row">
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title"><b>Opciones de búsqueda en tarea</b></h1>
</div>
<div class="panel-body">
<form class="form-inline">
<input type="text" class="form-control" id="search_box" placeholder="Buscar en el Nombre o Descripción">
<!-- Fijarse acá para implementar la busqueda
http://stackoverflow.com/questions/8982341/how-to-implement-the-an-effective-search-algorithm-when-using-php-and-a-mysql-da-->
<div class="form-group">
<label for="proyect_box"> Para el proyecto: </label>
<select class="form-control" id="proyect_box">
</select>
</div>
<div class="form-group">
<label for="status_box"> Con el estado: </label>
<select class="form-control" id="status_box">
<option></option>
<option>Pendiente</option>
<option>Finalizada</option>
<option>Frenada</option>
</select>
</div>
<button class="btn btn-primary" onclick="fillTaskTable()"><b>Filtrar</b></button>
</form>
</div>
</div>
</div>
</div>
當你調用fillTaskTable（）？什麼是事件？ – 2014-09-22 10:58:06
當我過濾？它是一個按鈕的onclick按鈕： – aarelovich 2014-09-22 10:58:50
是一個提交按鈕？你確定沒有表格提交嗎？ – 2014-09-22 10:59:34