Better error handling for item page preview HTTP error
If something goes wrong, like the site goes down or has an intermittent error, try a full pageload. That way, we're both retrying, and in a way that gives the user more control and visibility into what's going on, and what they can potentially do about it. (e.g. if there's a useful error message, they will see it!)
This commit is contained in:
parent
09572b5c05
commit
27774d908f
1 changed files with 14 additions and 4 deletions
|
@ -4,9 +4,11 @@ document.addEventListener("change", (e) => {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const mainPickerForm = document.querySelector(
|
const mainPickerForm = document.querySelector(
|
||||||
"#item-preview species-color-picker form");
|
"#item-preview species-color-picker form",
|
||||||
const mainSpeciesField =
|
);
|
||||||
mainPickerForm.querySelector("[name='preview[species_id]']");
|
const mainSpeciesField = mainPickerForm.querySelector(
|
||||||
|
"[name='preview[species_id]']",
|
||||||
|
);
|
||||||
mainSpeciesField.value = e.target.value;
|
mainSpeciesField.value = e.target.value;
|
||||||
mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
|
mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
@ -14,6 +16,14 @@ document.addEventListener("change", (e) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// If the preview frame fails to load, try a full pageload.
|
||||||
|
document.addEventListener("turbo:frame-missing", (e) => {
|
||||||
|
if (!e.target.matches("#item-preview")) return;
|
||||||
|
|
||||||
|
e.detail.visit(e.detail.response.url);
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
class SpeciesColorPicker extends HTMLElement {
|
class SpeciesColorPicker extends HTMLElement {
|
||||||
#internals;
|
#internals;
|
||||||
|
|
||||||
|
@ -44,7 +54,7 @@ class SpeciesFacePicker extends HTMLElement {
|
||||||
|
|
||||||
#handleClick(e) {
|
#handleClick(e) {
|
||||||
if (e.target.matches("input[type=radio]")) {
|
if (e.target.matches("input[type=radio]")) {
|
||||||
this.dispatchEvent(new Event("change", {bubbles: true}));
|
this.dispatchEvent(new Event("change", { bubbles: true }));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue