Reply from handle_event disapears my UI

NOTE: newbie Phoenix / Liveview here

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.

I know this works:

def handle_event("store_assessment", %{"text" => text, "user_id" => user_id}, socket) do
     {:noreply, push_event(socket, "dontcare", %{})}
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?


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

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