Javascript integration with phoenix live view

Phoenix Forum Questions / Help
,
1

Hello,
I’m developing a live view app that has steps in one page and according to any steps, it has some html elements added or removed. since when it goes to each step condition the javascript tags won’t run I need to handle it with events.

Is there any solution that for each step from phoenix I trigger a javascript event or something?
the final thing is when any step loads I want a javascript to be triggers with step name or some data to be used in next step.

any help would be appreciated

2

Have you read here?

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-client-side

1 Like
3

Given the html below:

<div id="step_hook" phx-hook="StepHook" data-step="<%= @step_number %>">
</div>

each time you update @step_number assign, StepHook.updated() callback will be called:

updated() {
  console.log("Hi from step number:", this.el.dataset.step)
  this.handleStep(this.el.dataset.step)
}
3 Likes