I have a social system which has an option to edit the statuses. it’s includes additional option like deleting images that belongs to that status. now, those status entries are generated by a PHP file called by AJAX, so i’m well aware of possibly scope issues.
The problem itself: nothing happens when trying to click on the edit button. it doesn’t give any console error, rather an indication that this button was clicked and indeed called the function.
There is the whole JavaScript/AJAX for it:
document.addEventListener('DOMContentLoaded', function() {
function setupCancelButton() {
document.getElementById('edit_cancel').addEventListener('click', function () {
document.getElementById('editWindow').style.display = 'none';
document.getElementById('edit_overlay').style.display = 'none';
});
}
function handleEditIconClick(statusContainer) {
console.log("Clicked status container:", statusContainer); // Debug: log the status container
// Find the .status_itself within the status container correctly
var statusContentElement = statusContainer.querySelector('.status_itself');
if (!statusContentElement) {
console.error('No .status_itself found within the status container:', statusContainer);
return; // Error handling if no status content element is found
}
var currentText = statusContentElement.textContent.trim(); // Get all text, trimming whitespace
if (!currentText) {
console.error('No text content found within status container:', statusContainer);
return; // Error handling if no text content is found
}
// Set the textarea value and show the editing interface
document.getElementById('status_edit_textarea').value = currentText;
document.getElementById('editWindow').style.display = 'block';
document.getElementById('edit_overlay').style.display = 'flex';
var statusId = statusContainer.getAttribute('data-status-id');
fetchAndDisplayImages(statusId);
}
function fetchAndDisplayImages(statusId) {
var xhrImages = new XMLHttpRequest();
xhrImages.open('POST', 'functions/fetch_status_images.php', true);
xhrImages.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrImages.onload = function() {
if (xhrImages.status === 200) {
var images = JSON.parse(xhrImages.responseText);
var imagesContainer = document.getElementById('status_images_container');
var imageDeletionPrompt = document.getElementById('image_deletion_prompt');
imagesContainer.innerHTML = '';
if (images.length > 0) {
imageDeletionPrompt.style.display = 'block';
images.forEach(function (image) {
var imgElement = document.createElement('img');
imgElement.src = 'images/upload/' + image;
imgElement.className = 'editable-status-image';
imgElement.style.margin = '5px';
imgElement.style.width = '100px';
imgElement.style.height = '100px';
imgElement.style.objectFit = 'cover';
imgElement.style.borderRadius = '15px';
imgElement.onclick = function () {
this.classList.toggle('selected');
};
imagesContainer.appendChild(imgElement);
});
} else {
imageDeletionPrompt.style.display = 'none';
}
}
};
xhrImages.send('status_id=' + encodeURIComponent(statusId));
}
function handleConfirmButtonClick(currentStatusElement) {
var statusId = currentStatusElement.getAttribute('data-status-id');
var newText = document.getElementById('status_edit_textarea').value;
var selectedImages = Array.from(document.querySelectorAll('.editable-status-image.selected')).map(img => img.src.split('/').pop());
var xhr = new XMLHttpRequest();
xhr.open('POST', 'functions/edit_status.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.status === 'success') {
currentStatusElement.nextElementSibling.querySelector('.status_text').textContent = newText;
document.querySelectorAll('.editable-status-image.selected').forEach(function(img) {
img.remove();
document.querySelectorAll('.status_img_layout img').forEach(function(mainImg) {
if (mainImg.src === img.src) {
mainImg.parentNode.remove();
}
});
});
document.getElementById('editWindow').style.display = 'none';
document.getElementById('edit_overlay').style.display = 'none';
} else {
alert('Failed to save changes: ' + response.message);
}
} else {
console.error('Error updating status:', xhr.status);
}
};
xhr.send('id=' + encodeURIComponent(statusId) + '&text=' + encodeURIComponent(newText) + '&deleteImages=' + JSON.stringify(selectedImages));
}
setupCancelButton();
});
Also, the stracture as follows (inside the other PHP file called by AJAX):
$sendback = "
<div id='statusesContainer2'>
<div class='profile_status_layout' id='profile_status_layout_{$stat_id}'>
<div class='status_top status' id='status_{$stat_id}' data-status-id='{$stat_id}'>
<div class='status_meta'>
<div class='status_avatar'>
<img alt='profile' src='images/upload/{$userAvatar}'>
</div>
<div class='status_author'>
<strong><a href='?go=profile&profileid={$yoohoo_id}'>{$yoohoo_name}</a></strong>
<span class='status_time'>{$statusDate}</span>
</div>
</div>
<div class='status_meta'>
";
if ($yoohoo_id == $yoohoo_oid) {
$sendback .= "<div class='st_edit_Icon' onClick='handleEditIconClick(this.closest('.status'))'></div>
<div id='stDelete' class='st_delete_Icon' onclick='confirmDelete(this)'></div>";
}
$sendback .= "
</div>
</div>
<div class='status_itself'>
<div class='status_content'>{$statusContent}</div>
<div class='status_img_layout'>
<!-- PICTURES HERE-->
</div>
</div>
<div class='status_actions'>
<div class='status_tooltip'>
<div class='status_tooltip_button'>
<div id='status_reactions_{$stat_id}' class='status_reactions'>
<a id='like_{$stat_id}' href='#'><div class='like_icon'></div></a>
<a id='dislike_{$stat_id}' href='#'><div class='like_dislike'></div></a>
<a id='love_{$stat_id}' href='#'><div class='like_love'></div></a>
</div>
</div>
</div>
<div class='reactions_area'>
<div class='reacters_overlay' data-status-id='{$stat_id}' style='display:none;'></div>
<div class='reacters_windowOn' data-status-id='{$stat_id}' style='display:none;'>
<div class='reacters_closeButton' data-status-id='{$stat_id}'>CLOSE</div>
<ul><!-- NAMELIST HERE--></ul>
</div>
<div class='show_icon'></div> <a class='reactLink' href='#' data-status-id='{$stat_id}'>{$like_react_count}</a>
<div class='show_dislike'></div> <a id='disreactLink_{$stat_id}' href='#'>{$dislike_react_count}</a>
<div class='show_love'></div> <a id='loveLink_{$stat_id}' href='#'>{$love_react_count}</a>
</div>
</div>
</div>
</div>";
return $sendback;
}
I tried to debug on multiple levels, and as I said the event listens to that click, it happens. I also checked using ChatGPT-4 which could not find the cause for the issue.
Help will be appricated.