loadFragment
Loads a region of another page into a box in this one — from a link that still works as a link.
Three boxes, filled from other pages of this collection. The trigger is always a plain link to a real page — the module fetches it, takes the named region out of the answer and puts it here; every other click, and every reader without the script, gets the page itself.
1 — Into a dialog
The link carries data-open-dialog and
data-fragment-target. Two modules read the same
anchor and neither knows about the other: dialog
opens the overlay, loadFragment fills its body with
the paragraphs it selects out of the dialog demo page. Without
JavaScript the same link simply opens that page.
2 — Several links, one panel
All five links fill the same box, so who owns it is kept with the
box and not with them: click two in quick succession and the
first request is aborted — only the newest answer is ever
written. A link whose content is already standing there does
nothing on a second click, unless it carries
data-fragment-refresh. The last two links point at
files that do not exist: the panel keeps its content, takes an
outline and says underneath it that nothing arrived — once in the
module's own words, once in the wording the link supplies with
data-fragment-error-text.
Nothing loaded yet — and this line stays right here while a request runs. It is dimmed, not removed: the load can fail, and then this is what you are left with.
3 — The fragment brings its own components
Both fragments carry data-js-behavior markup of their
own. Every load hands the box to the loader —
destroyModulesInScope() before the old content goes,
initModulesInScope() after the new one is in — so the
countdown ticks and the accordion opens, and swapping one for the
other tears the previous one down instead of leaving its timers
running. The busy state is held until that has finished, so the
unenhanced markup is never on screen.
Nothing loaded yet.
4 — A fragment that fills the box it sits in
The link below lifts the block underneath the panel out of
this page, so what lands in the panel is another
loadFragment trigger — enhanced by the loader on
arrival, and standing inside the box it fills.
Press that inner link and the element holding the focus is
replaced: without help the focus would drop to
<body> and the tab order would restart at the
top of the page, so the module puts it on the panel instead. That
is the one case where it moves the focus — and the reason this
panel carries role="region" and a name, so a reader
is told where they have landed.
Nothing loaded yet.
Below is the block that gets lifted. Pressing it here leaves the focus where it is; pressing the copy inside the panel is what makes the module step in.