| attribute | \ndescription | \nexample | \n
|---|---|---|
\n fx-action\n | \n \n The URL to which an HTTP request will be issued, required\n | \n\n fx-action='/demo'\n | \n
fx-method | \nThe HTTP Method that will be used for the request (case-insensitive), defaults to GET | \nfx-method='DELETE' | \n
fx-target | \nA CSS selector specifying where to place the response HTML in the DOM, defaults to the current element | \nfx-target='#a-div' | \n
fx-swap | \nA string specifying how the content should be swapped into the DOM, can be one of innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, none, or any valid property on the element (e.g. `className` or `value`), defaults to outerHTML | \nfx-swap='innerHTML' | \n
fx-trigger | \nThe event that will trigger a request, defaults to submit for form elements, change for input-like elements & click for all other elements | \nfx-trigger='click' | \n
fx-ignore | \nAny element with this attribute on it or on an ancestor will not be processed for fx-* attributes | \n\n |
| category | \nevent | \ndescription | \n
|---|---|---|
| initialization | \n\nfx:init\n | \n\ntriggered on elements that have a fx-action attribute and are about to be initialized by fixi\n | \n
\nfx:inited\n | \n\ntriggered on elements have been initialized by fixi (does not bubble)\n | \n|
\nfx:process\n | \n\nfixi listens on the document object for this event and will process (that is, enable any fixi-powered \nelements) within that element.\n | \n|
| fetch | \n\nfx:config\n | \n\ntriggered on an element immediately when a request has been triggered, allowing users to configure the request\n | \n
\nfx:before\n | \n\ntriggered on an element just before a fetch() request is made\n | \n|
\nfx:after\n | \n\ntriggered on an element just after a fetch() request finishes normally but before content is swapped\n | \n|
\nfx:error\n | \n\ntriggered on an element if something is thrown from a fetch()\n | \n|
\nfx:finally\n | \n\ntriggered on an element after a request no matter what\n | \n|
\nfx:swapped\n | \n\ntriggered after the swap and any associated \nView Transition has completed\n | \n
| property | \ndescription | \n
|---|---|
\ndocument.__fixi_mo\n | \n\nThe MutationObserver that fixi uses to watch for new content to process new fixi-powered elements.\n | \n
\nelt.__fixi\n | \n\nThe event handler created by fixi on fixi-powered elements \n | \n
| key | effect |
|---|---|
swap | \n\nDefault value for cfg.swap when an element has no fx-swap attribute\n | \n
transition | \n\nReplaces the default document.startViewTransition binding. Set to false\nto disable view transitions entirely. Set to a function with the same shape as\nstartViewTransition to plug in a custom wrapper.\n | \n
headers | \n\nMerged into the default {\"FX-Request\": \"true\"} headers; user-supplied keys win on\ncollision.\n | \n
First update
\n\ndata:Second update
\n\n```\n\nssexi also supports named events, JSON-targeted events, `cfg.sseReconnect` for automatic\nreconnection with `Last-Event-ID`, and `cfg.ssePauseOnHidden` to pause when the tab is\nhidden. See the [ssexi README](https://github.com/bigskysoftware/ssexi) for details.\n\nIf you'd rather roll your own, fixi's `fx:config` event gives you all the hooks you need;\nthe [ssexi source](https://github.com/bigskysoftware/ssexi/blob/main/ssexi.js) is a short\nreference implementation.\n\n### Confirmation\n\nThis extension implements a simple `confirm()` based confirmation if the `ext-fx-confirm` attribute is found. Note that\nit does not use a Promise, just the regular old blocking `confirm()` function\n\n```js\n// fixi confirmation extension\ndocument.addEventListener(\"fx:config\", (evt)=>{\n var confirmationMessage = evt.target.getAttribute(\"ext-fx-confirm\")\n if (confirmationMessage){\n evt.detail.cfg.confirm = ()=>confirm(confirmationMessage)\n }\n})\n```\n```html\n\n```\n\n### Relative Selectors\n\nThis extension implements relative selectors for the `fx-target` attribute.\n\n```js\n// fixi relative selectors extension\ndocument.addEventListener('fx:config', (evt)=>{\n console.log(\"here\")\n var target = evt.target.getAttribute(\"fx-target\") || \"\"\n if (target.indexOf(\"closest \") == 0){\n evt.detail.cfg.target = evt.target.closest(target.substring(8))\n } else if (target.indexOf(\"find \") == 0){\n evt.detail.cfg.target = evt.target.querySelector(target.substring(5))\n } else if (target.indexOf(\"next \") == 0){\n var matches = Array.from(document.querySelectorAll(target.substring(5)))\n evt.detail.cfg.target = matches.find((elt) => evt.target.compareDocumentPosition(elt) === Node.DOCUMENT_POSITION_FOLLOWING)\n } else if (target.indexOf(\"previous \") == 0){\n var matches = Array.from(document.querySelectorAll(target.substring(9))).reverse()\n evt.detail.cfg.target = matches.find((elt) => evt.target.compareDocumentPosition(elt) === Node.DOCUMENT_POSITION_PRECEDING)\n }\n})\n```\n```html\n\n\n```\n\n### Intersection Events\n\nfixi does not trigger events when elements become visible like htmx does, but you can implement this behavior with the\nfollowing extension. It adds an [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\nfor every element with the `intersect` trigger and wires it in to trigger that event once the element intersects\nthe viewport. \n\n```js\n// fixi intersection events extension\ndocument.addEventListener(\"fx:init\", (evt) => {\n let trigger = evt.target.getAttribute(\"fx-trigger\")\n if(trigger === \"intersect\") {\n let obs = evt.target.__fixi_ob = new IntersectionObserver((entries)=>{\n for(const entry of entries) {\n if (entry.isIntersecting){\n // done observing, remove\n obs.unobserve(evt.target)\n evt.target.__fixi_ob = null;\n // trigger event\n evt.target.dispatchEvent(new CustomEvent(\"intersect\"))\n return;\n }\n }\n })\n obs.observe(evt.target)\n }\n})\n```\n\nWith this extension it is possible to implement the [infinite scroll](https://htmx.org/examples/infinite-scroll/)\nexample:\n\n```html\n