HTMX websocket target response element

Question

Using HTMX with Django and websocket.

{% block content %}

<main hx-ext="ws" ws-connect="/ws/attempt/{{ id }}/" hx-trigger="load" hx-target="#question_response">
  <div class="container-fluid">

    <div class="row">
      <div class="col-md-12 mt-4">

            <div id="question_response"></div>

      </div
    </div>

  </div>
</main>

{% endblock %}

But the response is not rendering in target div. I want the response to render in question_response div.

The HTMX guide only has the following code block but does not describe how to target response.

<div hx-ext="ws" ws-connect="/chatroom">
    <div id="notifications"></div>
    <div id="chat_room">
        ...
    </div>
    <form id="form" ws-send>
        <input name="chat_message">
    </form>
</div>

Answer 1

Make you are sending data from Django via WebSocket in a format that HTMX expects and that you're targeting the correct element.

<!-- HTML -->
<main hx-ext="ws" ws-connect="/ws/attempt/{{ id }}/" hx-trigger="load" ws-target="#question_response">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mt-4">
        <div id="question_response"></div>
      </div>
    </div>
  </div>
</main>

I've added ws-target="#question_response" to indicate the target for WebSocket messages. Make sure your Django WebSocket backend is correctly configured to send data to /ws/attempt/{{ id }}/.

Hope this helps.

• If your response from the backend is plain text, you may need to handle it manually via JavaScript to update the question_response div.

// JavaScript
document.addEventListener("htmx:wsMessage", function (event) {
  if (event.detail.wsTarget === "#question_response") {
    document.querySelector("#question_response").innerHTML = event.detail.data;
  }
});

Attach this JavaScript to handle incoming WebSocket messages and update the #question_response div's content. Make sure to include this script in your HTML.