Issue with phx-target when updating to liveview 0.6

Phoenix Forum Questions / Help
,
1

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

2

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

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

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:

4

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

wow, thank you so much! :heart_eyes:

1 Like