点击评论上的编辑按钮并不总是有效。在控制台中,它给我 Uncaught SyntaxError: Invalid or unexpected token (at view.php?photo_id=13:154:31) 我不知道问题出在哪里。
当我点击编辑按钮时,它应该打开一个表格,我可以用它来编辑和更新评论,但有时它就是打不开。
这是我的JS
function showEditCommentField(comment_id) {
// Hide the comment text and original edit button
var comment_text = document.querySelector('#comment-text-' + comment_id);
var editButton = document.querySelector('#edit-comment-btn-' + comment_id);
if (comment_text && editButton) {
comment_text.style.display = 'none';
editButton.style.display = 'none';
}
// Show the edit form
var editForm = document.querySelector('#edit-comment-form-' + comment_id);
if (editForm) {
editForm.style.display = 'block';
}
// Set up event listeners for the save and cancel buttons
var saveButton = document.querySelector('#save-comment-btn-' + comment_id);
var cancelButton = document.querySelector('#cancel-comment-btn-' + comment_id);
if (saveButton && cancelButton) {
saveButton.addEventListener('click', function() {
saveCommentEdit(comment_id);
});
cancelButton.addEventListener('click', function() {
cancelEditComment(comment_id);
});
}
// Hide the edit button for the specific comment being edited
if (editButton) {
editButton.style.display = 'none';
}
}
function cancelEditComment(comment_id) {
// Restore the original comment text
var comment_text = document.querySelector('#comment-text-' + comment_id);
if (comment_text) {
comment_text.style.display = 'block';
}
// Show the edit button again
var editButton = document.querySelector('#edit-comment-btn-' + comment_id);
if (editButton) {
editButton.style.display = 'block';
}
// Hide the edit form
var editForm = document.querySelector('#edit-comment-form-' + comment_id);
if (editForm) {
editForm.style.display = 'none';
}
}
function saveCommentEdit(comment_id) {
// Get the edited comment text
var comment_text = document.querySelector('#edit-comment-text-' + comment_id);
if (comment_text) {
comment_text = comment_text.value;
// Submit the edited comment to the server
$.ajax({
type: "POST",
url: "edit_comment.php",
data: {
comment_id: comment_id,
comment_text: comment_text
},
success: function(response) {
// Update the comment text on the page
var comment_text = document.querySelector('#comment-text-' + comment_id);
if (comment_text) {
comment_text.textContent = response;
}
// Hide the edit form
var editForm = document.querySelector('#edit-comment-form-' + comment_id);
if (editForm) {
editForm.style.display = 'none';
}
// Show the Edit button
var editButton = document.querySelector('#edit-comment-btn-' + comment_id);
if (editButton) {
editButton.style.display = 'block';
}
// Refresh the page to load the updated comment data
location.reload();
}
});
}
}
function cancelEditComment(comment_id) {
// Restore the original comment text
var comment_text = document.querySelector('#comment-text-' + comment_id);
if (comment_text) {
comment_text.style.display = 'block';
}
// Hide the edit form
var editForm = document.querySelector('#edit-comment-form-' + comment_id);
if (editForm) {
editForm.style.display = 'none';
}
// Show the edit button for this comment only
var editButton = document.querySelector('#edit-comment-btn-' + comment_id);
if (editButton) {
editButton.style.display = 'block';
}
}
php
<?php
// Include the database connection
require_once "config.php";
if (!isset($_SESSION)) {
session_start();
}
// Check if a photo ID was provided in the URL
if (isset($_GET["photo_id"])) {
$id = $_GET["ph<?php
// Include the database connection
require_once "config.php";
if (!isset($_SESSION)) {
session_start();
}
// Check if a photo ID was provided in the URL
if (isset($_GET["photo_id"])) {
$id = $_GET["photo_id"];
// Select the photo from the database, along with its corresponding username
$stmt = $conn->prepare(
"SELECT photos.*, users.username FROM photos INNER JOIN users ON photos.user_id = users.user_id WHERE photo_id = ?"
);
$stmt->bindParam(1, $id);
$stmt->execute();
$photo = $stmt->fetch(PDO::FETCH_ASSOC);
// If the photo was found, display its details
if ($photo) {
$image_path = "uploads/" . $photo["image"]; ?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $photo["title"]; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/comment.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/commentform.js" type="text/javascript"></script>
</head>
<body>
<?php include "navbar.php"; ?>
<main>
<div class="photo">
<img src="<?php echo $image_path; ?>" alt="<?php echo $photo[
"title"
]; ?>">
<div class="username-view"><a class="username" href="profile.php?user_id=<?php echo $photo[
"user_id"
]; ?>">
<?php echo $photo["username"]; ?></a></div>
<h3 class="gallery_bio"> <?php echo $photo["title"]; ?></h3>
<p class="gallery_bio"> <?php echo $photo["description"]; ?></p>
</div>
<section class="comments">
<?php
// Check if user is logged in
if (isset($_SESSION["user_id"])) {
// Display comment form
echo '<form method="post" action="comment.php" class="comment-sender-form">';
echo '<h3 class="comment-header">Comments</h3>';
echo '<textarea class="comment-text-typer" name="comment_text" required></textarea>';
echo '<input type="hidden" name="photo_id" value="' .
$photo["photo_id"] .
'">';
echo '<input type="submit" class="submit-comment" name="submit" value="Post Comment">';
echo "</form>";
} else {
// Display login prompt
echo '<p class="comment-header-login"><a href="registration.php">Join the community</a> to add your comment. Already a JustFurrier? <a href="login.php?redirect=' .
$_SERVER["REQUEST_URI"] .
'">Log in</a></p>';
}
// Display comments
$stmt = $conn->prepare(
"SELECT comments.*, users.username FROM comments INNER JOIN users ON comments.user_id = users.user_id WHERE photo_id = ?"
);
$stmt->bindParam(1, $id);
$stmt->execute();
$comments = $stmt->fetchAll(PDO::FETCH_ASSOC);
if (count($comments) > 0) {
foreach ($comments as $comment) {
echo '<div class="comment">';
echo '<div class="username"><a href="profile.php?username=' .
$comment["username"] .
'">' .
$comment["username"] .
"</a></div>";
echo '<div class="comment-text">' .
$comment["comment_text"] .
"</div>";
// Check if the comment was posted by the logged-in user or if the logged-in user is an admin/moderator
$isEditable =
isset($_SESSION["user_id"]) &&
isset($_SESSION["role"]) &&
($comment["user_id"] == $_SESSION["user_id"] ||
$_SESSION["role"] == "admin" ||
$_SESSION["role"] == "moderator");
if ($isEditable) {
// Display edit and delete buttons
echo '<div class="comment-actions">';
echo '<button class="edit-comment-btn" id="edit-comment-' .
$comment["comment_id"] .
'" onclick="showEditCommentField(' .
$comment["comment_id"] .
', \'' .
addslashes($comment["comment_text"]) .
'\')">Edit</button>';
echo '<form method="post" action="delete_comment.php">';
echo '<input type="hidden" name="comment_id" value="' .
$comment["comment_id"] .
'">';
echo '<input type="hidden" name="photo_id" value="' .
$photo["photo_id"] .
'">';
echo '<button type="submit" class="delete-comment-btn">Delete</button>';
echo "</form>";
echo "</div>";
}
echo '<span id="edit-comment-form-' .
$comment["comment_id"] .
'" class="edit-comment-form" style="display:none;">';
echo '<button type="button" class="edit-comment-btn" onclick="toggleEditCommentForm(' .
$comment["comment_id"] .
')">Edit</button>';
echo '<input type="hidden" name="comment_id" value="' .
$comment["comment_id"] .
'">';
echo '<input type="hidden" name="photo_id" value="' .
$photo["photo_id"] .
'">';
// Show edit form only when user clicks on edit button
echo '<textarea id="edit-comment-text-' .
$comment["comment_id"] .
'" class="edit-comment-textarea" name="comment_text">' .
$comment["comment_text"] .
"</textarea>";
echo '<button type="button" class="btn btn-primary" onclick="saveCommentEdit(' .
$comment["comment_id"] .
')">Save</button>';
echo '<button type="button" class="edit-comment-cancel-btn" onclick="cancelEditComment(' .
$comment["comment_id"] .
')">Cancel</button>';
echo "</form>";
echo "</span>";
echo "</div>";
}
} elseif (isset($_SESSION["user_id"])) {
echo '<p class="comment-header-login">No comments yet. Be the first one?</p>';
}
?>
</section>
</main>
<footer>
<p>© 2023 JF</p>
</footer>
</body>
</html>
<?php
} else {
// If the photo was not found, display an error message
echo "Photo not found.";
}
} else {
// If no photo ID was provided, redirect the user back to the homepage
header("Location: index.php");
}
?>