liveBook · Manning

Hx-push-url

As explained in Django in Action

hx-push-url is an HTMX HTML attribute that updates the browser history URL when an HTMX request completes.

`hx-push-url="true"` ties an HTMX search field to the browser URL. As the search changes, its value becomes a query parameter, so the current results can be deep-linked, copied, or bookmarked. section 12.4

A bookmarked search still needs a useful initial page render. Render the initial results normally, then let HTMX replace the results area with partial HTML for later searches; the browser history is not a substitute for server-side rendering. section 12.4

Search musicians without losing the URL

Place `hx-push-url="true"` beside `hx-get`, a delayed `keyup` trigger, and `hx-target="#results"`. The view reads `search_text`, renders the full search page for a normal request, and returns only the results partial for an HTMX request. section 12.4

Listing 12.7 The template for the search page
<!-- RiffMates/templates/search_musicians.html -->
{% extends "base.html" %}

{% block content %}
  <h1>Search Musicians</h1>

  <input name="search_text"  #1
    placeholder="Search for musicians..."
    type="text"
    value="{{search_text}}"  #2
    hx-get="{% url 'search_musicians' %}"  #3
    hx-trigger="keyup changed delay:500ms"  #4
    hx-target="#results"  #5
    hx-push-url="true"> #6

    <div class="results" id="results">  #7
      {% include "partials/musician_results.html" %}  #8
    </div>
{% endblock content %}

The search input shows `hx-push-url="true"` working alongside the request URL, trigger, and results target. section 12.4

How Django in Action covers it

How deep it goes
Explains attribute placement and URL effects, then connects them to full-page and partial Django rendering.
Examples
Demonstrates a musician search field, results container, shared results template, and an HTMX-aware Django view.
What it assumes
Builds on an HTMX-enabled GET search and Django templates while introducing URL tying through a single attribute.
What you can do after
Apply it via HTMX to make an asynchronous search URL shareable while preserving initial server-rendered results.
How it connects
Connects hx-push-url with HTMX, hx-get, hx-trigger, hx-target, query parameters, deep linking, and partial HTML.
Cover of Django in Action
liveBookmanning.com
Read Django in Action on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Django in Action. The section links point to the parts of the book it draws on.