-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdjango-html.htmx-data.json
358 lines (358 loc) · 67.7 KB
/
django-html.htmx-data.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
{
"attributes": {
"hx-boost": {
"description": "The `hx-boost` attribute allows you to \"boost\" normal anchors and form tags to use AJAX instead. This\nhas the [nice fallback](https://en.wikipedia.org/wiki/Progressive_enhancement) that, if the user does not \nhave javascript enabled, the site will continue to work.\n\nFor anchor tags, clicking on the anchor will issue a `GET` request to the url specified in the `href` and\nwill push the url so that a history entry is created. The target is the `<body>` tag, and the `innerHTML`\nswap strategy is used by default. All of these can be modified by using the appropriate attributes, except\nthe `click` trigger.\n\nFor forms the request will be converted into a `GET` or `POST`, based on the method in the `method` attribute\nand will be triggered by a `submit`. Again, the target will be the `body` of the page, and the `innerHTML`\nswap will be used. The url will _not_ be pushed, however, and no history entry will be created. (You can use the \n[hx-push-url](@/attributes/hx-push-url.md) attribute if you want the url to be pushed.)\n\nHere is an example of some boosted links:\n\n```html\n<div hx-boost=\"true\">\n <a href=\"/page1\">Go To Page 1</a>\n <a href=\"/page2\">Go To Page 2</a>\n</div>\n```\nThese links will issue an ajax `GET` request to the respective URLs and replace the body's inner content with it.\n\nHere is an example of a boosted form:\n\n```html\n<form hx-boost=\"true\" action=\"/example\" method=\"post\">\n <input name=\"email\" type=\"email\" placeholder=\"Enter email...\">\n <button>Submit</button>\n</form>\n```\nThis form will issue an ajax `POST` to the given URL and replace the body's inner content with it.\n\n\n## Notes\n\n* `hx-boost` is inherited and can be placed on a parent element\n* Only links that are to the same domain and that are not local anchors will be boosted\n* All requests are done via AJAX, so keep that in mind when doing things like redirects\n* To find out if the request results from a boosted anchor or form, look for [`HX-Boosted`](@/reference.md#request_headers) in the request header\n* Selectively disable boost on child elements with `hx-boost=\"false\"`\n* Disable the replacement of elements via boost, and their children, with [`hx-preserve=\"true\"`](@/attributes/hx-preserve.md)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-boost/"
}
]
},
"hx-confirm": {
"description": "The `hx-confirm` attribute allows you to confirm an action before issuing a request. This can be useful\nin cases where the action is destructive and you want to ensure that the user really wants to do it.\n\nHere is an example:\n\n```html\n<button hx-delete=\"/account\" hx-confirm=\"Are you sure you wish to delete your account?\">\n Delete My Account\n</button>\n```\n\n## Event details\n\nThe event triggered by `hx-confirm` contains additional properties in its `detail`:\n\n* triggeringEvent: the event that triggered the original request\n* issueRequest(skipConfirmation=false): a callback which can be used to confirm the AJAX request\n* question: the value of the `hx-confirm` attribute on the HTML element\n\n## Notes\n\n* `hx-confirm` is inherited and can be placed on a parent element\n* `hx-confirm` uses the browser's `window.confirm` by default. You can customize this behavior as shown [in this example](@/examples/confirm.md).\n* a boolean `skipConfirmation` can be passed to the `issueRequest` callback; if true (defaults to false), the `window.confirm` will not be called and the AJAX request is issued directly",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-confirm/"
}
]
},
"hx-delete": {
"description": "The `hx-delete` attribute will cause an element to issue a `DELETE` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n<button hx-delete=\"/account\" hx-target=\"body\">\n Delete Your Account\n</button>\n```\n\nThis example will cause the `button` to issue a `DELETE` to `/account` and swap the returned HTML into\n the `innerHTML` of the `body`.\n\n## Notes\n\n* `hx-delete` is not inherited\n* You can control the target of the swap using the [hx-target](@/attributes/hx-target.md) attribute\n* You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute\n* You can control what event triggers the request with the [hx-trigger](@/attributes/hx-trigger.md) attribute\n* You can control the data submitted with the request in various ways, documented here: [Parameters](@/docs.md#parameters)\n* To remove the element following a successful `DELETE`, return a `200` status code with an empty body; if the server responds with a `204`, no swap takes place, documented here: [Requests & Responses](@/docs.md#requests)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-delete/"
}
]
},
"hx-disable":{
"description": "The `hx-disable` attribute will disable htmx processing for a given element and all its children. This can be \nuseful as a backup for HTML escaping, when you include user generated content in your site, and you want to \nprevent malicious scripting attacks.\n\nThe value of the tag is ignored, and it cannot be reversed by any content beneath it.\n \n## Notes\n\n* `hx-disable` is inherited",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-disable/"
}
]
},
"hx-disabled-elt":{
"description": "The `hx-disabled-elt` attribute allows you to specify elements that will have the `disabled` attribute\nadded to them for the duration of the request. The value of this attribute can be:\n\n* A CSS query selector of the element to disable.\n* `this` to disable the element itself\n* `closest <CSS selector>` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)\n ancestor element or itself, that matches the given CSS selector\n (e.g. `closest fieldset` will disable the closest to the element `fieldset`).\n* `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector\n* `next` which resolves to [element.nextElementSibling](https://developer.mozilla.org/docs/Web/API/Element/nextElementSibling)\n* `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector\n (e.g. `next button` will disable the closest following sibling `button` element)\n* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)\n* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous input` will disable the closest previous sibling `input` element)\n\nHere is an example with a button that will disable itself during a request:\n\n```html\n<button hx-post=\"/example\" hx-disabled-elt=\"this\">\n Post It!\n</button>\n```\n\nWhen a request is in flight, this will cause the button to be marked with [the `disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled), \nwhich will prevent further clicks from occurring. \n\nThe `hx-disabled-elt` attribute also supports specifying multiple CSS selectors separated by commas to disable multiple elements during the request. Here is an example that disables buttons and text input fields of a particular form during the request:\n\n```html\n<form hx-post=\"/example\" hx-disabled-elt=\"find input[type='text'], find button\">\n <input type=\"text\" placeholder=\"Type here...\">\n <button type=\"submit\">Send</button>\n</form>\n```\n\n## Notes\n\n* `hx-disabled-elt` is inherited and can be placed on a parent element\n\n[hx-trigger]: https://htmx.org/attributes/hx-trigger/",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-disabled-elt/"
}
]
},
"hx-disinherit":{
"description": "The default behavior for htmx is to \"inherit\" many attributes automatically: that is, an attribute such as\n[hx-target](@/attributes/hx-target.md) may be placed on a parent element, and all child elements will inherit\nthat target.\n\nThe `hx-disinherit` attribute allows you to control this automatic attribute inheritance. An example scenario is to \nallow you to place an `hx-boost` on the `body` element of a page, but overriding that behavior in a specific part\nof the page to allow for more specific behaviors.\n\nhtmx evaluates attribute inheritance as follows:\n\n* when `hx-disinherit` is set on a parent node\n * `hx-disinherit=\"*\"` all attribute inheritance for this element will be disabled\n * `hx-disinherit=\"hx-select hx-get hx-target\"` disable inheritance for only one or multiple specified attributes\n\n```html\n<div hx-boost=\"true\" hx-select=\"#content\" hx-target=\"#content\" hx-disinherit=\"*\">\n <a href=\"/page1\">Go To Page 1</a> <!-- boosted with the attribute settings above -->\n <a href=\"/page2\" hx-boost=\"unset\">Go To Page 1</a> <!-- not boosted -->\n <button hx-get=\"/test\" hx-target=\"this\"></button> <!-- hx-select is not inherited -->\n</div>\n```\n\n```html\n<div hx-boost=\"true\" hx-select=\"#content\" hx-target=\"#content\" hx-disinherit=\"hx-target\">\n <!-- hx-select is automatically set to parent's value; hx-target is not inherited -->\n <button hx-get=\"/test\"></button>\n</div>\n```\n\n```html\n<div hx-select=\"#content\">\n <div hx-boost=\"true\" hx-target=\"#content\" hx-disinherit=\"hx-select\">\n <!-- hx-target is automatically inherited from parent's value -->\n <!-- hx-select is not inherited, because the direct parent does\n disables inheritance, despite not specifying hx-select itself -->\n <button hx-get=\"/test\"></button>\n </div>\n</div>\n```\n\n## Notes\n\n* Read more about [Attribute Inheritance](@/docs.md#inheritance)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-disinherit/"
}
]
},
"hx-encoding":{
"description": "The `hx-encoding` attribute allows you to switch the request encoding from the usual `application/x-www-form-urlencoded`\nencoding to `multipart/form-data`, usually to support file uploads in an ajax request.\n\nThe value of this attribute should be `multipart/form-data`.\n\nThe `hx-encoding` tag may be placed on parent elements.\n\n## Notes\n\n* `hx-encoding` is inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-encoding/"
}
]
},
"hx-ext":{
"description": "The `hx-ext` attribute enables an htmx [extension](https://extensions.htmx.org) for an element and all its children.\n\nThe value can be a single extension name or a comma separated list of extensions to apply.\n\nThe `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the DOM,\nand on the `body` tag for it to apply to all htmx requests.\n\n## Notes\n\n* `hx-ext` is both inherited and merged with parent elements, so you can specify extensions on any element in the DOM \nhierarchy and it will apply to all child elements. \n\n* You can ignore an extension that is defined by a parent node using `hx-ext=\"ignore:extensionName\"` \n\n\n```html\n<div hx-ext=\"example\">\n \"Example\" extension is used in this part of the tree...\n <div hx-ext=\"ignore:example\">\n ... but it will not be used in this part.\n </div>\n</div>\n```",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-ext/"
}
]
},
"hx-get":{
"description": "The `hx-get` attribute will cause an element to issue a `GET` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n <div hx-get=\"/example\">Get Some HTML</div>\n```\n\nThis example will cause the `div` to issue a `GET` to `/example` and swap the returned HTML into\n the `innerHTML` of the `div`.\n\n### Notes\n\n* `hx-get` is not inherited\n* By default `hx-get` does not include any parameters. You can use the [hx-params](@/attributes/hx-params.md)\n attribute to change this\n* You can control the target of the swap using the [hx-target](@/attributes/hx-target.md) attribute\n* You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute\n* You can control what event triggers the request with the [hx-trigger](@/attributes/hx-trigger.md) attribute\n* You can control the data submitted with the request in various ways, documented here: [Parameters](@/docs.md#parameters)\n* An empty `hx-get:\"\"` will make a get request to the current url and will swap the current HTML page",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-get/"
}
]
},
"hx-headers":{
"description": "The `hx-headers` attribute allows you to add to the headers that will be submitted with an AJAX request. \n\nBy default, the value of this attribute is a list of name-expression values in [JSON (JavaScript Object Notation)](https://www.json.org/json-en.html) \nformat.\n\nIf you wish for `hx-headers` to *evaluate* the values given, you can prefix the values with `javascript:` or `js:`.\n\n```html\n <div hx-get=\"/example\" hx-headers='{\"myHeader\": \"My Value\"}'>Get Some HTML, Including A Custom Header in the Request</div>\n```\n\n## Security Considerations\n\n* By default, the value of `hx-headers` must be valid [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON). \n It is **not** dynamically computed. If you use the `javascript:` prefix, be aware that you are introducing\n security considerations, especially when dealing with user input such as query strings or user-generated content, \n which could introduce a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability. \n\n## Notes\n\n* `hx-headers` is inherited and can be placed on a parent element.\n* A child declaration of a header overrides a parent declaration.",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-headers/"
}
]
},
"hx-history-elt":{
"description": "The `hx-history-elt` attribute allows you to specify the element that will be used to snapshot and\nrestore page state during navigation. By default, the `body` tag is used. This is typically\ngood enough for most setups, but you may want to narrow it down to a child element. Just make\nsure that the element is always visible in your application, or htmx will not be able to restore\nhistory navigation properly.\n\n\nHere is an example:\n\n```html\n<html>\n<body>\n<div id=\"content\" hx-history-elt>\n ...\n</div>\n</body>\n</html>\n```\n\n## Notes\n\n* `hx-history-elt` is not inherited\n* In most cases we don't recommend narrowing the history snapshot",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-history-elt/"
}
]
},
"hx-history":{
"description": "Set the `hx-history` attribute to `false` on any element in the current document, or any html fragment loaded into the current document by htmx, to prevent sensitive data being saved to the localStorage cache when htmx takes a snapshot of the page state. \n\nHistory navigation will work as expected, but on restoration the URL will be requested from the server instead of the history cache.\n\nHere is an example:\n\n```html\n<html>\n<body>\n<div hx-history=\"false\">\n ...\n</div>\n</body>\n</html>\n```\n\n## Notes\n\n* `hx-history=\"false\"` can be present *anywhere* in the document to embargo the current page state from the history cache (i.e. even outside the element specified for the history snapshot [hx-history-elt](@/attributes/hx-history-elt.md)).",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-history/"
}
]
},
"hx-include":{
"description": "The `hx-include` attribute allows you to include additional element values in an AJAX request. The value of this\nattribute can be:\n\n* A CSS query selector of the elements to include.\n* `this` which will include the descendants of the element.\n* `closest <CSS selector>` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)\n ancestor element or itself, that matches the given CSS selector\n (e.g. `closest tr` will target the closest table row to the element).\n* `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector.\n* `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector.\n (e.g. `next .error` will target the closest following sibling element with `error` class)\n* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous .error` will target the closest previous sibling with `error` class)\n\nHere is an example that includes a separate input value:\n\n```html\n<div>\n <button hx-post=\"/register\" hx-include=\"[name='email']\">\n Register!\n </button>\n Enter email: <input name=\"email\" type=\"email\"/>\n</div>\n```\n\nThis is a little contrived as you would typically enclose both of these elements in a `form` and submit\nthe value automatically, but it demonstrates the concept.\n\nNote that if you include a non-input element, all input elements enclosed in that element will be included.\n\n## Notes\n\n* `hx-include` is inherited and can be placed on a parent element\n* While `hx-include` is inherited, it is evaluated from the element triggering the request. It is easy to get confused\n when working with the extended selectors such as `find` and `closest`.\n ```html\n <div hx-include=\"find input\">\n <button hx-post=\"/register\">\n Register!\n </button>\n Enter email: <input name=\"email\" type=\"email\"/>\n </div>\n ```\n In the above example, when clicking on the button, the `find input` selector is resolved from the button itself, which\n does not return any element here, since the button doesn't have any `input` child, thus in this case, raises an error.\n* A standard CSS selector resolves\n to [document.querySelectorAll](https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll) and will include\n multiple elements, while the extended selectors such as `find` or `next` only return a single element at most to\n include",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-include/"
}
]
},
"hx-indicator":{
"description": "The `hx-indicator` attribute allows you to specify the element that will have the `htmx-request` class\nadded to it for the duration of the request. This can be used to show spinners or progress indicators\nwhile the request is in flight.\n\nThe value of this attribute is a CSS query selector of the element or elements to apply the class to,\nor the keyword [`closest`](https://developer.mozilla.org/docs/Web/API/Element/closest), followed by a CSS selector, \nwhich will find the closest ancestor element or itself, that matches the given CSS selector (e.g. `closest tr`);\n\nHere is an example with a spinner adjacent to the button:\n\n```html\n<div>\n <button hx-post=\"/example\" hx-indicator=\"#spinner\">\n Post It!\n </button>\n <img id=\"spinner\" class=\"htmx-indicator\" src=\"/img/bars.svg\"/>\n</div>\n```\n\nWhen a request is in flight, this will cause the `htmx-request` class to be added to the `#spinner`\nimage. The image also has the `htmx-indicator` class on it, which defines an opacity transition\nthat will show the spinner:\n\n```css\n .htmx-indicator{\n opacity:0;\n transition: opacity 500ms ease-in;\n }\n .htmx-request .htmx-indicator{\n opacity:1\n }\n .htmx-request.htmx-indicator{\n opacity:1\n }\n```\n\nIf you would prefer a different effect for showing the spinner you could define and use your own indicator\nCSS. Here is an example that uses `display` rather than opacity (Note that we use `my-indicator` instead of `htmx-indicator`):\n\n```css\n .my-indicator{\n display:none;\n }\n .htmx-request .my-indicator{\n display:inline;\n }\n .htmx-request.my-indicator{\n display:inline;\n }\n```\n\nNote that the target of the `hx-indicator` selector need not be the exact element that you\nwant to show: it can be any element in the parent hierarchy of the indicator.\n\nFinally, note that the `htmx-request` class by default is added to the element causing\nthe request, so you can place an indicator inside of that element and not need to explicitly\ncall it out with the `hx-indicator` attribute:\n\n```html\n<button hx-post=\"/example\">\n Post It!\n <img class=\"htmx-indicator\" src=\"/img/bars.svg\"/>\n</button>\n```\n\n## Demo\n\nThis simulates what a spinner might look like in that situation:\n\n<button class=\"btn\" classes=\"toggle htmx-request:3s\">\n Post It!\n <img class=\"htmx-indicator\" src=\"/img/bars.svg\"/>\n</button>\n\n## Notes\n\n* `hx-indicator` is inherited and can be placed on a parent element\n* In the absence of an explicit indicator, the `htmx-request` class will be added to the element triggering the\n request\n* If you want to use your own CSS but still use `htmx-indicator` as class name, then you need to disable `includeIndicatorStyles`. See [Configuring htmx](@/docs.md#config). The easiest way is to add this to the `<head>` of your HTML:\n```html\n<meta name=\"htmx-config\" content='{\"includeIndicatorStyles\": false}'>\n```",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-indicator/"
}
]
},
"hx-inherit":{
"description": "The default behavior for htmx is to \"inherit\" many attributes automatically: that is, an attribute such as\n[hx-target](@/attributes/hx-target.md) may be placed on a parent element, and all child elements will inherit\nthat target. Some people do not like this feature and instead prefer to explicitly specify inheritance for attributes.\n\nTo support this mode of development, htmx offers the `htmx.config.disableInheritance` setting, which can be set to\n`false` to prevent inheritance from being the default behavior for any of the htmx attributes.\n\nThe `hx-inherit` attribute allows you to control the inheritance of attributes manually.\n\nhtmx evaluates attribute inheritance as follows:\n\n* when `hx-inherit` is set on a parent node\n * `inherit=\"*\"` all attribute inheritance for this element will be enabled\n * `hx-inherit=\"hx-select hx-get hx-target\"` enable inheritance for only one or multiple specified attributes\n\nHere is an example of a div that shares an `hx-target` attribute for a set of anchor tags when `htmx.config.disableInheritance`\nis set to false:\n\n```html\n<div hx-target=\"#tab-container\" hx-inherit=\"hx-target\">\n <a hx-boost=\"true\" href=\"/tab1\">Tab 1</a>\n <a hx-boost=\"true\" href=\"/tab2\">Tab 2</a>\n <a hx-boost=\"true\" href=\"/tab3\">Tab 3</a>\n</div>\n```\n\n## Notes\n\n* Read more about [Attribute Inheritance](@/docs.md#inheritance)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-inherit/"
}
]
},
"hx-on":{
"description": "The `hx-on*` attributes allow you to embed scripts inline to respond to events directly on an element; similar to the \n[`onevent` properties](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) found in HTML, such as `onClick`.\n\nThe `hx-on*` attributes improve upon `onevent` by enabling the handling of any arbitrary JavaScript event,\nfor enhanced [Locality of Behaviour (LoB)](/essays/locality-of-behaviour/) even when dealing with non-standard DOM events. For example, these\nattributes allow you to handle [htmx events](/reference#events).\n\nWith `hx-on` attributes, you specify the event name as part of the attribute name, after a colon. So, for example, if\nyou want to respond to a `click` event, you would use the attribute `hx-on:click`:\n\n```html\n<div hx-on:click=\"alert('Clicked!')\">Click</div>\n```\n\nNote that this syntax can be used to capture all htmx events, as well as most other custom events, in addition to the\nstandard DOM events.\n\nOne gotcha to note is that DOM attributes do not preserve case. This means, unfortunately, an attribute like\n`hx-on:htmx:beforeRequest` **will not work**, because the DOM lowercases the attribute names. Fortunately, htmx supports\nboth camel case event names and also [kebab-case event names](@/docs.md#events), so you can use `hx-on:htmx:before-request` instead.\n\nIn order to make writing htmx-based event handlers a little easier, you can use the shorthand double-colon `hx-on::` for htmx\nevents, and omit the \"htmx\" part:\n\n```html\n<!-- These two are equivalent -->\n<button hx-get=\"/info\" hx-on:htmx:before-request=\"alert('Making a request!')\">\n Get Info!\n</button>\n\n<button hx-get=\"/info\" hx-on::before-request=\"alert('Making a request!')\">\n Get Info!\n</button>\n\n```\n\nIf you wish to handle multiple different events, you can simply add multiple attributes to an element:\n```html\n<button hx-get=\"/info\"\n hx-on::before-request=\"alert('Making a request!')\"\n hx-on::after-request=\"alert('Done making a request!')\">\n Get Info!\n</button>\n```\n\nFinally, in order to make this feature compatible with some templating languages (e.g. [JSX](https://react.dev/learn/writing-markup-with-jsx)) that do not like having a colon (`:`)\nin HTML attributes, you may use dashes in the place of colons for both the long form and the shorthand form:\n\n```html\n<!-- These two are equivalent -->\n<button hx-get=\"/info\" hx-on-htmx-before-request=\"alert('Making a request!')\">\n Get Info!\n</button>\n\n<button hx-get=\"/info\" hx-on--before-request=\"alert('Making a request!')\">\n Get Info!\n</button>\n\n```\n\n### hx-on (deprecated)\nThe value is an event name, followed by a colon `:`, followed by the script:\n\n```html\n<button hx-get=\"/info\" hx-on=\"htmx:beforeRequest: alert('Making a request!')\">\n Get Info!\n</button>\n```\n\nMultiple handlers can be defined by putting them on new lines:\n```html\n<button hx-get=\"/info\" hx-on=\"htmx:beforeRequest: alert('Making a request!')\n htmx:afterRequest: alert('Done making a request!')\">\n Get Info!\n</button>\n```\n\n\n### Symbols\n\nLike `onevent`, two symbols are made available to event handler scripts:\n\n* `this` - The element on which the `hx-on` attribute is defined\n* `event` - The event that triggered the handler\n\n### Notes\n\n* `hx-on` is _not_ inherited, however due to\n [event bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture),\n `hx-on` attributes on parent elements will typically be triggered by events on child elements\n* `hx-on:*` and `hx-on` cannot be used together on the same element; if `hx-on:*` is present, the value of an `hx-on` attribute\n on the same element will be ignored. The two forms can be mixed in the same document, however.",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-on/"
}
]
},
"hx-params":{
"description": "The `hx-params` attribute allows you to filter the parameters that will be submitted with an AJAX request. \n\nThe possible values of this attribute are:\n\n* `*` - Include all parameters (default)\n* `none` - Include no parameters\n* `not <param-list>` - Include all except the comma separated list of parameter names\n* `<param-list>` - Include all the comma separated list of parameter names\n\n```html\n <div hx-get=\"/example\" hx-params=\"*\">Get Some HTML, Including Params</div>\n```\n\nThis div will include all the parameters that a `POST` would, but they will be URL encoded\nand included in the URL, as per usual with a `GET`.\n\n## Notes\n\n* `hx-params` is inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-params/"
}
]
},
"hx-patch":{
"description": "The `hx-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n<button hx-patch=\"/account\" hx-target=\"body\">\n Patch Your Account\n</button>\n```\n\nThis example will cause the `button` to issue a `PATCH` to `/account` and swap the returned HTML into\n the `innerHTML` of the `body`.\n \n## Notes\n\n* `hx-patch` is not inherited\n* You can control the target of the swap using the [hx-target](@/attributes/hx-target.md) attribute\n* You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute\n* You can control what event triggers the request with the [hx-trigger](@/attributes/hx-trigger.md) attribute\n* You can control the data submitted with the request in various ways, documented here: [Parameters](@/docs.md#parameters)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-patch/"
}
]
},
"hx-post":{
"description": "The `hx-post` attribute will cause an element to issue a `POST` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n<button hx-post=\"/account/enable\" hx-target=\"body\">\n Enable Your Account\n</button>\n```\n\nThis example will cause the `button` to issue a `POST` to `/account/enable` and swap the returned HTML into\n the `innerHTML` of the `body`.\n \n## Notes\n\n* `hx-post` is not inherited\n* You can control the target of the swap using the [hx-target](@/attributes/hx-target.md) attribute\n* You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute\n* You can control what event triggers the request with the [hx-trigger](@/attributes/hx-trigger.md) attribute\n* You can control the data submitted with the request in various ways, documented here: [Parameters](@/docs.md#parameters)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-post/"
}
]
},
"hx-preserve":{
"description": "The `hx-preserve` attribute allows you to keep an element unchanged during HTML replacement.\nElements with `hx-preserve` set are preserved by `id` when htmx updates any ancestor element.\nYou *must* set an unchanging `id` on elements for `hx-preserve` to work.\nThe response requires an element with the same `id`, but its type and other attributes are ignored.\n\nNote that some elements cannot unfortunately be preserved properly, such as `<input type=\"text\">` (focus and caret position are lost), iframes or certain types of videos. To tackle some of these cases we recommend the [morphdom extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/morphdom-swap/README.md), which does a more elaborate DOM\nreconciliation.\n\n## Notes\n\n* `hx-preserve` is not inherited",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-preserve/"
}
]
},
"hx-prompt":{
"description": "The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of\nthe prompt will be included in the request in the `HX-Prompt` header.\n\nHere is an example:\n\n```html\n<button hx-delete=\"/account\" hx-prompt=\"Enter your account name to confirm deletion\">\n Delete My Account\n</button>\n```\n\n## Notes\n\n* `hx-prompt` is inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-prompt/"
}
]
},
"hx-push-url":{
"description": "The `hx-push-url` attribute allows you to push a URL into the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).\nThis creates a new history entry, allowing navigation with the browser\u2019s back and forward buttons.\nhtmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.\n\nThe possible values of this attribute are:\n\n1. `true`, which pushes the fetched URL into history.\n2. `false`, which disables pushing the fetched URL if it would otherwise be pushed due to inheritance or [`hx-boost`](/attributes/hx-boost).\n3. A URL to be pushed into the location bar.\n This may be relative or absolute, as per [`history.pushState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState).\n\nHere is an example:\n\n```html\n<div hx-get=\"/account\" hx-push-url=\"true\">\n Go to My Account\n</div>\n```\n\nThis will cause htmx to snapshot the current DOM to `localStorage` and push the URL `/account' into the browser location bar.\n\nAnother example:\n\n```html\n<div hx-get=\"/account\" hx-push-url=\"/account/home\">\n Go to My Account\n</div>\n```\n\nThis will push the URL `/account/home' into the location history.\n\n## Notes\n\n* `hx-push-url` is inherited and can be placed on a parent element\n* The [`HX-Push-Url` response header](@/headers/hx-push-url.md) has similar behavior and can override this attribute.\n* The [`hx-history-elt` attribute](@/attributes/hx-history-elt.md) allows changing which element is saved in the history cache.",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-push-url/"
}
]
},
"hx-put":{
"description": "The `hx-put` attribute will cause an element to issue a `PUT` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n<button hx-put=\"/account\" hx-target=\"body\">\n Put Money In Your Account\n</button>\n```\n\nThis example will cause the `button` to issue a `PUT` to `/account` and swap the returned HTML into\n the `innerHTML` of the `body`.\n \n## Notes\n\n* `hx-put` is not inherited\n* You can control the target of the swap using the [hx-target](@/attributes/hx-target.md) attribute\n* You can control the swap strategy by using the [hx-swap](@/attributes/hx-swap.md) attribute\n* You can control what event triggers the request with the [hx-trigger](@/attributes/hx-trigger.md) attribute\n* You can control the data submitted with the request in various ways, documented here: [Parameters](@/docs.md#parameters)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-put/"
}
]
},
"hx-replace-url":{
"description": "The `hx-replace-url` attribute allows you to replace the current url of the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).\n\nThe possible values of this attribute are:\n\n1. `true`, which replaces the fetched URL in the browser navigation bar.\n2. `false`, which disables replacing the fetched URL if it would otherwise be replaced due to inheritance.\n3. A URL to be replaced into the location bar.\n This may be relative or absolute, as per [`history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState).\n\nHere is an example:\n\n```html\n<div hx-get=\"/account\" hx-replace-url=\"true\">\n Go to My Account\n</div>\n```\n\nThis will cause htmx to snapshot the current DOM to `localStorage` and replace the URL `/account' in the browser location bar.\n\nAnother example:\n\n```html\n<div hx-get=\"/account\" hx-replace-url=\"/account/home\">\n Go to My Account\n</div>\n```\n\nThis will replace the URL `/account/home' in the browser location bar.\n\n## Notes\n\n* `hx-replace-url` is inherited and can be placed on a parent element\n* The [`HX-Replace-Url` response header](@/headers/hx-replace-url.md) has similar behavior and can override this attribute.\n* The [`hx-history-elt` attribute](@/attributes/hx-history-elt.md) allows changing which element is saved in the history cache.\n* The [`hx-push-url` attribute](@/attributes/hx-push-url.md) is a similar and more commonly used attribute, which creates a \n new history entry rather than replacing the current one.",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-replace-url/"
}
]
},
"hx-request":{
"description": "The `hx-request` attribute allows you to configure various aspects of the request via the following attributes:\n \n* `timeout` - the timeout for the request, in milliseconds\n* `credentials` - if the request will send credentials\n* `noHeaders` - strips all headers from the request\n\nThese attributes are set using a JSON-like syntax:\n\n```html\n<div ... hx-request='{\"timeout\":100}'>\n ...\n</div>\n```\n\nYou may make the values dynamically evaluated by adding the `javascript:` or `js:` prefix:\n\n```html\n<div ... hx-request='js: timeout:getTimeoutSetting() '>\n ...\n</div>\n```\n\n## Notes\n\n* `hx-request` is merge-inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-request/"
}
]
},
"hx-select-oob":{
"description": "The `hx-select-oob` attribute allows you to select content from a response to be swapped in via an out-of-band swap. \nThe value of this attribute is comma separated list of elements to be swapped out of band. This attribute is almost\nalways paired with [hx-select](@/attributes/hx-select.md).\n\nHere is an example that selects a subset of the response content:\n\n```html\n<div>\n <div id=\"alert\"></div>\n <button hx-get=\"/info\" \n hx-select=\"#info-details\" \n hx-swap=\"outerHTML\"\n hx-select-oob=\"#alert\">\n Get Info!\n </button>\n</div>\n```\n\nThis button will issue a `GET` to `/info` and then select the element with the id `info-details`,\nwhich will replace the entire button in the DOM, and, in addition, pick out an element with the id `alert` \nin the response and swap it in for div in the DOM with the same ID.\n\nEach value in the comma separated list of values can specify any valid [`hx-swap`](@/attributes/hx-swap.md)\nstrategy by separating the selector and the swap strategy with a `:`.\n\nFor example, to prepend the alert content instead of replacing it:\n\n```html\n<div>\n <div id=\"alert\"></div>\n <button hx-get=\"/info\"\n hx-select=\"#info-details\"\n hx-swap=\"outerHTML\"\n hx-select-oob=\"#alert:afterbegin\">\n Get Info!\n </button>\n</div>\n```\n\n## Notes\n\n* `hx-select-oob` is inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-select-oob/"
}
]
},
"hx-select":{
"description": "The `hx-select` attribute allows you to select the content you want swapped from a response. The value of\nthis attribute is a CSS query selector of the element or elements to select from the response.\n\nHere is an example that selects a subset of the response content:\n\n```html\n<div>\n <button hx-get=\"/info\" hx-select=\"#info-details\" hx-swap=\"outerHTML\">\n Get Info!\n </button>\n</div>\n```\n\nSo this button will issue a `GET` to `/info` and then select the element with the id `info-detail`,\nwhich will replace the entire button in the DOM.\n\n## Notes\n\n* `hx-select` is inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-select/"
}
]
},
"hx-swap-oob":{
"description": "The `hx-swap-oob` attribute allows you to specify that some content in a response should be\nswapped into the DOM somewhere other than the target, that is \"Out of Band\". This allows you to piggy back updates to other element updates on a response.\n\nConsider the following response HTML:\n\n```html\n<div>\n ...\n</div>\n<div id=\"alerts\" hx-swap-oob=\"true\">\n Saved!\n</div>\n\n```\n\nThe first div will be swapped into the target the usual manner. The second div, however, will be swapped in as a replacement for the element with the id `alerts`, and will not end up in the target.\n\nThe value of the `hx-swap-oob` can be:\n\n* `true`\n* any valid [`hx-swap`](@/attributes/hx-swap.md) value\n* any valid [`hx-swap`](@/attributes/hx-swap.md) value, followed by a colon, followed by a CSS selector\n\nIf the value is `true` or `outerHTML` (which are equivalent) the element will be swapped inline.\n\nIf a swap value is given, that swap strategy will be used.\n\nIf a selector is given, all elements matched by that selector will be swapped. If not, the element with an ID matching the new content will be swapped.\n\n### Troublesome Tables\n\nNote that you can use a `template` tag to encapsulate types of elements that, by the HTML spec, can't stand on their own in the\nDOM (`<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>`, `<tfoot>`, `<colgroup>`, `<caption>` & `<col>`).\n\nHere is an example with an out of band swap of a table row being encapsulated in this way:\n\n```html\n<div>\n ...\n</div>\n<template>\n <tr id=\"row\" hx-swap-oob=\"true\">\n ...\n </tr>\n</template>\n```\n\nNote that these template tags will be removed from the final content of the page.\n\n## Nested OOB Swaps\n\nBy default, any element with `hx-swap-oob=` attribute anywhere in the response is processed for oob swap behavior, including when an element is nested within the main response element.\nThis can be problematic when using [template fragments](https://htmx.org/essays/template-fragments/) where a fragment may be reused as a oob-swap target and also as part of a bigger fragment. When the bigger fragment is the main response the inner fragment will still be processed as an oob swap, removing it from the dom.\n\nThis behavior can be changed by setting the config `htmx.config.allowNestedOobSwaps` to `false`. If this config option is `false`, OOB swaps are only processed when the element is *adjacent to* the main response element, OOB swaps elsewhere will be ignored and oob-swap-related attributes stripped.\n\n## Notes\n\n* `hx-swap-oob` is not inherited",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-swap-oob/"
}
]
},
"hx-swap":{
"description": "The `hx-swap` attribute allows you to specify how the response will be swapped in relative to the\n[target](@/attributes/hx-target.md) of an AJAX request. If you do not specify the option, the default is\n`htmx.config.defaultSwapStyle` (`innerHTML`).\n\nThe possible values of this attribute are:\n\n* `innerHTML` - Replace the inner html of the target element\n* `outerHTML` - Replace the entire target element with the response\n* `textContent` - Replace the text content of the target element, without parsing the response as HTML\n* `beforebegin` - Insert the response before the target element\n* `afterbegin` - Insert the response before the first child of the target element\n* `beforeend` - Insert the response after the last child of the target element\n* `afterend` - Insert the response after the target element\n* `delete` - Deletes the target element regardless of the response\n* `none`- Does not append content from response (out of band items will still be processed).\n\nThese options are based on standard DOM naming and the \n[`Element.insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)\nspecification.\n\nSo in this code:\n\n```html\n <div hx-get=\"/example\" hx-swap=\"afterend\">Get Some HTML & Append It</div>\n```\n\nThe `div` will issue a request to `/example` and append the returned content after the `div`\n\n### Modifiers\n\nThe `hx-swap` attributes supports modifiers for changing the behavior of the swap. They are outlined below.\n\n#### Transition: `transition`\n\nIf you want to use the new [View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) API\nwhen a swap occurs, you can use the `transition:true` option for your swap. You can also enable this feature globally by\nsetting the `htmx.config.globalViewTransitions` config setting to `true`.\n\n#### Timing: `swap` & `settle`\n\nYou can modify the amount of time that htmx will wait after receiving a response to swap the content\nby including a `swap` modifier:\n\n```html\n <!-- this will wait 1s before doing the swap after it is received -->\n <div hx-get=\"/example\" hx-swap=\"innerHTML swap:1s\">Get Some HTML & Append It</div>\n```\n\nSimilarly, you can modify the time between the swap and the settle logic by including a `settle`\nmodifier:\n\n```html\n <!-- this will wait 1s before doing the swap after it is received -->\n <div hx-get=\"/example\" hx-swap=\"innerHTML settle:1s\">Get Some HTML & Append It</div>\n```\n\nThese attributes can be used to synchronize htmx with the timing of CSS transition effects.\n\n#### Title: `ignoreTitle`\n\nBy default, htmx will update the title of the page if it finds a `<title>` tag in the response content. You can turn\noff this behavior by setting the `ignoreTitle` option to true.\n\n#### Scrolling: `scroll` & `show`\n\nYou can also change the scrolling behavior of the target element by using the `scroll` and `show` modifiers, both\nof which take the values `top` and `bottom`:\n\n```html\n <!-- this fixed-height div will scroll to the bottom of the div after content is appended -->\n <div style=\"height:200px; overflow: scroll\" \n hx-get=\"/example\" \n hx-swap=\"beforeend scroll:bottom\">\n Get Some HTML & Append It & Scroll To Bottom\n </div>\n```\n\n```html\n <!-- this will get some content and add it to #another-div, then ensure that the top of #another-div is visible in the \n viewport -->\n <div hx-get=\"/example\" \n hx-swap=\"innerHTML show:top\"\n hx-target=\"#another-div\">\n Get Some Content\n </div>\n```\n\nIf you wish to target a different element for scrolling or showing, you may place a CSS selector after the `scroll:`\nor `show:`, followed by `:top` or `:bottom`:\n\n```html\n <!-- this will get some content and swap it into the current div, then ensure that the top of #another-div is visible in the \n viewport -->\n <div hx-get=\"/example\" \n hx-swap=\"innerHTML show:#another-div:top\">\n Get Some Content\n </div>\n```\n\nYou may also use `window:top` and `window:bottom` to scroll to the top and bottom of the current window.\n\n\n```html\n <!-- this will get some content and swap it into the current div, then ensure that the viewport is scrolled to the\n very top -->\n <div hx-get=\"/example\" \n hx-swap=\"innerHTML show:window:top\">\n Get Some Content\n </div>\n```\n\nFor boosted links and forms the default behaviour is `show:top`. You can disable it globally with\n[htmx.config.scrollIntoViewOnBoost](@/api.md#config) or you can use `hx-swap=\"show:none\"` on an element basis.\n\n```html\n<form action=\"/example\" hx-swap=\"show:none\">\n ...\n</form>\n```\n\n#### Focus scroll\n\nhtmx preserves focus between requests for inputs that have a defined id attribute. By default htmx prevents auto-scrolling to focused inputs between requests which can be unwanted behavior on longer requests when the user has already scrolled away. To enable focus scroll you can use `focus-scroll:true`.\n\n```html\n <input id=\"name\" hx-get=\"/validation\" \n hx-swap=\"outerHTML focus-scroll:true\"/>\n```\n\nAlternatively, if you want the page to automatically scroll to the focused element after each request you can change the htmx global configuration value `htmx.config.defaultFocusScroll` to true. Then disable it for specific requests using `focus-scroll:false`.\n\n```html\n <input id=\"name\" hx-get=\"/validation\" \n hx-swap=\"outerHTML focus-scroll:false\"/>\n```\n\n## Notes\n\n* `hx-swap` is inherited and can be placed on a parent element\n* The default value of this attribute is `innerHTML`\n* Due to DOM limitations, it\u2019s not possible to use the `outerHTML` method on the `<body>` element.\n htmx will change `outerHTML` on `<body>` to use `innerHTML`.\n* The default swap delay is 0ms\n* The default settle delay is 20ms",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-swap/"
}
]
},
"hx-sync":{
"description": "The `hx-sync` attribute allows you to synchronize AJAX requests between multiple elements.\n\nThe `hx-sync` attribute consists of a CSS selector to indicate the element to synchronize on, followed optionally\nby a colon and then by an optional syncing strategy. The available strategies are:\n\n* `drop` - drop (ignore) this request if an existing request is in flight (the default)\n* `abort` - drop (ignore) this request if an existing request is in flight, and, if that is not the case, \n *abort* this request if another request occurs while it is still in flight\n* `replace` - abort the current request, if any, and replace it with this request\n* `queue` - place this request in the request queue associated with the given element\n\nThe `queue` modifier can take an additional argument indicating exactly how to queue:\n\n* `queue first` - queue the first request to show up while a request is in flight\n* `queue last` - queue the last request to show up while a request is in flight\n* `queue all` - queue all requests that show up while a request is in flight\n\n## Notes\n\n* `hx-sync` is inherited and can be placed on a parent element\n\nThis example resolves a race condition between a form's submit request and an individual input's validation request. Normally, without using `hx-sync`, filling out the input and immediately submitting the form triggers two parallel requests to `/validate` and `/store`. Using `hx-sync=\"closest form:abort\"` on the input will watch for requests on the form and abort the input's request if a form request is present or starts while the input request is in flight.\n\n```html\n<form hx-post=\"/store\">\n <input id=\"title\" name=\"title\" type=\"text\" \n hx-post=\"/validate\" \n hx-trigger=\"change\"\n hx-sync=\"closest form:abort\">\n <button type=\"submit\">Submit</button>\n</form>\n```\n\nIf you'd rather prioritize the validation request over the submit request, you can use the `drop` strategy. This example will prioritize the validation request over the submit request so that if a validation request is in flight, the form cannot be submitted.\n\n```html\n<form hx-post=\"/store\">\n <input id=\"title\" name=\"title\" type=\"text\" \n hx-post=\"/validate\" \n hx-trigger=\"change\"\n hx-sync=\"closest form:drop\"\n >\n <button type=\"submit\">Submit</button>\n</form>\n```\n\nWhen dealing with forms that contain many inputs, you can prioritize the submit request over all input validation requests using the hx-sync `replace` strategy on the form tag. This will cancel any in-flight validation requests and issue only the `hx-post=\"/store\"` request. If you'd rather abort the submit request and prioritize any existing validation requests you can use the `hx-sync=\"this:abort\"` strategy on the form tag.\n\n```html\n<form hx-post=\"/store\" hx-sync=\"this:replace\">\n <input id=\"title\" name=\"title\" type=\"text\" hx-post=\"/validate\" hx-trigger=\"change\" />\n <button type=\"submit\">Submit</button>\n</form>\n```\n\nWhen implementing active search functionality the hx-trigger attribute's `delay` modifier can be used to debounce the user's input and avoid making multiple requests while the user types. However, once a request is made, if the user begins typing again a new request will begin even if the previous one has not finished processing. This example will cancel any in-flight requests and use only the last request. In cases where the search input is contained within the target, then using `hx-sync` like this also helps reduce the chances that the input will be replaced while the user is still typing.\n\n```html\n<input type=\"search\" \n hx-get=\"/search\" \n hx-trigger=\"keyup changed delay:500ms, search\" \n hx-target=\"#search-results\"\n hx-sync=\"this:replace\">\n```",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-sync/"
}
]
},
"hx-target":{
"description": "The `hx-target` attribute allows you to target a different element for swapping than the one issuing the AJAX\nrequest. The value of this attribute can be:\n\n* A CSS query selector of the element to target.\n* `this` which indicates that the element that the `hx-target` attribute is on is the target.\n* `closest <CSS selector>` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)\n ancestor element or itself, that matches the given CSS selector\n (e.g. `closest tr` will target the closest table row to the element).\n* `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector.\n* `next` which resolves to [element.nextElementSibling](https://developer.mozilla.org/docs/Web/API/Element/nextElementSibling)\n* `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector.\n (e.g. `next .error` will target the closest following sibling element with `error` class)\n* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)\n* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous .error` will target the closest previous sibling with `error` class)\n\n\nHere is an example that targets a div:\n\n```html\n<div>\n <div id=\"response-div\"></div>\n <button hx-post=\"/register\" hx-target=\"#response-div\" hx-swap=\"beforeend\">\n Register!\n </button>\n</div>\n```\n\nThe response from the `/register` url will be appended to the `div` with the id `response-div`.\n\nThis example uses `hx-target=\"this\"` to make a link that updates itself when clicked:\n```html\n<a hx-post=\"/new-link\" hx-target=\"this\" hx-swap=\"outerHTML\">New link</a>\n```\n\n## Notes\n\n* `hx-target` is inherited and can be placed on a parent element",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-target/"
}
]
},
"hx-trigger":{
"description": "The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger\nvalue can be one of the following:\n\n* An event name (e.g. \"click\" or \"my-custom-event\") followed by an event filter and a set of event modifiers\n* A polling definition of the form `every <timing declaration>`\n* A comma-separated list of such events\n\n### Standard Events\n\nA standard event, such as `click` can be specified as the trigger like so:\n\n```html\n<div hx-get=\"/clicked\" hx-trigger=\"click\">Click Me</div>\n```\n\n#### Standard Event Filters\n\nEvents can be filtered by enclosing a boolean javascript expression in square brackets after the event name. If\nthis expression evaluates to `true` the event will be triggered, otherwise it will be ignored.\n\n```html\n<div hx-get=\"/clicked\" hx-trigger=\"click[ctrlKey]\">Control Click Me</div>\n```\n\nThis event will trigger if a click event is triggered with the `event.ctrlKey` property set to true.\n\nConditions can also refer to global functions or state\n\n```html\n<div hx-get=\"/clicked\" hx-trigger=\"click[checkGlobalState()]\">Control Click Me</div>\n```\n\nAnd can also be combined using the standard javascript syntax\n\n```html\n<div hx-get=\"/clicked\" hx-trigger=\"click[ctrlKey&&shiftKey]\">Control-Shift Click Me</div>\n```\n\nNote that all symbols used in the expression will be resolved first against the triggering event, and then next\nagainst the global namespace, so `myEvent[foo]` will first look for a property named `foo` on the event, then look\nfor a global symbol with the name `foo`\n\n#### Standard Event Modifiers\n\nStandard events can also have modifiers that change how they behave. The modifiers are:\n\n* `once` - the event will only trigger once (e.g. the first click)\n* `changed` - the event will only change if the value of the element has changed. Please pay attention `change` is the name of the event and `changed` is the name of the modifier.\n* `delay:<timing declaration>` - a delay will occur before an event triggers a request. If the event\nis seen again it will reset the delay.\n* `throttle:<timing declaration>` - a throttle will occur after an event triggers a request. If the event\nis seen again before the delay completes, it is ignored, the element will trigger at the end of the delay.\n* `from:<Extended CSS selector>` - allows the event that triggers a request to come from another element in the document (e.g. listening to a key event on the body, to support hot keys)\n * A standard CSS selector resolves to all elements matching that selector. Thus, `from:input` would listen on every input on the page.\n * The CSS selector is only evaluated once and is not re-evaluated when the page changes. If you need to detect dynamically added elements use an event filter, for example `click[event.target.matches('input')]`\n * The extended CSS selector here allows for the following non-standard CSS values:\n * `document` - listen for events on the document\n * `window` - listen for events on the window\n * `closest <CSS selector>` - finds the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) ancestor element or itself, matching the given css selector\n * `find <CSS selector>` - finds the closest child matching the given css selector\n * `next` resolves to [element.nextElementSibling](https://developer.mozilla.org/docs/Web/API/Element/nextElementSibling)\n * `next <CSS selector>` scans the DOM forward for the first element that matches the given CSS selector.\n (e.g. `next .error` will target the closest following sibling element with `error` class)\n * `previous` resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)\n * `previous <CSS selector>` scans the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous .error` will target the closest previous sibling with `error` class)\n* `target:<CSS selector>` - allows you to filter via a CSS selector on the target of the event. This can be useful when you want to listen for\ntriggers from elements that might not be in the DOM at the point of initialization, by, for example, listening on the body,\nbut with a target filter for a child element\n* `consume` - if this option is included the event will not trigger any other htmx requests on parents (or on elements\n listening on parents)\n* `queue:<queue option>` - determines how events are queued if an event occurs while a request for another event is in flight. Options are:\n * `first` - queue the first event\n * `last` - queue the last event (default)\n * `all` - queue all events (issue a request for each event)\n * `none` - do not queue new events\n\nHere is an example of a search box that searches on `keyup`, but only if the search value has changed\nand the user hasn't typed anything new for 1 second:\n\n```html\n<input name=\"q\"\n hx-get=\"/search\" hx-trigger=\"keyup changed delay:1s\"\n hx-target=\"#search-results\"/>\n```\n\nThe response from the `/search` url will be appended to the `div` with the id `search-results`.\n\n### Non-standard Events\n\nThere are some additional non-standard events that htmx supports:\n\n* `load` - triggered on load (useful for lazy-loading something)\n* `revealed` - triggered when an element is scrolled into the viewport (also useful for lazy-loading). If you are using `overflow` in css like `overflow-y: scroll` you should use `intersect once` instead of `revealed`.\n* `intersect` - fires once when an element first intersects the viewport. This supports two additional options:\n * `root:<selector>` - a CSS selector of the root element for intersection\n * `threshold:<float>` - a floating point number between 0.0 and 1.0, indicating what amount of intersection to fire the event on\n\n### Triggering via the `HX-Trigger` header\n\nIf you're trying to fire an event from <code>HX-Trigger</code> response header, you will likely want to\nuse the `from:body` modifier. E.g. if you send a header like this <code>HX-Trigger: my-custom-event</code>\nwith a response, an element would likely need to look like this:\n\n```html\n <div hx-get=\"/example\" hx-trigger=\"my-custom-event from:body\">\n Triggered by HX-Trigger header...\n </div>\n```\n\nin order to fire.\n\nThis is because the header will likely trigger the event in a different DOM hierarchy than the element that you\nwish to be triggered. For a similar reason, you will often listen for hot keys from the body.\n\n### Polling\n\nBy using the syntax `every <timing declaration>` you can have an element poll periodically:\n\n```html\n<div hx-get=\"/latest_updates\" hx-trigger=\"every 1s\">\n Nothing Yet!\n</div>\n```\n\nThis example will issue a `GET` to the `/latest_updates` URL every second and swap the results into\nthe innerHTML of this div.\n\nIf you want to add a filter to polling, it should be added *after* the poll declaration:\n\n```html\n<div hx-get=\"/latest_updates\" hx-trigger=\"every 1s [someConditional]\">\n Nothing Yet!\n</div>\n```\n\n### Multiple Triggers\n\nMultiple triggers can be provided, separated by commas. Each trigger gets its own options.\n```html\n <div hx-get=\"/news\" hx-trigger=\"load, click delay:1s\"></div>\n```\nThis example will load `/news` immediately on page load, and then again with a delay of one second after each click.\n\n### Via JavaScript\n\nThe AJAX request can be triggered via JavaScript [`htmx.trigger()`](@/api.md#trigger), too.\n\n## Notes\n\n* `hx-trigger` is not inherited\n* `hx-trigger` can be used without an AJAX request, in which case it will only fire the `htmx:trigger` event\n* In order to pass a CSS selector that contains whitespace (e.g. `form input`) to the `from`- or `target`-modifier, surround the selector in parentheses or curly brackets (e.g. `from:(form input)` or `from:nearest (form input)`)",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-trigger/"
}
]
},
"hx-validate":{
"description": "The `hx-validate` attribute will cause an element to validate itself by way of the [HTML5 Validation API](@/docs.md#validation)\nbefore it submits a request.\n\nOnly `<form>` elements validate data by default, but other elements do not. Adding `hx-validate=\"true\"` to `<input>`, `<textarea>` or `<select>` enables validation before sending requests.\n\n## Notes\n\n* `hx-validate` is not inherited",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-validate/"
}
]
},
"hx-vals":{
"description": "The `hx-vals` attribute allows you to add to the parameters that will be submitted with an AJAX request. \n\nBy default, the value of this attribute is a list of name-expression values in [JSON (JavaScript Object Notation)](https://www.json.org/json-en.html) \nformat.\n\nIf you wish for `hx-vals` to *evaluate* the values given, you can prefix the values with `javascript:` or `js:`.\n\n```html\n <div hx-get=\"/example\" hx-vals='{\"myVal\": \"My Value\"}'>Get Some HTML, Including A Value in the Request</div>\n\n <div hx-get=\"/example\" hx-vals='js:{myVal: calculateValue()}'>Get Some HTML, Including a Dynamic Value from Javascript in the Request</div>\n```\n\nWhen using evaluated code you can access the `event` object. This example includes the value of the last typed key within the input.\n\n```html\n <div hx-get=\"/example\" hx-trigger=\"keyup\" hx-vals='js:{lastKey: event.key}'>\n <input type=\"text\" />\n </div>\n```\n\n## Security Considerations\n\n* By default, the value of `hx-vals` must be valid [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON). \n It is **not** dynamically computed. If you use the `javascript:` prefix, be aware that you are introducing\n security considerations, especially when dealing with user input such as query strings or user-generated content, \n which could introduce a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability. \n\n## Notes\n\n* `hx-vals` is inherited and can be placed on a parent element.\n* A child declaration of a variable overrides a parent declaration.\n* Input values with the same name will be overridden by variable declarations.",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-vals/"
}
]
},
"hx-vars":{
"description": "**NOTE: `hx-vars` has been deprecated in favor of [`hx-vals`](@/attributes/hx-vals.md), which is safer by default.**\n\nThe `hx-vars` attribute allows you to dynamically add to the parameters that will be submitted with an AJAX request. \n\nThe value of this attribute is a comma separated list of `name`:`<expression>` values, the same as the internal\nsyntax of javascript [Object Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals).\n\n```html\n <div hx-get=\"/example\" hx-vars=\"myVar:computeMyVar()\">Get Some HTML, Including A Dynamic Value in the Request</div>\n```\n\n## Security Considerations\n\n* The expressions in `hx-vars` are dynamically computed which allows you to add JavaScript code that will be executed. Be careful to **never** trust user input in your expressions as this may lead to a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability. If you are dealing with user input such as query strings or user-generated content, consider using [hx-vals](@/attributes/hx-vals.md) which is a safer alternative.\n\n## Notes\n\n* `hx-vars` is inherited and can be placed on a parent element.\n* A child declaration of a variable overrides a parent declaration.\n* Input values with the same name will be overridden by variable declarations.",
"references": [
{
"name": "Official documention",
"url": "https://htmx.org/attributes/hx-vars/"
}
]
}
},
"valueSets": [
{
"name": "swap",
"values": [
{
"name": "innerHTML",
"description": "The default, puts the content inside the target element"
},
{
"name": "outerHTML",
"description": "Replaces the entire target element with the returned content"
},
{
"name": "afterbegin",
"description": "Prepends the content before the first child inside the target"
},
{
"name": "beforebegin",
"description": "Prepends the content before the target in the targets parent element"
},
{
"name": "beforeend",
"description": "Appends the content after the last child inside the target"
},
{
"name": "afterend",
"description": "Appends the content after the target in the targets parent element"
},
{
"name": "delete",
"description": "Deletes the target element regardless of the response"
},
{
"name": "none",
"description": "Does not append content from response (Out of Band Swaps and Response Headers will still be processed)"
}
]
}
]
}