when i register a click event for a certain button (in Javascript) i want to do three ajax calls one after another.They modify server database correctly, but changes are not shown well in the page. I noticed that if I try click the button with inspector opened in debugging from chrome, page shows changes correctly. I think that it might be a conflict problem of the callback functions of ajax calls, but i don't know how to handle it.
Here is the code of the handling click event
document.getElementById("addCategory").addEventListener('click', (e) => {
tree.autoclick();
var form = document.getElementById("addcategoryform")
if (form.checkValidity()) {
makeCall("POST", 'AddCategory', e.target.closest("form"),
function (x) {
if (x.readyState == XMLHttpRequest.DONE) {
var message = x.responseText;
switch (x.status) {
case 200:
document.getElementById("erroradd").textContent = message;
document.getElementById("erroradd").style.color = "green";
break;
case 400: // bad request
document.getElementById("erroradd").textContent = message;
document.getElementById("erroradd").style.color = "red";
break;
case 401: // unauthorized
document.getElementById("erroradd").textContent = message;
document.getElementById("erroradd").style.color = "red";
break;
case 500: // server error
document.getElementById("erroradd").textContent = message;
document.getElementById("erroradd").style.color = "red";
break;
}
}
}
);
}
tree.show();
}
)For first tree.autoclick simulates a click event of another button:
this.autoclick = function(){
var e = new Event("click");
this.saveButton.dispatchEvent(e);
}which do an ajax POST call, for saving on the server modifies done client side with the tree:
saveButton.addEventListener('click', (e) => {
makeCallParam("POST", 'saveModifies', from, to,
function (x) {
if (x.readyState === XMLHttpRequest.DONE) {
let json = x.responseText;
switch (x.status) {
case 200:
document.getElementById("message").textContent = json;
document.getElementById("message").style.color = "green";
break;
case 400: // bad request
document.getElementById("message").textContent = json;
document.getElementById("message").style.color = "red";
break;
case 401: // unauthorized
document.getElementById("messaggio").textContent = json;
document.getElementById("messaggio").style.color = "red";
break;
case 500: // server error
document.getElementById("messaggio").textContent = json;
document.getElementById("messaggio").style.color = "red";
break;
}
}
}
);
})after autoclick function, i do the ajax call for the originally click event(addCategory) that modifies also the tree on the server
For last, i call the tree function show() that request the tree modified with new categories with a GET ajax call and calls a function update() to print them on the html. The show() function doesn't work only when i do this action, in other cases shows correctly the tree as is it is in the server
show = function() {
var self = this;
makeCall("GET", "requestCategories", null,
function(req) {
if (req.readyState == 4) {
var message = req.responseText;
if (req.status == 200) {
categoriesToShow = JSON.parse(req.responseText);
if (categoriesToShow.length == 0) {
self.alert.textContent = "No categories yet!";
return;
}
self.update(mostraCategorie, document.getElementById("list")); // function that prints list of categories in "list"
} else if (req.status == 403) {
window.location.href = req.getResponseHeader("Location");
window.sessionStorage.removeItem('username');
}
else {
self.alert.textContent = message;
}}
}
);
};