How to cause a patch event render from within Javascript

Phoenix Forum Questions / Help
1

I’m using a calendar library and within that I have a callback for when I’ve selected a date, I’d like to patch render my app to load a modal to complete the form and create the event in the database. I can obviously just use window.location.href = url; but I want to avoid causing a full page render.

So within a Liveview Hook, how can I execute this? After digging through the live view code I did find this https://github.com/phoenixframework/phoenix_live_view/blob/fc82165d1ac4f1002aae576a3966c4e41c4550b9/priv/static/phoenix_live_view.js#L4434-L4460, and I was thinking I could just call something like pushHistoryPatch in the JS but there doesn’t seem to be a direct way to do this.

I’ve also tried to create a synthetic event, by creating a link tag with the right tags but I’ve not managed to get this working either :frowning:

2

Rather than patching from the client, try pushing an event back via a client side hook to trigger the patch from the server.

# pseudocode that assumes the calendar library callback dispatches an event
# to window or the element with the LiveView client side hook

# HEEx template
<div id="my-calendar" phx-hook="MyCalendar" />

# app.js
let Hooks = {}
Hooks.MyCalendar = {
  mounted() {
    window.addEventListener("date-selected", e => {
      this.pushEvent("date-selected", {})
    })
    // or alternatively
    this.el.addEventListener("date-selected", e => {
      this.pushEvent("date-selected", {})
    })
  }
}

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...})

# LiveView or LiveComponent
def handle_event("date-selected", params, socket) do
  {:noreply, push_patch(socket, to: ~p"/my_modal")}
end
2 Likes
3

Sorry for asking this, but I always get confused by what people are asking.

Is the scenario you have a calandar with all the dates, someone clicks the date and a modal form opens that allows the user to create an event on that date? If so you don’t need hooks at all, which is why I’m confused.

4

Sorry for asking this, but I always get confused by what people are asking.

Well specifcally I’m using a library called fullcalendar.js, and with this I want an experience where when you highlight a period of the day you can creat an event for that. With this I’m triggering a javascript callback, rather than click some DOM element on the page (well I am doing that too but I don’t have access to that) so I needed someway in the callback to that function to be able to trigger a modal form to render.

Hopefully that makes sense why I needed hooks, a good example of what I’m doing can be found in this repo https://liveviewcookbook.dev/full_calendar