Javascript Uncaught SyntaxError: Invalid or unexpected token

问题描述 投票:0回答:0

点击评论上的编辑按钮并不总是有效。在控制台中,它给我 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>&copy; 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");
}
?>
javascript php jquery ajax pdo
© www.soinside.com 2019 - 2024. All rights reserved.