I have an issue with my code, and ChatGPT and Microsoft Copilot don’t fix my issue. Even I have sent all the codes and screenshots.
Here is my HTML code.
<!-- MESSENGER -->
<div class="messenger">
<!-- LEFT -->
<div class="left-block">
<div class="search-box">
<div class="input-with-icon">
<div class="search-input-dark">
<input
class="form-control"
placeholder="Search..."
/>
<i class="bi-search"></i>
</div>
</div>
</div>
<hr />
<div class="chat-boxes">
<div class="chat-box" id="chat-box-1">
<img
class="avatar-56"
src="img/avatar-model.png"
alt=""
/>
<div class="chat-content">
<div class="chat-top">
<div class="name">
<h6 class="fw-medium">Penny Sinnap</h6>
</div>
<div class="time-and-dots">
<p class="time">30 sec.ago</p>
<div
class="icon-wrapper three-dots"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="bi-three-dots"></i>
</div>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a
id="blockOption"
class="dropdown-item"
href="#"
data-bs-toggle="modal"
data-bs-target="#blockModal"
data-chat-box-id="chat-box-1"
>Block User</a
>
</li>
<li>
<a
class="dropdown-item delete-chat-trigger"
href="#"
data-bs-toggle="modal"
data-bs-target="#deleteModal"
data-chat-box-id="chat-box-2"
>Delete Chat</a
>
</li>
</ul>
<!-- 3 DOTS MODALS -->
<!-- 3 DOTS MODALS -->
<!-- 3 DOTS TOASTERS -->
<!-- Block Toast -->
<div
class="toast-container position-fixed bottom-0 end-0 p-3"
>
<div
id="blockToast"
class="toast align-items-center"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="d-flex">
<div class="toast-body">
You have successfully
blocked
<strong
>Penny Sinnap</strong
>
</div>
<button
type="button"
class="btn-close me-2 m-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
</div>
</div>
<!-- Block Toast -->
<!-- Delete Toast -->
<div
class="toast-container position-fixed bottom-0 end-0 p-3"
>
<div
id="deleteToast"
class="toast align-items-center"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="d-flex">
<div class="toast-body">
Your chat successfully
deleted.
</div>
<button
type="button"
class="btn-close me-2 m-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
</div>
</div>
<!-- Delete Toast -->
<!-- 3 DOTS TOASTERS -->
</div>
</div>
<p>
Id ipsum in cras volutpat nam sollicitudin diam
vitae. Habitant sit sodales placerat. Id ipsum
in cras volutpat nam sollicitudin diam vitae.
Habitant sit sodales placerat.Id ipsum in cras
volutpat nam sollicitudin diam vitae. Habitant
sit sodales placerat. Id ipsum in cras volutpat
nam sollicitudin diam vitae. Habitant sit
sodales placerat.
</p>
</div>
<div class="block-overlay hidden" id="block-overlay-1">
<div class="block-message">
You have blocked <strong>Penny Sinnap.</strong>
</div>
<div
class="icon-wrapper three-dots"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="bi-three-dots"></i>
</div>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a
id="blockOption"
class="dropdown-item"
href="#"
data-bs-toggle="modal"
data-bs-target="#blockModal"
>Unblock User</a
>
</li>
<li>
<a
id="deleteButton"
class="dropdown-item"
href="#"
data-bs-toggle="modal"
data-bs-target="#deleteModal"
>Delete Chat</a
>
</li>
</ul>
</div>
</div>
<hr />
(And other checboxes...)
[enter image description here](https://i.sstatic.net/yhSYY80w.png)
<!-- Block/Unblock Modal -->
<div
class="modal fade warning-modals"
id="blockModal"
tabindex="-1"
aria-labelledby="blockModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5
class="modal-title fs-5 fw-medium"
id="blockModalLabel"
>
Block User
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
Are you sure you want to block
<strong class="chat-user-name"
>Penny Sinnap</strong
>?
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-link close-button"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
id="blockToastBtn"
type="button"
class="btn btn-primary"
>
Block
</button>
</div>
</div>
</div>
</div>
<hr />
</div>
<hr />
</div>
<!-- LEFT -->
</div>
<!-- MESSENGER -->
And here is my javascript code:
$(document).ready(function () {
var chatBoxToBlock;
// Capture the chat-box ID when the block-user link is clicked
$('.dropdown-item[data-bs-target="#blockModal"]').on('click', function () {
const chatBoxId = $(this).closest('.chat-box').attr('id');
chatBoxToBlock = chatBoxId;
updateBlockModalContent(chatBoxToBlock);
});
$('#blockToastBtn').click(function () {
toggleBlock(chatBoxToBlock);
$('#blockModal').modal('hide');
});
$('#blockModal').on('hidden.bs.modal', function () {
chatBoxToBlock = null;
});
function updateBlockModalContent(chatBoxId) {
var chatUser = $('#' + chatBoxId)
.find('.name h6')
.text();
var isBlocked =
$('#' + chatBoxId)
.find('.dropdown-item[data-bs-target="#blockModal"]')
.text()
.trim() === 'Unblock User';
var modalLabel = isBlocked ? 'Unblock User' : 'Block User';
var actionText = isBlocked ? 'unblock' : 'block';
var buttonText = isBlocked ? 'Unblock' : 'Block';
// Update modal content based on block/unblock state
$('#blockModalLabel').text(modalLabel);
$('#blockModal .modal-body').html(
'<p>Are you sure you want to ' +
actionText +
' <strong>' +
chatUser +
'</strong>?</p>'
);
$('#blockToastBtn').text(buttonText);
}
function toggleBlock(chatBoxId) {
var isBlocking = $('#blockToastBtn').text().trim() === 'Block';
// Toggle the overlay visibility for blocking/unblocking
var overlay = $('#' + chatBoxId).find('.block-overlay');
if (isBlocking) {
overlay.removeClass('hidden').addClass('visible');
} else {
overlay.removeClass('visible').addClass('hidden');
}
// Update button and dropdown item text for Block/Unblock
$('#' + chatBoxId)
.find('.dropdown-item[data-bs-target="#blockModal"]')
.text(isBlocking ? 'Unblock User' : 'Block User');
// Show toast message
showToast(
isBlocking ? 'You have blocked ' : 'You have unblocked ',
chatBoxId
);
}
function showToast(message, chatBoxId) {
var chatUser = $('#' + chatBoxId)
.find('.name h6')
.text();
$('#blockToast .toast-body').text(message + chatUser + '.');
var toast = new bootstrap.Toast($('#blockToast'));
toast.show();
}
});
Everything works till you block the user. But when I click “Unblock”, I want to update these three labels:
1- “Block user” title should be “Unblock user”
2- “Are you sure you want to block Penny Sinnap?” should be “Are you sure you want to unblock Penny Sinnap?”
3- “Block” button should be “Unblock”
And I have added a screenshot for my issue.
Plus, I also want to be sure that after “Unblock” user, the overlay should disappear.
This is my first question on Stackover Flow. I hope I could have shared my issue in the correct way; if I couldn’t, my apologies. :/
