Question

我有一个Bootstrap徽章，显示消息数量。

当用户单击该图标时，会出现一个模式，显示来自数据库的消息。他们可以选择删除消息（它实际上没有删除，它只是将整数设置为1，因此它不会显示）。删除一次后，消息div被删除，数据库将字段设置为＆＃39; 1＆＃39;，通知标记减少1.

删除1条消息后：

删除没有页面刷新的第二条消息后：

这是一个问题。但是，一旦我刷新，它就会隐藏徽章，因为它应该小于1。

徽章文本是从PHP脚本生成的，该脚本在数据库中查询消息。对于它找到的每一行，我都会增加通知：

$query = "SELECT username, avatar, conversation_id, conversation_subject, time, msg_seen FROM `users` INNER JOIN `conversation` ON `users`.id = `conversation`.user_1
                          WHERE user_2 = ? AND user_2_deleted = ? ORDER BY time DESC";
            if (!$stmt = $connection->prepare($query)) {
                echo $stmt->error;
            } else {
                if (!$stmt->bind_param('ii', $recip_id, $user_2_deleted)) {
                    echo $stmt->error;
                } else {
                    $stmt->execute();
                    $stmt->bind_result($sender_name, $avatar, $msg_id, $subject, $timestamp, $msg_seen);
                    while ($stmt->fetch()) {                         
                        if ($msg_seen == 0) {
                            $notification_count++; // RIGHT HERE
                        }

这是相应的jquery / ajax，它删除消息div，发送ajax调用，并警告消息已被删除。除徽章文本值之外的所有内容每页刷新多次使用。我必须刷新页面才能看到0个通知。为什么？

//Find notification badge and display count
$(document).ready(function () {
    var badge = $(this).find(".badge");
    var count = <?php echo $notification_count; ?>;

    if (count > 0) {
        badge.text(count);
    } else {
        badge.hide();
    }
});
    $(document).on('click', '.delete-btn', function() {
        var id = $(this).data('id');
        var url = "../inc/delete_msg.php?msg_id="+id;
        $(this).closest('.msg-content').next('hr').remove();
        $(this).closest('.msg-content').remove();

        $.ajax({
            type: "GET",
            url: url,
            success: success,
            error: function () {
                alert('Failed to Delete');
            }
        });
    });
function success() {
    $(".badge").text(<?php echo $notification_count - 1;?>);
    $('.modal-title').after(
        '<div class="alert alert-success delete-success-alert text-center" role="alert" id="delete_success_alert">' +
        'Message Deleted</div>');
    $('#delete_success_alert').fadeTo(3000, 500).slideUp(500, function () {
        $('#delete_success_alert').slideUp(500);
    });
}

我该怎么做才能解决这个问题？数据库更新两次，div被删除两次。它只是这个徽章，我无法弄清楚。

Answer 1

问题很简单，看看这一行：

$(".badge").text(<?php echo $notification_count - 1;?>);

php代码什么时候执行？你希望它为每个ajax请求执行但你错了，它只会在浏览器请求包含你的javascript代码的文件/页面时在服务器上执行，所以你的代码将等同于：

$(".badge").text(2); // 2 if we have 2 messages

所以无论你做了多少ajax请求并且成功，你总是将徽章文本放到2，直到页面引用，php代码才会再次执行。

现在首先要解决问题，你有一个count变量来捕获服务器的初始消息数，我建议使用这样的变量：

count--;
$(".badge").text(count);

此代码是javascript代码，将在ajax成功执行，它应该可以工作。

从现在开始记得执行哪个代码时，php代码是服务器端代码，它在服务器上执行，浏览器不会得到任何php代码，javascript代码是客户端代码，浏览器会收到它并执行它，当你把PHP代码放在javascript代码中时，它就像“嘿浏览器执行此代码”，其中“此代码”是动态的，具体取决于php代码的输出。

在Ajax调用之后，降低Bootstrap通知标记中的值只能运行一次

1 个答案: