Reply from handle_event disapears my UI

Phoenix Forum Questions / Help
1

NOTE: newbie Phoenix / Liveview here

Hi,
I’m trying to use Hooks to handle text events from the Quill text editor to the server and I’m using liveview.

Currently I have something like this on the app.js:

 HookTextEditor: {
    placeholder() { return this.el.dataset.placeholder },
    mounted() {
      const that = this;
      const quill = new Quill(this.el, {
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block']
        ],
        placeholder: this.placeholder(),
        theme: 'snow',
      });

      quill.on('text-change', function(_delta, _oldDelta, source) {
        if (source !== 'user') return

        const data = {
          user_id: that.el.dataset.user,
          text: quill.getText(),
        }

        that.pushEvent('store_assessment', data, (payload, reply) => {
          console.debug(payload, reply)
        })
      });
    }
  },
``

on the html I have:



<div id="editor-id" phx-hook="HookTextEditor" data-user="<%= user_id %>"></div>



My problem, I think is here. I dont want to send anything back to the UI. I want to add what I received into the socket, but everytime I use `assign` my UI component just disapears:


def handle_event("store_assessment", %{"text" => text, "user_id" => user_id}, socket) do
   {:noreply, assign(socket, foo: "bar")} # <----- does not work like this.
 end


I know this works:


def handle_event("store_assessment", %{"text" => text, "user_id" => user_id}, socket) do
     {:noreply, push_event(socket, "dontcare", %{})}
end

But I dont care about sending stuff to the UI. I just want to update the socket and move on.

Is that the correct way to handle events and reply properly?

Thanks
2

It would help if you showed the entire template so we can get the context. But most likely you want to add phx-update="ignore" to the editor div tag, that way any updates that LiveView does will not touch this element.

1 Like
3

Theres nothing else on the template.

The only thing phx-update="ignore" did was remove the div where it was placed and everything else stayed there… now I lost the outside of the component… lololol