Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Documentartion]Add more information about other swap strategies #2889

Merged
merged 4 commits into from
Sep 18, 2024
Merged

[Documentartion]Add more information about other swap strategies #2889

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f42572
Add more information about other swap strategies
Keeper-of-the-Keys Sep 10, 2024
dc9f46d
Change suggested by @MichaelWest22
Keeper-of-the-Keys Sep 16, 2024
5facbfc
Grammar error as per comments from @Telroshan
Keeper-of-the-Keys Sep 18, 2024
d6a5c70
Clarification requested by @Telroshan
Keeper-of-the-Keys Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 39 additions & 3 deletions www/content/attributes/hx-swap-oob.md
View file
Open in desktop
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
Loading