Question

<?php
session_start();
if(!$_SESSION['Admin']) {
header('Location: login.php'); exit();
}
?>
<!DOCTYPE HTML>
<html>
<head>
    <title> ticketExpress | Admin </title>
    <link rel='stylesheet' href='../assets/css/style.css'> 
</head>
<body>
<div id='containerAdmin'>
<h1> <img class='logo' src='../assets/images/logo.png' width='200' height='43'> </h1> <a href='?logout' class='logout'> Logout </a>
<h3> Open Tickets </h3>
<hr />
<?php
require("../configuration/config.php");
$GetTickets = $con->query("SELECT * FROM tickets WHERE open='true'");
while($TicketInfo = $GetTickets->fetch_object()) {
$Subject = $TicketInfo->Subject;
echo "<div id='ticket'>".$Subject ."<a href='?delete=$TicketInfo->ID'><img style='float:right'src='../assets/images/delete.png' width='15px' height='15px'></a><a style='float:right; color:red; text-decoration:none; margin-right:10px;' href='?close=$TicketInfo->ID'> Close </a><font style='float:right; margin-right:10px;  color:green;' id='responseMsg'> </font></div>";
}
if(isset($_GET['delete'])) {
$ID = $_GET['delete'];
echo "
<script type='text/javascript'>
    var ajax = new XMLHttpRequest();
    ajax.open('POST','delete.php', true);
    ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    ajax.onreadystatechange = function () {
        if(ajax.readyState == 4 && ajax.status == 200) {
            document.getElementById('responseMsg').innerHTML = ajax.responseText;
        }
        }
        ajax.send('delete=$ID');
    </script>
    ";
}
if(isset($_GET['logout'])) {
session_destroy();
header('Location: login.php');
}
if(isset($_GET['close'])) {
$ID = $_GET['close'];
echo "
<script type='text/javascript'>
    var ajax = new XMLHttpRequest();
    ajax.open('POST','close.php', true);
    ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    ajax.onreadystatechange = function () {
        if(ajax.readyState == 4 && ajax.status == 200) {
            document.getElementById('responseMsg').innerHTML = ajax.responseText;
        } 
        }
        ajax.send('close=$ID');
    </script>
    ";
}
?>
<br />
</div>
</body>
</html>

我的问题是每当我点击删除时，ajax响应总是出现在页面上的第一张票据旁边（最上面一张）

例如，如果我单击故障单21旁边的“关闭”，则AJAX响应“Ticket Succesfully Closed”将始终显示在页面上的第一张故障单旁边（例如，故障单1）

这是close.php

<?php
require('../configuration/config.php');
if(isset($_POST['close'])) {
echo "Ticket Successfully Closed";
$TID = $_POST['close'];
$con->query("UPDATE tickets SET open='false' WHERE ID='$TID'");
}

并删除.php

<?php
require('../configuration/config.php');
if(isset($_POST['delete'])) {
echo "Ticket Deleted";
$TID = $_POST['delete'];
$con->query("DELETE FROM tickets WHERE ID='$TID'");
}

所有答案一如既往地受到赞赏！提前谢谢

Answer 1

您有多个具有相同ID的DOM元素。检查你的while循环。

代码document.getElementById('responseMsg')将始终获得DOM中存在的第一个元素。您正在显示具有相同DOM ID的多个故障单。

您需要在要显示服务器响应的元素上附加一些唯一标识符。

看看这一行：

echo "<div id='ticket'>".$Subject ."<a href='?delete=$TicketInfo->ID'><img    style='float:right'src='../assets/images/delete.png' width='15px' height='15px'></a><a style='float:right; color:red; text-decoration:none; margin-right:10px;' href='?close=$TicketInfo->ID'> Close </a><font style='float:right; margin-right:10px;  color:green;' id='responseMsg'> </font></div>";

您可以将id='responseMsg'更改为id='responseMsg{$TicketInfo->ID}'，然后将此票证ID作为JavaScript函数中的参数发送，以定位正确的“responseMsg”元素。

E.g。

echo "<div id='ticket{$TicketInfo->ID}'>". $Subject ."<a href='#' onclick='deleteTicket({$TicketInfo->ID});'><img src="..."></a> <a style='float:right; color:red; text-decoration:none; margin-right:10px;' href='#' onclick='closeTicket({$TicketInfo->ID});'> Close </a><span style='float:right; margin-right:10px;  color:green;' id='responseMsg{$TicketInfo->ID}'> </span></div>";

<script type='text/javascript'>
function deleteTicket(ticketID) {
  var ajax = new XMLHttpRequest();
  ajax.open('POST','delete.php', true);
  ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  ajax.onreadystatechange = function () {
    if(ajax.readyState == 4 && ajax.status == 200) {
      document.getElementById('responseMsg'+ticketID).innerHTML = ajax.responseText;
    }
  }
  ajax.send('delete='+ticketID);
}
</script>

ajax响应消息唯一标识符

1 个答案: