{"record":{"id":"3351fbaf849a1ec6","repo":"octobercms/october","slug":"invalid-element-for-attach-loader","errorCode":null,"errorMessage":"Invalid element for attach loader.","messagePattern":"Invalid element for attach loader\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"modules/system/assets/js/framework-bundle.js","lineNumber":3071,"sourceCode":"        document.head.insertBefore(this.stylesheetElement, document.head.firstChild);\n        _AttachLoader.stylesheetReady = true;\n      }\n    }\n    createStylesheetElement() {\n      const element = document.createElement(\"style\");\n      element.textContent = _AttachLoader.defaultCSS;\n      return element;\n    }\n  };\n  function isElementInput2(el) {\n    return [\"input\", \"select\", \"textarea\"].includes((el.tagName || \"\").toLowerCase());\n  }\n  function resolveElement(el) {\n    if (typeof el === \"string\") {\n      el = document.querySelector(el);\n    }\n    if (!el) {\n      throw new Error(\"Invalid element for attach loader.\");\n    }\n    return el;\n  }\n\n  // ../../vendor/larajax/larajax/resources/src/extras/flash-message.js\n  var FlashMessage = class _FlashMessage {\n    static instance = null;\n    static stylesheetReady = false;\n    constructor() {\n      this.queue = [];\n      this.lastUniqueId = 0;\n      this.displayedMessage = null;\n      this.stylesheetElement = this.createStylesheetElement();\n    }\n    static get defaultCSS() {\n      return unindent`\n        .jax-flash-message {\n            display: flex;","sourceCodeStart":3053,"sourceCodeEnd":3089,"githubUrl":"https://github.com/octobercms/october/blob/b608633a7e8922487d91a8161499020121c3b3bf/modules/system/assets/js/framework-bundle.js#L3053-L3089","documentation":"Thrown by resolveElement() in the AttachLoader extra of October CMS's larajax-based AJAX framework, reached via oc.attachLoader.show(el) / oc.attachLoader.hide(el). The helper accepts a DOM element or a CSS selector string; if a string is given it runs document.querySelector, and when the result is null (or the argument itself was null/undefined) it throws, because the loader cannot attach to a missing node.","triggerScenarios":"oc.attachLoader.show('#save-btn') when no element matches #save-btn; passing a variable that is null (element already removed from the DOM, e.g. hide() called after an AJAX update replaced the container); calling show() before DOMContentLoaded so the selector matches nothing yet.","commonSituations":"Typos in selector strings; the target button living inside a partial that a previous AJAX response replaced (stale reference); scripts in <head> running before the body exists; dynamic lists where the row was deleted while a request was in flight.","solutions":["Verify the selector matches exactly one existing node before calling: const el = document.querySelector(sel); if (el) oc.attachLoader.show(el)","Pass the element reference you already have instead of re-querying a selector that may be stale","Defer the call until the DOM is ready (oc.pageReady / DOMContentLoaded)","In hide() paths, tolerate a missing node rather than throwing (guard with if (el))"],"exampleFix":"// before\noc.attachLoader.show('#save-btn');\n\n// after\nconst btn = document.querySelector('#save-btn');\nif (btn) oc.attachLoader.show(btn);","handlingStrategy":"validation","validationCode":"function resolveLoaderTarget(ref) {\n  const el = typeof ref === 'string' ? document.querySelector(ref) : ref;\n  return el instanceof HTMLElement ? el : null;\n}\n\nconst el = resolveLoaderTarget('#save-btn');\nif (el) oc.attachLoader.show(el);","typeGuard":"const isHTMLElement = (v) => v instanceof HTMLElement || (v && v.nodeType === 1);","tryCatchPattern":"try { oc.attachLoader.show(ref); } catch (e) { if (/Invalid element for attach loader/.test(e.message)) { /* element gone: nothing to show on */ } else throw e; }","preventionTips":["Check the element exists before calling show()/hide()","Pass element references, not selectors, around AJAX updates that replace the DOM","Run loader calls after DOM ready (oc.pageReady)"],"tags":["dom","selector","ajax","attach-loader","frontend"],"backgroundTag":"dom-element-not-found","analyzedSha":"b608633a7e8922487d91a8161499020121c3b3bf","analyzedAt":"2026-08-21T04:24:57.515Z","schemaVersion":2},"datasetVersion":"2026-08-21T11:28:35.574Z"}