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

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

In the LV template, I have:

<div class="dropdown-menu__template" style="display: none">
    phx-value-id="<%= @id %>"

The JS hook is similar to the code below:

export const hook = {
  mounted() {
    const content = this.el.querySelector('.dropdown-menu__template'); = '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?

You have to define handle_event callback, e.g.

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

    {:noreply, socket}

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

See more in phoenix_live_view.

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.

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

Okay, in my case was successful following:

# app.js
let Hooks = {}

Hooks.Tippy = {
    mounted() {        
        const content = this.el.querySelector('.dropdown-menu__template');
// = '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-value-id="<%= @id %>"


1 Like

closed on topic author’s request…