Skip to content

Commit

Permalink
[Documentation] Add more information about other swap strategies (#2889)
Browse files Browse the repository at this point in the history
* Add more information about other swap strategies

* Change suggested by @MichaelWest22

* Grammar error as per comments from @Telroshan

* Clarification requested by @Telroshan
  • Loading branch information
Keeper-of-the-Keys authored Sep 18, 2024
1 parent 0023cd8 commit 7f8105a
Showing 1 changed file with 39 additions and 3 deletions.
42 changes: 39 additions & 3 deletions www/content/attributes/hx-swap-oob.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,50 @@ The value of the `hx-swap-oob` can be:

If the value is `true` or `outerHTML` (which are equivalent) the element will be swapped inline.

If a swap value is given, that swap strategy will be used.
If a swap value is given, that swap strategy will be used and the encapsulating tag pair will be stripped for all strategies other than `outerHTML`.

If 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.

### Troublesome Tables
### Using alternate swap strategies

As mentioned previously when using swap strategies other than `true` or `outerHTML` the encapsulating tags are stripped, as such you need to excapsulate the returned data with the correct tags for the context.

When trying to insert a `<tr>` in a table that uses `<tbody>`:
```html
<tbody hx-swap-oob="beforeend:#table tbody">
<tr>
...
</tr>
</tbody>
```

A "plain" table:
```html
<table hx-swap-oob="beforeend:#table2">
<tr>
...
</tr>
</table>
```

A `<li>` may be encapsulated in `<ul>`, `<ol>`, `<div>` or `<span>`, for example:
```html
<ul hx-swap-oob="beforeend:#list1">
<li>...</li>
</ul>
```

A `<p>` can be encapsulated in `<div>` or `<span>`:
```html
<span hx-swap-oob="beforeend:#text">
<p>...</p>
</span>
```

### Troublesome Tables and lists

Note 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
DOM (`<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>`, `<tfoot>`, `<colgroup>`, `<caption>` & `<col>`).
DOM (`<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>`, `<tfoot>`, `<colgroup>`, `<caption>`, `<col>` & `<li>`).

Here is an example with an out of band swap of a table row being encapsulated in this way:

Expand Down

0 comments on commit 7f8105a

Please sign in to comment.