I have a table that displays entries of a database. The user is able to open a popup menu for each row. One of the options is to delete a database entry and the table should refresh accordingly via an AJAX call.
我有一个显示数据库条目的表。用户可以为每一行打开一个弹出菜单。其中一个选项是删除数据库条目，表格应通过AJAX调用进行相应刷新。
I'm doing an AJAX call on a HTML page as soon as someone clicks the #delete-toggle in the table-popup (the table-popup is a div that appears when someone clicks the table-edit-button in the table that exists in each row of the table):
一旦有人点击表格弹出窗口中的＃delete-toggle，我就会在HTML页面上进行AJAX调用（表格弹出窗口是当有人点击存在的表格中的表格编辑按钮时出现的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>
Here is the function that does the AJAX call:
这是执行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);
}
});
});
});
And here is the page that receives the AJAX call:
这是接收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();
}
?>
This is the function that handles the animation to display the table-popup (wrapped in $(document).ready):
这是处理动画以显示表弹出的函数（包装在$（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);
The problem that I'm having is that everything works as expected the first time it gets executed. But when I want to do it a second time without refreshing the whole page it doesn't work. The click event gets fired I tested it with an alert but the AJAX call doesn't get executed. I have to refresh the whole page and then it works again.
我遇到的问题是，第一次执行时，一切都按预期工作。但是当我想第二次这样做而没有刷新整个页面时它不起作用。 click事件被触发我用一个警告测试它但是AJAX调用没有被执行。我必须刷新整个页面然后再次工作。
According to this question I thought it would be fixed when I changed all the .click to $(document).on('click') but that didn't fix it. As you can see all the relevant parts are like this. And adding cache: false to the AJAX call didn't fix it either.
根据这个问题，我认为当我将所有.click更改为$（document）.on（'click'）时会修复它，但是没有修复它。如您所见，所有相关部分都是这样的。并且在AJAX调用中添加cache：false也没有修复它。
3 个解决方案
#1
4
Because you bind the edit button on document ready so when you replace the html table with the Ajax call, they are no longer bound. You need to use event delegation or bind the buttons when the Ajax call is returned.
因为您在文档就绪上绑定了编辑按钮，所以当您使用Ajax调用替换html表时，它们不再受约束。返回Ajax调用时，需要使用事件委托或绑定按钮。
$('.table-edit-button').click(function() {
needs to be
需要是
$(document).on("click", '.table-edit-button', function() {
#2
0
In your AJAX call, Try below,
在您的AJAX调用中，请尝试以下操作，
//Delete file entries
$("#delete-toggle").on("click", function() {
$.ajax({
cache: false,
url: 'ajax-delete.php',
type: 'post',
data: { fileID : fileID, deleteID : 'indexFile' },
success: function(data) {
$('.main-content').html(data);
}
});
});
#3
0
When you call some jquery event handler in ajax content then you need you code like this
当你在ajax内容中调用一些jquery事件处理程序时，你需要这样的代码
$(document).on("click", '.table-edit-button', function(){});
if we do use on it is fire no issue it is in page or ajax content. earlier we use live but it is depreciated and now it is replace via .on so use .ON and your ajax call working 100%
如果我们确实使用它是火没有问题它在页面或ajax内容。早些时候我们使用直播，但它是折旧的，现在它通过.on替换所以使用.ON和你的ajax调用100％工作
#1
4
Because you bind the edit button on document ready so when you replace the html table with the Ajax call, they are no longer bound. You need to use event delegation or bind the buttons when the Ajax call is returned.
因为您在文档就绪上绑定了编辑按钮，所以当您使用Ajax调用替换html表时，它们不再受约束。返回Ajax调用时，需要使用事件委托或绑定按钮。
$('.table-edit-button').click(function() {
needs to be
需要是
$(document).on("click", '.table-edit-button', function() {
#2
0
In your AJAX call, Try below,
在您的AJAX调用中，请尝试以下操作，
//Delete file entries
$("#delete-toggle").on("click", function() {
$.ajax({
cache: false,
url: 'ajax-delete.php',
type: 'post',
data: { fileID : fileID, deleteID : 'indexFile' },
success: function(data) {
$('.main-content').html(data);
}
});
});
#3
0
When you call some jquery event handler in ajax content then you need you code like this
当你在ajax内容中调用一些jquery事件处理程序时，你需要这样的代码
$(document).on("click", '.table-edit-button', function(){});
if we do use on it is fire no issue it is in page or ajax content. earlier we use live but it is depreciated and now it is replace via .on so use .ON and your ajax call working 100%
如果我们确实使用它是火没有问题它在页面或ajax内容。早些时候我们使用直播，但它是折旧的，现在它通过.on替换所以使用.ON和你的ajax调用100％工作