Skip to main content

OOB Swap

With OOB Swap I mean swapping multiple elements at once, which may come from multiple template files

Example index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Example</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
</head>
<body>
    <button hx-get="/update" hx-trigger="click" hx-swap="none">Update Divs</button>
    
    <div id="div1">Original Div 1</div>
    <div id="div2">Original Div 2</div>
</body>
</html>

Example response from /update-get endpoint

<div id="div1" hx-swap-oob="outerHTML">Updated Div 1</div>
<div id="div2" hx-swap-oob="outerHTML">Updated Div 2</div>

This will swap the elements with id="div1" and id="div2" after clicking the button.

No comments to display

Back to top