How To Do OOB Swaps

Out-of-band (OOB) swaps are useful for updating multiple parts of a page without returning the entire page each time. hx-requests provides an easy way to return multiple HTML snippets, each performing an OOB swap efficiently.

Using Multiple Templates

If the HTML snippets you want to return are in separate templates, the code would look like this:

class MyHxRequest(BaseHxRequest):
    name ="my_hx_request"
    GET_template = ["target_template.html","oob_template.html"]

Using Multiple Blocks (Same Template)

If the HTML snippets are in separate blocks within the same template, the code would look like this:

class MyHxRequest(BaseHxRequest):
    name ="my_hx_request"
    GET_template = "template.html"
    GET_block = ["block","oob_block"]

Using Multiple Blocks (Different Templates)

If the HTML snippets are in separate blocks across different templates, the code would look like this:

class MyHxRequest(BaseHxRequest):
    name ="my_hx_request"
    GET_template = "target_template.html" # rendered in full; the dict blocks are swapped OOB
    GET_block = {
        "template1.html": "block",
        "template2.html": ["oob_block1","oob_block2"]
    }

Warning

When GET_block is a dict, the resolved GET_template is also rendered in full and appended after the blocks. A falsy GET_template (such as an empty string) does not suppress this – it falls back to the view’s template, which is then appended. Point GET_template at the template you want rendered alongside the OOB blocks.

Note

All the above examples work the same way with POST_template and POST_block as well.

Note

Ensure that all top level blocks or templates have hx-swap-oob=True in the html tag, excluding the one being swapped into the hx-target.

More On Blocks