CODEWITHSUNDEEP
javascripthtmlcss
kahveciderin
kahveciderin

Reputation: 332

Opacity does not return to 1 when I set visibility: visible

I am currently creating a website. I created an edit button for posts and when the save button for that edit is pressed, i do an AJAX request to a page which updates the database accordingly. While this works pretty well, i thought a loading icon would be very nice. So i created this loading icon:

echo "<div id=\"loading-cover\" class=\"loadback\"><img style=\"position: relative; top: 25%; display: block; margin: auto auto;\" src=\"/loading.gif\"></div>";

The visibility property is set to hidden from the style.css

I set it back to visible whenever I am about to send an AJAX request. Here is my code for saving the edits:

function saveEdit(postid){
var loading = document.getElementById("loading-cover");
loading.style.visibility = "visible";
var x = document.getElementById("desc-" + postid );
x.setAttribute("contenteditable", false);
x.classList.remove("active-editpart");
document.getElementById("editbtn-"+postid).classList.add("savebtn-active");
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE) {
loading.style.opacity = "0";

loading.style.visibility = "hidden";
}};
//xhr.open('GET', '/editpost.php?postid='+postid+'&editeddata='+x.innerHTML);
xhr.open('GET', '/editpost.php?postid='+postid+'&editeddata='+x.innerText);
xhr.send();
x.innerHTML = x.innerText;
document.getElementById("desc-raw-" + postid ).innerHTML = x.innerText;
}

When I am on the page and edit a post, this works perfectly. A loading icon pops up and goes away. But, if I try to edit another post, it sends the AJAX request but the loading icon does not show up.

Upvotes: 0

Views: 86

Answers (1)

Tyr
Tyr

Reputation: 2810

You have to set the opacity of the loading icon back to 1 on function start.

loading.style.visibility = "visible"; loading.style.opacity = 1;

Upvotes: 1

Related Questions