How to pushEvent from javascript to LiveView

Phoenix Forum Questions / Help
1

I am looking for a way to push an event from Javascript. In JavaScript interoperability — Phoenix LiveView v0.20.17 I can find pushEvent in specific lifecycle callbacks.

But how could I push arbitrary data to the server?

Thank you

2

Maybe this conversation and the library attached will be helpful?

I’m not entirely sure what you mean by “pushing arbitrary data,” but I’m guessing you mean something unrelated to a typical user interaction event like a click and so on; is that right?

2 Likes
3

When I needed this I did create a hook to relay events to LV. A little awkward, but I remeber asking here if there is a better solution and nothing came up. Would be nice, if you could just push an event from JS to LV.

Hooks.RelayHook = {
  mounted() {
    relay = this;
    document.addEventListener("relay-event", (e) =>
      relay.pushEvent(e.detail.event, e.detail.payload)
    );
  },
};

...

window.dispatchToLV = function (event, payload) {
  let relay_event = new CustomEvent("relay-event", {
    detail: { event: event, payload: payload },
  });
  document.dispatchEvent(relay_event);
};

You can use the main container of the LV for the hook-element.

<!-- live.hmtl.heex -->
<main class="container" phx-hook="RelayHook">
  ...
  <%= @inner_content %>
  ...
</main>
5 Likes
4

As mentioned above, live_json wraps this ability into a function:

import { sendData } from 'live_json';
sendData('your_handler', your_data);
1 Like
5

Although it feels restrictive sometimes, organizing your javascript into a bunch of hooks, each corresponding to some element in the DOM, is a good thing. What do you mean by “push arbitrary data”? It has to be triggered by some event on some element, right? So you install event listeners at the mounted() callback, pointing to some methods within the same hook then you can pushEvent in your event listener.

6

When I did this I did not see a way to go the way you propose.
I needed to send updates to the server from a complex component written in JS.

7

You can dispatch a customEvent, embedded with whatever data you like, from anywhere in the js. In your hook, you can install an event listener in the mounted() call back to another method of the same hook. The customEvent will land in your hook method and you can pushEvent as usual.

8

I don’t get it. Isn’t that what I’m doing?

9

I was replying to this. If you already know how to do it then you can ignore my message. My point is: having to go through a hook is a good thing, for better code organization and also the tie in to the life cycle management of the liveview and the element of interest.

10

So I install event listener at the mounted() callback:

import startDragging from "./mouse_dragging"
[…]
Hooks.MouseDrag = {
	mounted()
	{
		this.el.addEventListener("mousedown", startDragging);
	}
}

which works nice, I do all the element dragging around and at some point the element gets dropped ("mouseup"). This is the moment where I’d like to push the final position back to the server. Now – if I understand correctly – what you suggest is to install additional listener(s) for a custom event, but at the “pointing to some methods within the same hook”

I am no longer sure I understand this. Could you post a quick example?

11

In the event listener in the hook, startDragging, you call pushEvent or pushEventTo to send an event to the server.

https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook

12

You can only call pushEvent from a method of the hook because you need the this from it. So I was proposing a 3 step process:

  1. generate a customEvent from anywhere in your js
  2. catch the customEvent in the mounted of your hook, call another method of the hook
  3. call this.pushEvent() from the method

The following code use standard events, A customEvent should work similarly.

13

This doesn’t seem to work, as once I am in my handlers I no longer have pushEvent available. As @derek-zhou mentioned, the original this is needed for “this” :wink: and is no longer there.

@derek-zhou what exactly do you mean by “another method of the hook”? Anonymous function attached to an extra (customEvent) listener on the original element?

Because if I do:

import startDragging from "./mouse_dragging"
[…]
Hooks.MouseDrag = {
	mounted()
	{
		this.el.addEventListener("mousedown", startDragging);
		this.el.addEventListener("mousedragfinished", function(e) {
			console.log(e);
		});
	}
}

and in the handler:

	draggedElement.dispatchEvent(new CustomEvent("mousedragfinished", {x: posX, y: posY}));

then I (for some obvious reason?) don’t seem to be catching this.

14

You need to dispatch to the same element as the addEventHandler from your hook. Any element will do as long as they match. You can do document.dispatchElement() and document.addEventHandler()

15

Well, if I attach my listener to a global element (like window or document) then it surely works. But the problem (?) is that in such case all hooked elements’ handlers are triggered instead of only the one I am interested in (the one that was dragged), resulting in the code being executed x times (where “x” is the number of draggable elements in the window). Probably I need to double-check whether I am really dispatching it correctly when attached to the element in question and not something higher in the hierarchy.

UPDATE:

Yup, I was attaching listener to the drag handle inside of the element, while dispatching event to the draggable element (upper in the hierarchy) so this part is solved - thank you for pointing me in the right direction.

16

This sort of stuff works.

const SomeHook = {
  mounted() {
    const pushit = (event) => this.pushEvent(event)
    const throttledPushEvent = throttle(pushit, ms)

    this.el.addEventListener("mouseenter", () => {
      throttledPushEvent(event)
    });
  }
}

const SomeHook = {
  pushSomething () { this.pushEvent("something", {}) }
  mounted() {
    const el = ...;
    el.addEventListener("um", () => { this.pushSomething() }
  }
17

The OP was about how to pushEvent from any javascript to liveview. If your problem is more specific, can you start a new post with details and your current implementation, so we can suggest possible improvements?

18

I understand. My problem was almost exactly the same though. And I wanted to solve it by following your suggestions (so it felt natural to ask here). This initially seemed not to work but once you doubled-down on the fact that it in fact should, and stressed out that the elements need to match (which I thought I was doing correctly) then I quickly found the reason. So thanks once more - my problem is solved.

Roger that, tnx. I’ve got it working too now.