fceruti
In a nutshell the issue I’m facing is that every time I register alpine’s @ or x-on event handler, two are registered and called when the action is performed.
The issue is solved if I comment liveSocket.connect(), which leads me to believe the problem is in the interoperation of liveSocket and Alpine.
I’ve circled the internet without success. Has anyone had this issue and solved it?
Packages:
Phoenix: 1.6.2
Phoenix Live View: 0.16.4
Surface: 0.6.1
Alpinejs: 3.3.5 & 3.4.2
Surface component:
defmodule TimetaskApp.WeekCalendar do
use Surface.LiveComponent
prop hours, :list, required: true
prop dates, :list, required: true
@impl true
def render(assigns) do
~F"""
<div class="w-full h-full flex flex-col" style="height: calc(100vh - 100px)" id="week-calendar"> {!-- Calendar --}
<div class="h-full flex-1 flex flex-row relative">
<div
class="flex-1 flex"
id="week-calendar-columns"
:hook="WeekCalendar"
x-init="fromHour = +$el.dataset.fromHour; toHour = +$el.dataset.toHour;"
x-data="week_calendar_data"
data-from-hour={List.first(@hours)}
data-to-hour={List.last(@hours)}
>
<div
class="flex-1 flex"
id="week-calendar-days-container"
x-ref="days_container"
>
{#for date <- @dates}
<div
id={"day_col_#{format_date(date)}"}
data-date={format_date(date)}
class="flex-1 border-r border-tt-border-calendar relative"
@mousedown.stop="startNewTimebox($event, $el.dataset.date)"
>
</div>
{/for}
</div>
</div>
</div>
</div>
"""
end
end
app.js:
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import topbar from "topbar"
import Alpine from "alpinejs"
import Hooks from "./_hooks"
import "./app/week_calendar.js"
window.Alpine = Alpine
Alpine.start()
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: Hooks,
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
},
},
});
topbar.config({ barColors: { 0: "#03ad8c" }, shadowColor: "rgba(0, 0, 0, .3)" })
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())
liveSocket.connect()
window.liveSocket = liveSocket
./app/week_calendar.js
document.addEventListener("alpine:init", () => {
Alpine.data("week_calendar_data", () => ({
fromHour: 0,
toHour: 0,
newTimebox: null,
startNewTimebox(event, date) {
const fromTime = this.getTimeFromEvent(event)
this.newTimebox = {
date: date,
fromTime: fromTime,
toTime: null
}
console.log(`Start new timebox ${date} ${fromTime.hour}:${fromTime.minute}`)
},
}))
});
Chrome dev tools:
Chrome console:
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
seanc
Does it work if you get rid of
Alpine.start()? Importing might automatically start it.fceruti
Nothing happens, the event handlers are not present. Alpine is not started in the import.
cmo
You got an
x-dataon that div, or its parent?fceruti
Yes there is, I updated my original post to show more context.
cmo
what’s the rendered html look like for the bit inside
{#for date <- @dates}?fceruti
This is the page full html (ps: I made a few updates to the original post)
view-source:127.0.0.1:4000/app/calendar
What you are asking is inside the element with id
week-calendar-days-containercmo
Probably doesn’t matter but you have a random
"in the divs with the IDs<div id="day_col_2021-11-09"?I’ve had to use alpines
templatetag (wrapped in aRawtag - I use surface) for somewhere where I generated a list of things which had myriad alpine bindings. Unfortunately, I’ve stepped away from the computer for the day so I can’t show you an example.fceruti
By any chance are you back yet? I’m stilll having this issue
cmo
Here is a cut down version. Note that I’m using Surface, hence the
<#Raw>tags (I assume there is a parallel in plain old liveview) and different syntax. The hook reads attributes from the hiddenspans and sends them to Apline. Alpine creates the html for the options. I had a bit of trouble getting this to work and when it worked I stopped touching it and moved on. I hope to revist if/when I get some timeHook:
fceruti
Me too!