Issues rendering a single component with htmx

Hi there!

I’m currently reading through the book (the one related to htmx) and I’m hitting a bit of a snag.

Htmx gives me attributes that allow me to, on the server side, respond with only the html that I wan’t it to replace in a given element. For reference, the section I’m having trouble replicating is the one related to adding active search, specifically the HTTP Request Headers In Htmx section.

My html is the same as the book’s, and in place of the include statement they use in the view, I used a functional component <.rows contacts={@contacts} /> and in my controller I’ve done:

  def index(conn, %{"q" => q}) do
    contacts = Contacts.list_contacts(q)
    case Plug.Conn.get_req_header(conn, "hx-trigger") do
      ["search"] -> render(conn, :rows, contacts: contacts, layout: false)
      [] -> render(conn, :index, contacts: contacts)

It all seems to work fine but, for some reason, when I do a search, this breaks the markup. Inspecting in the browser, I see that there definitely must be something off because the HTML response, instead of replacing the content of the tbody, it’s replacing the contents of the body tag for the template I declared. Naturally this breaks the contacts table. Any ideas as to what might be the issue?

Also, if you’d like to see the actual code and test it out, here’s the repo

1 Like

So, I actually ended up finding the solution for this in the elixir slack with the help of @LostKobrakai.

All I needed was to say:

put_root_layout(conn, false)

Before rendering my template.

1 Like