2
我有一个显示数据库条目的表。用户可以为每一行打开一个弹出式菜单。其中一个选项是删除数据库条目，表格应该通过AJAX调用进行相应的刷新。
我是一个HTML页面上只要有人点击了table-popup的#delete-toggle做一个AJAX调用（该table-popup是当有人点击table-edit-button在该表的每一行中存在的表出现一个div） ：
<div class="table-popup">
<ul>
<li id="edit-toggle">Bearbeiten</li>
<li id="favorite-toggle">Zu Favoriten hinzufügen</li>
<li>Datei öffnen</li>
<li>Im Ordner öffnen</li>
<li id="delete-toggle">Löschen</li>
</ul>
</div>
<div class="main-content">
<h2 class="main-content-header">Datenbank</h2>
<div id="table">
<table>
<thead>
<tr class="table-row" tabindex="1">
<th class="fixed-header"></th>
<th>Dateiname</th>
<th>Benutzer</th>
<th>Erstelldatum</th>
<th>Änderungsdatum</th>
<th>Erste Zeile</th>
<th>Kategorie</th>
<th>Projekt</th>
</tr>
</thead>
<?php
include_once('connect.php');
$result = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', category.name AS 'categoryname', project.name AS 'projectname', user.name AS 'username', idFile
FROM file, category, project, file_has_project, file_has_category, user, user_has_project, user_has_category
WHERE file.idFile = file_has_project.file_idFile AND file_has_project.project_idProject = project.idProject AND file.idFile = file_has_category.file_idFile AND file_has_category.category_idCategory = category.idCategory AND user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'
ORDER BY file.name ASC");
if ($result->num_rows > 0) {
echo "<tbody>";
while($row = $result->fetch_assoc()) {
echo "<tr class='".$row['idFile']." table-row' tabindex='1'>";
echo "<th class='table-edit-button fixed-header'><img src='images/open.gif' /></th>";
echo "<td>".$row['filename']."</td>";
echo "<td>".$row['username']."</td>";
echo "<td>-</td>";
echo "<td>-</td>";
echo "<td>".$row['filedescription']."</td>";
echo "<td>".$row['categoryname']."</td>";
echo "<td>".$row['projectname']."</td>";
echo "</tr>";
}
echo "</tbody>";
}
?>
</table>
</div>
</div>
这里是做AJAX调用该函数：
$(document).ready(function() {
var fileID, fileName, fileDescription, fileCategory, fileProject, projectID, categoryID;
$('.table-edit-button').click(function() {
fileID = $(this).parent().attr('class').split(' ')[0];
});
//Delete file entries
$(document).on("click", "#delete-toggle", function() {
$.ajax({
cache: false,
url: 'ajax-delete.php',
type: 'post',
data: { fileID : fileID, deleteID : 'indexFile' },
success: function(data) {
$('.main-content').html(data);
}
});
});
});
，这里是接收AJAX调用的页面：
<?php
session_start();
include_once('connect.php');
if ($_POST['deleteID'] == 'indexFile') {
$connect->query("DELETE FROM file_has_project WHERE file_idFile = '".$_POST['fileID']."'");
$connect->query("DELETE FROM file_has_category WHERE file_idFile = '".$_POST['fileID']."'");
$connect->query("DELETE FROM file WHERE idFile ='".$_POST['fileID']."'");
echo '<h2 class="main-content-header">Datenbank</h2>
<div id="table">
<table>
<thead>
<tr class="table-row" tabindex="1">
<th class="fixed-header"></th>
<th>Dateiname</th>
<th>Benutzer</th>
<th>Erstelldatum</th>
<th>Änderungsdatum</th>
<th>Erste Zeile</th>
<th>Kategorie</th>
<th>Projekt</th>
</tr>
</thead>';
$result = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', category.name AS 'categoryname', project.name AS 'projectname', user.name AS 'username', idFile
FROM file, category, project, file_has_project, file_has_category, user, user_has_project, user_has_category
WHERE file.idFile = file_has_project.file_idFile AND file_has_project.project_idProject = project.idProject AND file.idFile = file_has_category.file_idFile AND file_has_category.category_idCategory = category.idCategory AND user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'
ORDER BY file.name ASC");
if ($result->num_rows > 0) {
echo "<tbody>";
while($row = $result->fetch_assoc()) {
echo "<tr class='".$row['idFile']." table-row' tabindex='1'>";
echo "<th class='table-edit-button fixed-header'><img src='images/open.gif' /></th>";
echo "<td>".$row['filename']."</td>";
echo "<td>".$row['username']."</td>";
echo "<td>-</td>";
echo "<td>-</td>";
echo "<td>".$row['filedescription']."</td>";
echo "<td>".$row['categoryname']."</td>";
echo "<td>".$row['projectname']."</td>";
echo "</tr>";
}
echo "</tbody>";
}
echo " </table>";
echo "</div>";
$connect->close();
}
?>
这是处理动画显示table-popup功能（包裹在$(document).ready）：
function disablePopup() {
$('.table-popup').hide(100);
}
function enablePopup(event) {
event.stopPropagation();
var buttonOffset = $(this).offset();
$('.table-popup').css({
top: buttonOffset.top + 10,
left: buttonOffset.left +10
});
$('.table-popup').show(100);
}
//Disable Table Popup Menu
$(document).on("click", disablePopup);
//Enable Table Popup Menu
$(document).on("click", ".table-edit-button", enablePopup);
说我遇到的问题是一切工作按预期被执行的第一次。但是，如果我想再次执行此操作，而不刷新整个页面，则不起作用。 click事件被解雇，我用alert测试了它，但AJAX调用没有得到执行。我必须刷新整个页面，然后再次运行。
根据this question我认为这将是固定的，当我将所有.click更改为$(document).on('click')但这并没有解决它。正如你所看到的，所有相关的部分都是这样的。并且向AJAX调用添加cache: false也未解决问题。
但我有。 ...？ – Tywele
不，你没有它在两个地方....不是按钮点击与代码'$（'。表编辑按钮'）看到。click（function（）{'你在哪里设置fileId变量的值 – epascarello
哦，我现在看到了，试试吧 – Tywele