3 ms·
Just getting started into Liveview, what confuses me is the proper way to integrate javascript. The JavaScript interoperability documentation page isn't reall
by turtlebits 5y ago
Just getting started into Liveview, what confuses me is the proper way to integrate javascript. The JavaScript interoperability documentation page isn't really helpful.
A simple case for me is using hotkeys to submit a form. Couldn't figure out a way to trigger a phx-submit from a onkeydown handler.
- jakeva 5y agoI might try setting a mounted hook on the element with something like this.el.addEventListener('onkeydown', function (event) { this.el.dispatchEvent(new Event('change', { 'bubbles': true })) }, true);
- chrismccord 5y agoIf you think the docs can be improved, please let us know. You can also find us on elixir-slack or elixirforum.com to ask for help. This should get you started: //<input type="text" name="body" phx-hook="SubmitOnEnter"/> let Hooks = {} Hooks.SubmitOnEnter = { mounted(){ this.el.addEventListener("keydown", e => { if(e.key === "Enter"){ this.el.form.dispatchEvent(new Event("submit", {bubbles: true})) } }) } } ... let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...})