Liveview: retrieving node with Javascript hook, while keeping LV bindings

[thojanssens1]

I have a hook that retrieves the node below, and put that html into a tooltip (using tippy).

In the LV template, I have:

~L"""
<div class="dropdown-menu__template" style="display: none">
  <div
    phx-click="some-action"
    phx-value-id="<%= @id %>"
    class="dropdown-menu__action">Delete</div>
</div>
"""

The JS hook is similar to the code below:

export const hook = {
  mounted() {
    const content = this.el.querySelector('.dropdown-menu__template');
    content.style.display = 'block';

    tippy(this.el, { trigger: "click", content, allowHTML: true });
  }
}

The problem is that phx-click doesn’t work when clicking on “Delete”. I might do something very dumb but I’d like to understand why that wouldn’t work.

Is there any way to get the phx-click working?

[ondrej-tucek]

You have to define handle_event callback, e.g.

  def handle_event("some-action", %{"id" => id}, socket) do
    id
    |> do_something()
    |> ...

    {:noreply, socket}
  end

Also I would rename some-action to delete, or similarly, according to context…

See more in phoenix_live_view.

[thojanssens1]

All of that has been done of course, I only pasted a few snippets. It was all working until I used a tooltip / JS hook.

[thojanssens1]

Actually it was because an option in the tooltip plugin prevented click inside of it…

[ondrej-tucek]

Okay, in my case was successful following:

# app.js
let Hooks = {}

Hooks.Tippy = {
    mounted() {        
        const content = this.el.querySelector('.dropdown-menu__template');
//         content.style.display = 'block';
         tippy(this.el, { trigger: "click", content: 'BOO Ya', allowHTML: true });        
    }
}

...
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})

# in ~L
<div class="dropdown-menu__template" >
    <div phx-hook="Tippy"
        phx-click="delete"
        phx-value-id="<%= @id %>"
        class="dropdown-menu__action">Delete
    </div>
</div>