Alter table in database like this
ALTER TABLE users_badges ADD COLUMN notified TINYINT(1) NOT NULL DEFAULT 0;
Open cron_badges_user.php
Replace its code with
<?php require('../../bootloader.php'); header('Content-Type: application/json'); $user_id = $user->_data['user_id']; // Get logged-in user ID $awarded_badges = []; $all_badges = []; // Fetch user points $user_points_result = $db->query("SELECT user_points FROM users WHERE user_id = $user_id"); if (!$user_points_result) { die(json_encode(["error" => "Database error: " . $db->error])); } $user_points = $user_points_result->fetch_assoc()['user_points']; // Fetch all badges $get_badges = $db->query("SELECT * FROM badges"); while ($badge = $get_badges->fetch_assoc()) { $badge_id = $badge['badge_id']; // Check if user already has the badge $check = $db->query("SELECT COUNT(*) as count FROM users_badges WHERE user_id = $user_id AND badge_id = $badge_id"); $check_result = $check->fetch_assoc(); $has_badge = ($check_result['count'] > 0); // True if badge is already earned if (!$has_badge && $badge['points_required'] <= $user_points) { // Assign the badge $db->query("INSERT IGNORE INTO users_badges (user_id, badge_id, awarded_at) VALUES ($user_id, $badge_id, NOW())"); // Add to awarded badges list (for pop-up notification) $awarded_badges[] = [ "badge_id" => $badge["badge_id"], "badge_name" => $badge["name"], "badge_description" => $badge["description"], "badge_image" => $badge["image"] ]; $has_badge = true; // Since the badge is now awarded } // Add all badges for the frontend (including `has_badge`) $all_badges[] = [ "badge_id" => $badge["badge_id"], "badge_name" => $badge["name"], "badge_description" => $badge["description"], "badge_image" => $badge["image"], "has_badge" => $has_badge // Important for UI ]; } // **Ensure JSON Output is Fixed** $response = [ "awarded_badges" => $awarded_badges, // For pop-up "all_badges" => $all_badges // For UI (to fix the grayscale issue) ]; // DEBUG: Log the JSON output error_log("JSON Output: " . json_encode($response)); ob_clean(); echo json_encode($response, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE); exit; ?>
Open badge.js and replac this code
$(document).ready(function () { console.log("Checking for new badges..."); $.ajax({ url: "/modules/badges/cron_badges_user.php", method: "POST", dataType: "json", // Ensure jQuery automatically parses JSON success: function (response) { console.log("Badge response:", response); if (response.awarded_badges && response.awarded_badges.length > 0) { response.awarded_badges.forEach(function (badge) { console.log("Showing badge:", badge.badge_name); showBadgePopup(badge.badge_name, badge.badge_image, badge.badge_description); }); } else { console.log("No new badges earned."); } }, error: function (xhr, status, error) { console.error("Error loading badges:", error); } }); });
with this code
$(document).ready(function () { console.log("Checking for new badges..."); $.ajax({ url: "/modules/badges/cron_badges_user.php", method: "POST", dataType: "json", success: function (response) { console.log("Badge response:", response); if (response.awarded_badges && response.awarded_badges.length > 0) { response.awarded_badges.forEach(function (badge) { let badgeKey = `badge_seen_${badge.badge_id}`; // Show popup only if this badge hasn’t been shown in this session if (!localStorage.getItem(badgeKey)) { console.log("Showing badge:", badge.badge_name); showBadgePopup(badge.badge_name, badge.badge_image, badge.badge_description); localStorage.setItem(badgeKey, "true"); // Mark badge as seen } }); } else { console.log("No new badges earned."); } }, error: function (xhr, status, error) { console.error("Error loading badges:", error); } }); });