Updating UI after a successful HTMX request

Leave a reply
  • 👎🏾Reload the page. Send response header HX-Refersh which ensures that page is reloaded afters successful request. This is not the greatest of options because refreshing page causes UI to move. 
        /**
    * Add HX-Refresh header to response. The client will refresh the page.
    */
    private function addRefreshHeader(): void
    {
        $this->response->setHeader('HX-Refresh', "true");
    }
  • 👍🏾 Trigger another HTMX read request that fetches the content on success. If you are coming from react/vue, this will feel natural. Send a header like HX-Trigger: HX-Update-My-Table and setup a hx-get to be triggered on this event e.g.
    <h2>My Table</h2>
   ...
  <tbody id="mytable-table" hx-get="/read/my-table" hx-trigger="HX-Update-My-Table from:body">
    ...
  </tbody>
</table>

<form hx-put="/put/my-table">
  <label>
    Name
        <input name="key" type="text">  
  </label>
  <label>
    Email
        <input name="value" type="text">  
  </label>
</form>

  • There are more interesting options https://htmx.org/examples/update-other-content/

Leave a Reply