morinap
Triggering LiveView Form Change Event from Javascript
I am using LiveView to render a form and a phx_change event to send updates back to the controller. I’m also using an extra library (Select2: https://select2.org/) as a more robust select field control for a select input on the form. I have a JavaScript event listener tied to the Select2’s change event so that I can perform certain actions, and I’d like in my event listener to then be able to push the phx_change event back to the LiveView.
I’ve inspected the change event payload and noted it’s like any other event and just contains an encoded chunk of the full form data, so I can replicate that behavior in my own code if need be, but ideally I’d like a LiveView JS-interop way to do this programmatically. Something either like this.pushFormChange() or finding the form instance and making a trigger call on the event that the JS interop has bound to, but so far I’ve been unable to find anything either in the documentation, in the source code, or in some trial-and-error that works the way I want.
Is this something that’s possible or that anybody has done? Alternatively, is my approach simply wrong here?
Marked As Solved
chrismccord
via a hook on the input tag:
To trigger a phx-change:
this.el.dispatchEvent(new Event("input", {bubbles: true}))
To trigger a phx-submit:
this.el.dispatchEvent(new Event("submit", {bubbles: true}))
Also Liked
BartOtten
@chrismccord Have been searching for this answer for some time too. Seeing the answer got 12 likes, I suppose I was not the only one. Maybe it’s a good idea to add it to the JavaScript interoperability — Phoenix LiveView v1.2.5? That is were I tried to find the answer.
mhmtarif
$el.dispatchEvent(new Event(‘submit’, {bubbles: true , cancelable: true}))
soup
You might need to post some code. Are you sure the element exists or the ID is correct? Cannot read property 'querySelectorAll' of null implies something is trying to call element_but_its_null.querySelectorAll.
nidu
I had to use this function one for input with phx-debounce="blur"
function fireInputChangeEvent(input) {
input.dispatchEvent(new Event("input", { bubbles: true }));
if (input.phxPrivate && input.phxPrivate["debounce-blur"]) {
setTimeout(() => input.dispatchEvent(new Event("blur", { bubbles: true })));
}
}
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"