LiveView not emitting events?

Phoenix Forum Questions / Help
,
1

Hello all!

I’ve been battling with LiveView for too long and I could use some eyes. I’ve installed LiveView 0.3.1. Followed the README/Docs/Sample apps. No errors on Phoenix boot or Webpack compile. I’ve dropped a live_render call into an existing template. Everything renders on load as expected.

I have a form with phx_change: "validate" on the <form> element its self. When I type into an input no events are emitted. I’ve added a generic button directly from the docs and when I click it no events are fired. I’ve looked at the compiled JS (via webpack) and have confirmed that phoenix_live_view.js is bundled.

I can directly push an event via the JS console. The server receives it and the DOM updates as expected.

It all seems to work aside from the event triggers.

Help?

2

Here’s a diff of what I’ve added: https://gist.github.com/mdarby/de3c205e9b4e9ca34812e7a72e4dc1ec

3

It doesn’t like like there is a live_render call to render the index page. So while you have rendered a FooWeb.PasswordStrengthLive on the page, the parent content is a regular EEx page and LV will not pay attention to it. So your phx-change on the parent form is not inside a LV container. You need to make a ResetPasswordLive LiveView which holds all the form markup, then things should work as expected :slight_smile:

4 Likes
4

That’s exactly what I’ve been missing. The bound elements must be rendered via a LiveView component. I was assuming that by including phoenix_live_view.js in the deps any new/matching DOM element would be observed?

Thanks as always! :slight_smile: