benonymus

benonymus

Issue with phx-target when updating to liveview 0.6

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

Marked As Solved

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: ...], ...

Also Liked

benonymus

benonymus

wow, thank you so much! :heart_eyes:

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
tduccuong
Hi, is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
yawaramin
In the Dialyzer docs ( dialyzer — OTP 29.0.2 (dialyzer 6.0.1) ), there is a way to turn off a specific warning for a function: -dialyzer...
New

Other popular topics Top

mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement