JQuery 和 PHP 不显示所有查询结果，但一些（随机）

Question

1st time asking here! I have a MySQL SELECT query and array of results. I have a container and within that container I want to display child div(s) displaying the array result + JQuery to add some nice fadeIn and fadeOut. The issue is the script display some of the array but NEVER all. I have 7 but the page shows 5 sometimes even 2 only and the data seems to be picked randomly.

// Fetch user notifications
$stmt0 = $conn->prepare("SELECT notifid, notification FROM notifications WHERE userid = :userid AND username = :uname;");
$stmt0->execute(['userid' => $userid, 'uname' => $username]);
$results0 = $stmt0->fetchAll();
foreach ($results0 as $row0) { 
$notifid = $row0['notifid'];  
$notification = $row0['notification'];
$notificationid = substr(sha1(mt_rand()), 0, 8);
echo "<div class='bluenot' id='".$notificationid."'>&#10004; <b><i>$notification</i></b></div>";
echo '<script>
$(document).ready(function(){
        var notifid = ' . $notificationid . ';
        $("#notifybox").append($ (notifid) );
        setTimeout(function() {
        $(notifid).fadeIn("fast", function () { $(this).delay(5000).fadeOut("fast"); });
        $(notifid).css("display", "block");});
 
});
</script>';

CSS :

.notifybox {
        width: auto;
        height: auto;
        position: fixed;
        bottom: 0;
        left: 15px;
        z-index: 1000 important;
}

.bluenot {
    width: 400px;
    height: 80px;
    padding: 20px 40px 20px 40px;
    margin-top: 8px;
    margin-bottom: 8px;
    display: none;
    background: #aaa9ff;
    border-left: #2933aa 10px solid;
    border-radius: 10px;
    color: #353759;
    text-align: center;
}

SOLVED: Made a copy of class .bluenot and named it .dbnot then changed the code to :

echo "<div class='dbnot' id='".$notificationid."'>&#10004; <b><i>$notification</i></b></div>";
echo '<script>
        $("#notifybox").append($ (".dbnot") );
        $(".dbnot").fadeIn( 800 ).delay( 1000 ).fadeOut( 400 ).$(".dbnot").css("display", "block");
</script>';

Hope this helps anyone who would face the same issue.

Answer 1

You are missing the closing curly brackets for your foreach loop but assuming you have it after your <script> block then i would guess you are over writing the variable "notifid"

I would try to rearrange your logic and if you are deadset on this approach then create the variable "notifid" with a another variable to avoid duplicate declarations

something maybe like

$(document).ready(function(){
        var notifid_' . $notificationid . ' = ' . $notificationid . ';
        $("#notifybox").append($ (notifid_' . $notificationid . ') );
        setTimeout(function() {
        $(notifid_' . $notificationid . ').fadeIn("fast", function () { $(this).delay(5000).fadeOut("fast"); });
        $(notifid_' . $notificationid . ').css("display", "block");});
 
});