.show() not displaying <div> on click, despite confirmed event trigger and DOM presence
My problem is the div element will not show even when using the show method and clicking on it.
console.log("Profile JS loaded");
document.addEventListener('DOMContentLoaded', function () {
// Find all user profile bubbles
var userBubbles = document.querySelectorAll('.bubble');
userBubbles.forEach(function (bubble) {
bubble.addEventListener('mouseenter', function () {
var userId = bubble.getAttribute('data-userid');
var calendarEl = document.getElementById('mini-calendar-' + userId);
// Fetch user events
fetch(`/events/${userId}`)
.then(response => response.json())
.then(events => {
// Initialize FullCalendar
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: events,
headerToolbar: false, // Hide header
height: 'auto', // Adjust height
contentHeight: 'auto', // Adjust content height
editable: false, // Disable editing
selectable: false // Disable selection
});
calendar.render();
})
.catch(error => console.error('Error fetching events:', error));
// Show the mini calendar popup
calendarEl.classList.add('show');
});
bubble.addEventListener('mouseleave', function () {
var userId = bubble.getAttribute('data-userid');
var calendarEl = document.getElementById('mini-calendar-' + userId);
// Hide the mini calendar popup
calendarEl.classList.remove('show');
});
var profilejson = $("#profile-safe").text();
console.log('PROFILESAFE: ' + profilejson);
const profiles = JSON.parse($("#profile-safe").text());
console.log(profiles);
const heartbeatInterval2 = 1000;
async function updateStatus() {
for (let i = 0; i < profiles.length; i++) {
const userId = profiles[i].user.id;
try {
const response = await $.ajax({
url: '/status/' + userId,
method: 'GET',
});
if (response == true) {
document.getElementById('user-dot-' + userId).style.backgroundColor = 'rgb(72, 255, 0)';
} else {
document.getElementById('user-dot-' + userId).style.backgroundColor = 'rgb(255, 0, 0)';
}
} catch (error) {
console.error(error);
}
}
console.log('status updated');
}
// setInterval(updateStatus, 10000);
});
// Initialize department calendars
var calendarEls = document.querySelectorAll('.department-calendar');
calendarEls.forEach(function (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
selectable: true,
selectHelper: true,
editable: true,
select: function (info) {
alert('Selected ' + info.startStr + ' to ' + info.endStr);
}
});
calendar.render();
});
$(document).on("click", "#uploadDocsBtn", function () {
$("#uploadDocs").toggle();
});
$(document).on("click", "#tasksBtn", function () {
$("#tasksWall").toggle();
});
$(document).on("click", "#timecardBtn", function () {
$(".timecard-dropdown-content").toggle();
});
$(document).on("click", "#enterTimeBtn", function () {
$("#timecardWall").toggle();
});
$(document).on("click", "#previousTimecardsBtn", function () {
$("#prevTimecardsWall").toggle();
});
$(document).on("click", "#uploadButton", function () {
$("#uploadDocsForm").toggle();
});
$(document).on("click", "#allDocsButton", function () {
$("#allDocs").toggle();
});
$(document).on("click", ".keyDocsBtn", function () {
if ($(".keyDocs").css("display") != "none") {
$(".keyDocs").hide();
} else {
$(".keyDocs").css("display", "grid");
}
});
$(document).on("click", ".deptEmailBtn", function () {
$(".deptEmail").toggle();
});
$(document).on("click", ".deptTasksBtn", function () {
$(".deptTasks").toggle();
});
$(document).on("click", ".trainingVidBtn", function () {
$(this).find(".trainingVid").show();
});
$(document).on("click", ".introVidBtn", function () {
$(".introVid").toggle();
});
$(".info-box-close").click(function (event) {
console.log("Clicked element:", $(this));
console.log("Parent element:", $(this).parent());
event.preventDefault();
event.stopPropagation();
// const videos = document.querySelectorAll('video');
// if (videos.length) {
// videos.forEach(video => {
// video.pause(); // Stop the video
// video.src = ""; // Clear the source
// video.load(); // Unload any buffered data
// video.remove(); // Remove from DOM
// });
// }
$(this).parent().hide();
});
$(document).on("click", ".uploadTrainingVideoIcon", function () {
var deptId = $(this).attr('value');
console.log(deptId);
$('#uploadTrainingVideoForm' + deptId).show();
});
$(document).on("click", ".trainingVidCog", function () {
var $settingsDropdown = $(this).next('.settings-dropdown');
if ($settingsDropdown.length) {
$settingsDropdown.toggle();
} else {
console.error('Settings dropdown not found!');
}
});
$(document).on("change", "#trainingVidUsersSelect", function (event) {
event.preventDefault();
var selectedUsers = [];
$('#trainingVidUsersSelect option:selected').each(function () {
selectedUsers.push($(this).val());
});
console.log('Selected users:', selectedUsers);
$.ajax({
url: '/video-settings/' + $(this).attr('data-vid-id') + '/',
type: 'POST',
headers: {
'X-CSRFToken': $("input[name=csrfmiddlewaretoken]").val(),
},
data: JSON.stringify({ selected_users: selectedUsers }),
success: function (data) {
console.log(data);
}
});
});
$("#trainingVideoVisibleCheckbox").change(function () {
$.ajax({
url: '/video-settings/' + $(this).attr('data-vid-id') + '/',
type: 'POST',
headers: {
'X-CSRFToken': $("input[name=csrfmiddlewaretoken]").val(),
},
data: { visible: $(this).is(':checked') },
success: function (data) {
console.log(data);
}
});
});
$("#searchAnnouncements").on("keyup", function (event) {
event.preventDefault();
var searchQuery = $(this).val();
$.ajax({
url: '/search_announcements/',
type: 'GET',
data: { search_query: searchQuery },
success: function (data) {
console.log(data);
$("#announcementsResults").html("");
$.each(data.results, function (index, value) {
$("#announcementsResults").append(
'<div class="announcementResult">' +
'<form id="editAnnouncementForm" method="post" data-id="' + value.id + '">' +
'<input type="hidden" name="csrfmiddlewaretoken" value="' + $("input[name=csrfmiddlewaretoken]").val() + '">' +
'<p><strong>Title:</strong> <input type="text" name="title" value="' + value.title + '"></p>' +
'<p><strong>User:</strong> <input type="text" name="user" value="' + value.user + '"></p>' +
'<p><strong>Content:</strong> <textarea name="content">' + value.content + '</textarea></p>' +
'<p><strong>Date:</strong> <input type="text" name="date" value="' + value.date + '"></p>' +
'<button type="submit">Save Edit</button>' +
'</form>' +
'</div>'
);
});
}
});
$("#editAnnouncementForm").on("submit", "form", function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: /edit_announcement/ + form.attr('data-id') + '/',
type: form.attr('method'),
data: form.serialize(),
success: function (data) {
form.append('<p style="color: green;">Announcement edited successfully!</p>');
},
error: function (data) {
form.append('<p style="color: red;">Error editing announcement. Make sure all fields are in correct format.</p>');
}
});
});
});
var megaphoneIcon = $('#manage .fa-megaphone');
megaphoneIcon.on("click", function () {
$('#announcementsManage').show();
});
$('#manageBtn').on("click", function (event) {
console.log("Manage button clicked");
event.preventDefault();
$('#manage').show();
});
});
<div id="manage">
<i class="fas fa-megaphone"></i>
<div id="announcementsManage">
<h2>Manage announcements</h2>
<input type="text" id="searchAnnouncements" placeholder="Search announcements...">
<div id="announcementsResults">
</div>
</div>
</div>
<li>
<i id="manageBtn" style="cursor: pointer" class="fas fa-user-tie"></i>
</li>
I have tried to use event.preventDefault() in the function on click and expected the #manage element to show. It did not.
Problem: Clicking on the icon with id #manageBtn logs the message "Manage button clicked" in the console (so the click handler is triggered), but the #manage div does not become visible. I’ve tried using .show() as well as manually checking display: none in the dev tools, but nothing changes.
What I’ve tried: Confirmed that the event handler is firing (via console log).
Used both event.preventDefault() and event.stopPropagation() to rule out interference.
Checked for CSS rules that might override visibility.
Verified that the HTML elements are present in the DOM.
Ensured that there are no duplicate IDs.
Tried using .css('display', 'block') instead of .show() with no success.
Notes: The #manage element does exist in the DOM at page load.
jQuery is loaded and working correctly (other elements using .toggle() and .show() do work).
No JavaScript errors in the console.
I'm also using FullCalendar and some other dynamic JS UI features, but nothing that should conflict here (as far as I can tell).
I'm working on a complex web application with various dynamic elements controlled via jQuery. I'm trying to display a with the ID #manage when a user clicks an icon with ID #manageBtn. The click event is correctly firing (confirmed via a console.log()), but the targeted does not become visible on the page. Here's a breakdown of the issue with code, context, and everything I've tried.
✅ Expected Behavior: When a user clicks on the icon , the #manage div should appear.
❌ Actual Behavior: The event triggers and logs to the console, but the #manage element remains hidden and does not appear in the UI. I've inspected the DOM live using dev tools and confirmed that its visibility/display properties do not change.