pedromvieira
What’s the best approach to allow an external javascript library in LiveView after initial mount?
Currently it only works on first HTTP mount. And after any socket update, it’s stop.
The idea it’s to enable side menu or dropdown features like those in Flowbite.
Currently our side menu is a Phoenix.Component with a child Phoenix.Component per section.
We tried phx-update="ignore".
DROPDOWN
For dropdown, we did via phx-hook and it’s working.
function changeDom(obj) {
let dropdownId = obj.getAttribute("data-dropdown-toggle");
let dropdownObj = document.getElementById(dropdownId);
let options = {
placement: "bottom",
onHide: () => {
// console.log("dropdown has been hidden");
},
onShow: () => {
// console.log("dropdown has been shown");
},
};
let newDropdown = new Dropdown(dropdownObj, obj, options);
}
const navDropdown = {
mounted() {
let obj = this.el;
changeDom(obj);
},
updated() {
let obj = this.el;
changeDom(obj);
},
destroyed() {},
};
export default navDropdown;
SIDE MENU
For side menu dropdown, we did via phx-hook and it’s working.
HEEX
<ComponentsCompany.side_menu
locale={@locale}
token={@token}
socket={@socket}
section="users"
section_item="users-profile"
/>
<button
id="myId"
...
phx-hook="sidemenu"
...
</button>
SELECT
For multiple select, we did via phx-hook and it’s working.
HEEX
<%= select(f, :data_gender, Locale.choose_gender(@locale),
value: CommonUI.data(@changeset, [:data, "gender"]),
name: "user[data][gender]",
class: "form-live-select-input",
"phx-hook": "select",
autocomplete: "new-gender"
) %>
HOOK
const slimSelect = {
mounted() {
let opts = finalOpts(this);
new SlimSelect(opts);
},
updated() {
let opts = finalOpts(this);
new SlimSelect(opts);
},
destroyed() {},
};
export default slimSelect;
Trending in Questions
Hello!
Suppose you are building workflow (order / task / payment) processing system with the following requirements:
Each workflow con...
New
Hi all,
I’m working on a Phoenix project where I need to make external HTTP requests and I’m trying to choose between Req and HTTPoison....
New
How do I tell Hologram not to escape HTML when substituting into templates?
{Textile.render(@product.long_description)}
escapes the HTM...
New
I’d like to create a file with 600 permissions (rw-------), but there’s a race condition if I create it and then change the permissions. ...
New
Hi,
we run different LLM models across a cluster, with each node loading a configurable subset. Model-specific queues let nodes consume ...
New
When I use Mix.install with a git dependency, using git@github.com:... how do I change the SSH identity used?
I’ve got two Github accoun...
New
Hello all. I have a question as to best practices for code organization when implementing a liveview with a lot of responsibilities.
Sup...
New
Other Trending Topics
Hey there,
I haven’t seen a list of useful Elixir specific skills for the popular AI tools yet so I’m starting one here with my first.
...
New
Hi everyone :waving_hand:
I wanted to share something I’ve been building — NowBlind, a random chat app designed to help people discover ...
New
I fully migrated to my own harness from Anthropic/Gemini and I think it’s time to share it. Welcome DSH, the DeepSeek Harness, fully writ...
New
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
(I just needed to vent somewhere and LinkedIn is full of hope, or hype, I’m not sure which exactly)
AI dream has many faces, but general...
New
Localize is the next generation localisation library for Elixir. Think of it as ex_cldr version 3.0. The first version will be released ...
New
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
- #code-sync
- #discussion
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #ai
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #elixirconf-us
- #blog-post
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #elixirconf-eu
- #processes
- #security
- #api
- #forms
- #performance










Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
cmo
So what’s the code that’s not working?
ityonemo
Oops I missed the part where you explained the ignore thing
pedromvieira
It’s not working without hooks and recreating the click/show behaviour of the component.
Is there a simpler solution to rely on traditional Javascript libraries for small parts of the LiveView?
cmo
Hooks are the simple solution. Another one is using
Phoenix.LiveView.JSor simple things.