I have the following helper function:
async function post(url, fData) {
const response = await fetch(url, {
method: "POST",
credentials: "include",
body: fData
});
return response.text();
}
When using the following functions, refreshRecrods1 (.then variant) works as expected (sorts the table), while refreshRecords2 (async/await variant) does not sort it. title.click(); calls an event listener to sort the table (the response) based on that column. When refreshRecords2 is called through devtools manually, it works for some reason.
function refreshRecords1() {
const fData = new FormData;
fData.set("domain", domain.value);
post("php/list_records.php", fData).then(response => {
document.querySelector(".records").innerHTML = response;
const title = document.querySelector(".titles").firstElementChild;
title.querySelector(".sortArrow").innerHTML = "▲";
title.click();
})
}
async function refreshRecords2() {
const fData = new FormData;
fData.set("domain", domain.value);
document.querySelector(".records").innerHTML = await post("php/list_records.php", fData);
const title = document.querySelector(".titles").firstElementChild;
title.querySelector(".sortArrow").innerHTML = "▲";
title.click();
}
The code is used in this context:
async function refreshAll() {
// reset editor inputs
for (const option of document.getElementsByTagName("option")) {
option.selected = option.defaultSelected
}
await postSet("php/dns_domains.php", domain);
await refreshRecords();
addEvents(events);
}
refreshAll();
Original code was async/await, which I can’t see why doesn’t work.