submitFormAjax is different enough from postToast to be annoying

we'll just factor out the toast generation code for now and leave it for the future to deal with.
This commit is contained in:
justcool393 2023-07-23 10:33:03 -05:00
parent 033875b73a
commit 0565e8d6a9
2 changed files with 55 additions and 73 deletions

View file

@ -81,31 +81,8 @@ function expandDesktopImage(image) {
document.getElementById("desktop-expanded-image-wrap-link").href = image;
};
function postToast(targetElement, url, method, data, callbackFn) {
if (targetElement) { // disable element to avoid repeated requests
t.disabled = true;
t.classList.add("disabled");
}
const xhr = new XMLHttpRequest(); // set up the request now
xhr.open(method, url);
xhr.setRequestHeader("xhr", "xhr");
var form = new FormData();
form.append("formkey", formkey());
if (typeof data === 'object' && data !== null) {
for (let k of Object.keys(data)) {
form.append(k, data[k]);
}
}
xhr.onload = function() {
let data;
try {
data = JSON.parse(xhr.response);
} catch (e) {
console.error("Failed to parse response as JSON", e);
}
function showToastFromXhr(xhr, callbackFn) { // If callbackFn is specified, we'll try to use that first
var message = null;
if (callbackFn !== null) {
@ -119,6 +96,14 @@ function postToast(targetElement, url, method, data, callbackFn) {
}
}
let data;
try {
data = JSON.parse(xhr.response);
} catch (e) {
console.error("Failed to parse response as JSON", e);
if (message === null) return;
}
if (xhr.status >= 200 && xhr.status < 300 && data && data['message']) {
const toastPostSuccessTextElement = document.getElementById("toast-post-success-text");
if (message !== null) {
@ -146,6 +131,27 @@ function postToast(targetElement, url, method, data, callbackFn) {
}
}
function postToast(targetElement, url, method, data, callbackFn) {
if (targetElement) { // disable element to avoid repeated requests
t.disabled = true;
t.classList.add("disabled");
}
const xhr = new XMLHttpRequest(); // set up the request now
xhr.open(method, url);
xhr.setRequestHeader("xhr", "xhr");
var form = new FormData();
form.append("formkey", formkey());
if (typeof data === 'object' && data !== null) {
for (let k of Object.keys(data)) {
form.append(k, data[k]);
}
}
xhr.onload = function() {
showToastFromXhr(xhr, callbackFn);
}
setTimeout(() => {
t.disabled = false;
t.classList.remove("disabled");

View file

@ -75,6 +75,7 @@ function transferBux(mobile=false) {
}
function submitFormAjax(e) {
e.preventDefault();
document.getElementById('message').classList.add('d-none');
document.getElementById('message-mobile').classList.add('d-none');
document.getElementById('message-preview').classList.add('d-none');
@ -82,7 +83,7 @@ function submitFormAjax(e) {
const form = e.target;
const xhr = new XMLHttpRequest();
e.preventDefault();
// TODO: partially combine with postToast?
formData = new FormData(form);
@ -98,34 +99,9 @@ function submitFormAjax(e) {
xhr.setRequestHeader('xhr', 'xhr');
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
let data = JSON.parse(xhr.response);
try {
document.getElementById('toast-post-success-text').innerText = data["message"];
} catch(e) {
document.getElementById('toast-post-success-text').innerText = "Action successful!";
}
var myToast = bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-success'));
myToast.show();
return true
} else {
document.getElementById('toast-post-error-text').innerText = "Error, please try again later."
try {
let data=JSON.parse(xhr.response);
var myToast = bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-error'));
myToast.show();
if (data && data["error"]) document.getElementById('toast-post-error-text').innerText = data["error"];
if (data && data["details"]) document.getElementById('toast-post-error-text').innerText = data["details"];
} catch(e) {
var myToast = bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-success'));
myToast.hide();
var myToast = bootstrap.Toast.getOrCreateInstance(document.getElementById('toast-post-error'));
myToast.show();
}
}
showToastFromXhr(xhr, null);
};
xhr.send(formData);
return false
return false;
}