benonymus
Hey,
I have a livecomponent from pre phx-target times, and now I am trying to make it work on liveview 0.6, but I seem to be missing something. All the events are going into the parent liveview not the component.
I am initializing my component like this with the id:
<%= live_component @socket, @config_form_module, id: "1", config_changeset: @config_changeset %>
then in my component I have the id assigned explicitly
def update(%{config_changeset: config_changeset, id: id} = _assigns, socket) do
IO.inspect(id)
{:ok, assign(socket, config_changeset: config_changeset, id: id)}
end
and in my form the button that I am testing looks like this:
<button class="btn btn-link" type="button" phx-click="project_information_edit_general_settings" phx-target="#project-info-<%= @id %>" ><i class="mdi mdi-circle-edit-outline"></i> Edit </button>
Any idea what am I missing?
here is my full form that I am rendering in the component:
<%= form_for @config_changeset, "#", [phx_submit: :save_config, as: :config], fn f -> %>
<%= if @config_changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
</div>
<% end %>
<h3>General Settings</h3>
<%= if @editing_general_settings do %>
<%= Input.text f, :heading, label: "Content Heading" %>
<button class="btn btn-link" type="button" phx-click="project_information_edit_general_settings_cancel"><i class="mdi mdi-cancel"></i> Cancel </button>
<button class="btn btn-link" ><i class="mdi mdi-content-save-outline"></i> Save </button>
<% else %>
<%= Input.label f, :heading, label: "Content Heading:" %>
<%= " #{f.data.heading}" %>
</br>
<button class="btn btn-link" type="button" phx-click="project_information_edit_general_settings" phx-target="#project-info-<%= @id %>" ><i class="mdi mdi-circle-edit-outline"></i> Edit </button>
<% end %>
<hr/>
<h3>Sections</h3>
<%= inputs_for f, :sections, fn section_form -> %>
<%= if section_form.data.id == @currently_editing_section_id do %>
<%= Input.text section_form, :heading, label: "Section Heading" %>
<%= Input.textarea section_form, :body, label: "Section Body"%>
<button class="btn btn-link type="button"" type="button" phx-click="project_information_edit_section_cancel"><i class="mdi mdi-cancel"></i> Cancel </button>
<button class="btn btn-link" ><i class="mdi mdi-content-save-outline"></i> Save </button>
<% else %>
<%= Input.label section_form, :heading, label: "Section Heading: " %>
<%= " #{section_form.data.heading}" %>
<br/>
<%= Input.label section_form, :body, label: "Section Body: "%>
<%= " #{section_form.data.body}" %>
<br/>
<button class="btn btn-link" type="button" phx-click="project_information_edit_section" phx-value-section_id="<%= section_form.data.id %>"><i class="mdi mdi-circle-edit-outline"></i> Edit </button>
<button class="btn btn-link" type="button" data-confirm="Are you sure you want to delete this section?" phx-click="project_information_remove_section" phx-value-section_id="<%= section_form.data.id %>"><i class="mdi mdi-trash-can-outline"></i> Remove Section</button>
<% end %>
<hr/>
<% end %>
<div>
<%= if not is_nil(@currently_editing_section_id) or @editing_general_settings do %>
<button class="btn btn-outline-secondary" disabled="true" type="button" phx-click="project_information_add_section">
<i class="mdi mdi-plus"></i> Add Section
</button>
<% else %>
<button class="btn btn-outline-secondary" type="button" phx-click="project_information_add_section">
<i class="mdi mdi-plus"></i> Add Section
</button>
<% end %>
</div>
<% end %>
Thank you
Trending in Questions
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
Hello,
I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
Documentation
While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
So my question is quite simple and i have found no conclusive answer on forum, google or AI.
Should we use :erlang.float for Integer to ...
New
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
Other Trending Topics
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
Hi there! We created Gust: A task orchestrator inspired by Airflow.
For those who have never heard about Aiflow, it’s a Python-based wor...
New
Hi everyone!
The first release candidate for the Expert language server project is now available!
We’ve published a press release detai...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
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
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security










Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
chrismccord
You need to place the DOM ID somewhere in your component, for example:
benonymus
Hey thanks, i did what you said, but now if i click on the button “nothing” happens, no error of going to the wrong file, but nothing else
I noticed I am getting an error in the console in the browser:
this matches the DOM id now for the form #project-info-1
the only ref to the error is your @chrismccord commit:
https://github.com/phoenixframework/phoenix_live_view/commit/2c1bf99526eedbf0b7f1ae297714cd5593d3835e
sfusato
I think there’s a small typo in Chris’s answer, without the starting ‘#’ in the id. See if this works:
benonymus
wow, thank you so much!