How to mount phx-hooks in dynamically-added elements?

AFAIK, this is not possible, see this issue: phx-hook does not run in elements dynamically added to the DOM · Issue #2563 · phoenixframework/phoenix_live_view · GitHub.

I was doing something similar in the past but the idea of force-mounting hooks (to support dynamically added elements) was never implemented because of some security concerns. I’m hoping this will get revisited at some in the future though.

You are mixing “regular” embedded JS calls with hooks here which I can’t imagine is the intended use.

Can you have something more like this where everything is being managed by one hook?

<table id="board" phx-hook="Board">
  <tr>
    <td data-drop-target-id={target_id}>
      <div draggable>...</div>
    </td>
  </tr>
</table>

This is more or less how I’ve done drag-and-drop in the past complete with dynamically added elements (though I was using a library).

Hi, thanks for your comment! I link to that issue from my github README especially Chris McCord’s & Jose Valim’s comments from here on, eg:

hooks are mounted any time their element first appears in the DOM

Every time the server sends something, if there are new hooks, they should be mounted.

The DOM nodes that liveview adds are mounted properly.

I am adding these hooks on the server – in a LiveView – I understood your issue to be adding hooks client-side.

Interesting! So the hook is at board level … would it be alerted to updated in child nodes? Would something like this work?

[1]

<table id="board" phx-hook="Board">
  <tr>
    <td id="cell-3-1" >
      <div class="piece" draggable>...</div>
    </td>
    <td id="cell-3-2" data-drop-target=true>
    </td>
  </tr>
</table>

The piece is moved from (3,1) to (3,2), and the data-drop-target attribute is updated on both tds.

[2]

<table id="board" phx-hook="Board">
  <tr>
    <td id="cell-3-1" data-drop-target=true>
    </td>
    <td id="cell-3-2" >
      <div class="piece" draggable>...</div>
    </td>
  </tr>
</table>

Could the Board hook pick that up?

Ya, you essentially delegate to JS here, which maybe you are trying not to do? Again, I’ve only ever used a library, so it’s a pretty simple set up of setting up the library hooks in the Phoenix JS Hooks (ugh, so many hooks!) and pushing updates to the server

For example, here my entire phx hook using SortableJS for a fairly old project (but is the only one top of mind):

Hooks.Sortable = {
  mounted() {
    Sortable.create(this.el, {
      draggable: ".sticky",
      animation: 500,
      emptyInsertThreshold: 10,
      group: "sticky-lanes",
      forceFallback: true,
      invertSwap: true,
      onEnd: (e) => {
        const { id, phxTarget } = e.item.dataset
        this.pushEventTo(phxTarget, "move", {
          sticky_id: id,
          from_lane_id: e.from.dataset.id,
          to_lane_id: e.to.dataset.id,
          new_position: e.newIndex + 1,
        })
      },
    })
  },
}

The point being that the JS takes care of watching for new items. In my example, that’s all hidden away in Sortable but that’s the idea.

Otherwise, ya, creating an element with a hook server side should call mount, I think your issue was just mixing hooks with non-hooks (I think?) but it looks like you have more insight now!

To add on to this, the TodoTrek showcase repo has a working example of LiveView and Sortable that supports Trello/kanban-style dragging and dropping cards between lists.

Excellent info, thanks. Yes – trying to avoid javascript Will try it out and report back soon.

Thanks v much, I’ll give it a look. I have used Sortable with a django app. Will report back with results/failures soon.