PHP 本机中的 Toast 无法在成功端工作

Question

我的 PHP 服务器端块中有这段代码定义了 TOAST 功能

 // Define the HTML code for the toast element
echo '<div class="toastNotif hide">
    <div class="toast-content">
        <i class="bx bx-check check"></i>
        <div class="message">
            <span class="text text-1"></span>
            <!-- this message can be changed to "Success" and "Error"-->
            <span class="text text-2"></span>
            <!-- specify based on the if-else statements -->
        </div>
    </div>
    <i class="bx bx-x close"></i>
    <div class="progress"></div>
</div>';

// Define JavaScript functions to handle the toast
echo '<script>
    function showToast(type, message) {
        var toast = document.querySelector(".toastNotif");
        var progress = document.querySelector(".progress");
        var text1 = toast.querySelector(".text-1");
        var text2 = toast.querySelector(".text-2");
        
        if (toast && progress && text1 && text2) {
            // Update the toast content based on the message type
            if (type === "success") {
                text1.textContent = "Success";
                toast.classList.remove("error");
            } else if (type === "error") {
                text1.textContent = "Error";
                toast.classList.add("error");
            } else {
                console.error("Invalid message type");
                return;
            }
            
            // Set the message content
            text2.textContent = message;
            
            // Show the toast and progress
            toast.classList.add("showing");
            progress.classList.add("showing");
            
            // Hide the toast and progress after 5 seconds
            setTimeout(() => {
                toast.classList.remove("showing");
                progress.classList.remove("showing");
                 window.location.href = "staff_log.php";
            }, 5000);
        } else {
            console.error("Toast elements not found");
        }
    }

    function closeToast() {
        var toast = document.querySelector(".toastNotif");
        var progress = document.querySelector(".progress");
        toast.classList.remove("showing");
        progress.classList.remove("showing");
    }
</script>';

此代码确实适用于此错误捕获

// Check if the form is submitted and Borrower ID is provided
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['borrower_id'])) {
    // Database connection
    $conn = mysqli_connect("localhost", "root", "root", "db_library_2", 3308); 
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }


    // Retrieve Borrower_ID from the form
    $borrower_id = $_POST['borrower_id'];
    if (substr($borrower_id, 0, 1) === '0') {
        // Borrower_ID starts with '0', flag as error
          echo '<script>
    // Call showToast with "error" message type after encountering an error
    showToast("error", "Error Entry.");
</script>';

    } 

但是在成功方面，TOAST 不显示 UI，只显示成功，然后在 5 秒后按应有的方式重定向，

 else {
            // Validate Borrower_ID against tbl_borrower table
            $sql_validate_borrower = "SELECT * FROM tbl_borrower WHERE Borrower_ID = '$borrower_id'";
            $result_validate_borrower = $conn->query($sql_validate_borrower);

            if ($result_validate_borrower->num_rows > 0) {
                // Borrower_ID is valid
                $isBorrowerIdValid = true;
                $_SESSION['borrower_id'] = $borrower_id;

                // SQL query to insert data with auto-increment Log_ID and current timestamp
                $sql = "INSERT INTO tbl_log (Borrower_ID, `Date_Time`) 
                VALUES ($borrower_id, NOW())";

                if ($conn->query($sql) === TRUE) {
                    // echo '<script>alert("Record inserted successfully."); window.location.href = "staff_log.php";</script>';
                 echo '<script>
        // Call showToast with "success" message type after successful insertion
        showToast("success", "Record inserted successfully.");
    </script>';

不显示成功“记录插入成功”的 UI

但在错误捕获代码行上显示 showToast Error

我已在其他页面上尝试过此代码，并且成功确实通过适当的样式显示出来

我搞砸了什么吗

我想在此页面上显示成功，但它没有以样式显示

Answer 1

抱歉哈哈哈我刚刚意识到我把 exit();在这段代码上

     if ($conn->query($sql) === TRUE) {
                // echo '<script>alert("Record inserted successfully."); window.location.href = "staff_log.php";</script>';
             echo '<script>
    // Call showToast with "success" message type after successful insertion
    showToast("success", "Record inserted successfully.");
</script>';

                // exit(); ------ THIS ONE IS THE ONE FAILING THE TOAST
            }

当我评论它时，横幅显示哈哈，还是谢谢你