good Afternoon, I have a live_view component with a input hidden field “attached” to a phx-hook 1–in the template: <form id="login_form" phx-submit="check_login_credentials"> <input type="hidden" id="login_token" phx-hook="input_login_token"/> . . . </form> 2–in the server: there’s a function h…

The problem is in send_token_to_browser: [image] eddyraz: if login_token do {:noreply, push_event(socket, "save_login_token", %{payload: login_token})} socket = socket |> assign(:is_authenticated, true) {:noreply, assign(socket, params: params)} Note that pus…

Hi @eddyraz ! I am not sure if this is the actual issue, but in your example I noticed a typo between the event name in push_event and the name in handleEvent. Is that difference present in your actual code as well? If so, does using the same event name in both places allow the handleEvent call back …

Okay, I’m 0/1 so far, let’s try again! :smiley: Does the name of the hook object match the value given to phx-hook? In your example they are input_login_token and saveLogintoken respectively. Since you mentioned that a console.log works in the mounted method I think this is probably not the proble…

There’s one other typo that could be problematic if it’s not just erroneous transcription. The event payload in the Elixir side has a key of login_token, but the object destructuring on the JS side’s handleEvent call is using the key login_tkn which would be undefined based on the payload coming ac…

also a type, sorry i have to be more careful when posting.

I also changed that(it was that way in the code), but still no reults. I read the Javascript interoperability in Liveview hexdocs ( JavaScript interoperability — Phoenix LiveView v1.2.5 ), but still no clue why isn’t working.

If you are using push_event: [image] eddyraz: {:noreply, push_event(socket, "saveLoginToken", %{login_token : login_tkn} Phoenix Liveview adds the string phx: in front of the event name. So "saveLoginToken" becomes "phx:saveLoginToken" Have a look at JavaScript interoperability —…

in the docs says this: push_event(socket, event, payload) Pushes an event to the client. Events can be handled in two ways: 1. They can be handled on window via addEventListener. A "phx:" prefix will be added to the event name. 2. They can be handled inside a hook via handleEvent. So I think as…

The key you set here is login_token… [image] eddyraz: {:noreply, push_event(socket, "saveLoginToken", %{login_token : login_tkn} … while the key you seem to be unpacking on via destructuring assignment here is login_tkn. [image] eddyraz: this.handleEvent("saveLoginToken", ({login_…

Correct. The "phx:" prefix is not part of the event name when using this.handleEvent() on LiveSocket hooks. To avoid possible issues with JavaScript destructuring while debugging, you could try replacing your handleEvent with the following: this.handleEvent("saveLoginToken", (payload) => { conso…

Elixir Programming Language Forum

How to use hooks with data generated from the server

Questions & Help Questions

eddyraz March 5, 2023, 7:39pm 3

Thanks it was a typo, I just edited the post.