benonymus

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

Showing Posts 1 to 4

chrismccord

chrismccord

Creator of Phoenix

You need to place the DOM ID somewhere in your component, for example:

<%= form_for @config_changeset, "#", [id: "project-info-#{@id}", phx_submit: ...], ...
benonymus

benonymus OP

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:

Error: no phx-target’s found matching selector “#project-info-1
value webpack:///./node_modules/phoenix_live_view/priv/static/phoenix_live_view.js?:1
value webpack:///./node_modules/phoenix_live_view/priv/static/phoenix_live_view.js?:1
value webpack:///./node_modules/phoenix_live_view/priv/static/phoenix_live_view.js?:1
debounce webpack:///./node_modules/phoenix_live_view/priv/static/phoenix_live_view.js?:1
value webpack:///./node_modules/phoenix_live_view/priv/static/phoenix_live_view.js?:1
value webpack:///./node_modules/phoenix_live_view/priv/static/phoenix_live_view.js?:1

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

sfusato

I think there’s a small typo in Chris’s answer, without the starting ‘#’ in the id. See if this works:

<%= form_for @config_changeset, "#", [id: "project-info-#{@id}", phx_submit: ...], ...
benonymus

benonymus OP

wow, thank you so much! :heart_eyes:

— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
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
nseaSeb
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
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
RemyXRenard
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
velrest
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
samoloth
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
FlyingNoodle
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 Top

JesseHerrick
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
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
marciok
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
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
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

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews