How we got to LiveView

Re:How we got to LiveView by turtlebits on Wednesday September 22, 2021 @05:43PM (#28622265)

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.

[ Parent | on HN ]

Re:How we got to LiveView by chrismccord on Wednesday September 22, 2021 @07:48PM (#28623514)

If 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, ...})

[ Parent | on HN ]

Re:How we got to LiveView by jakeva on Wednesday September 22, 2021 @07:32PM (#28623392)

I 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);

[ Parent | on HN ]