Phoenix Liveview comprehensions and dynamic forms

Phoenix Forum Questions / Help
, ,
1

I am rendering a comprehension inside Liveview template (a list of reviews).
For each one when pressing a button I want to display an inline form to reply to that message.

image
image1514×466 35.1 KB

Some code snippets simplified to show what I have:


<article :for={rv <- @reviews} id={"received_#{rv.id}"} class="static p-6 bg-white">
  <div class="font-normal text-text_color">
    <%= rv.description %>
   </div>
 <button type="button" id={"show_reply_button_#{rv.id}"}  phx-click={JS.push("show_reply_form", value: %{id: rv.id})}>
       <img class="mr-1.5 w-3.5 h-3.5" src="/images/message.svg" alt="raporteaza icon" /> <%= gettext("Reply") %>
  </button>
<div :if={@form} class="mt-8 ml-12">
  <.simple_form for={@form} id="reply_review_form" phx-submit="submit_reply" class="mb-6">
      <:actions>
          <.input type="hidden" id="review_id" field={@form[:review_id]} />
      </:actions>
      <:actions>
          <label for="comment" class="sr-only">Your comment</label>
          <.input type="textarea" id="comment" field={@form[:content]} rows="6"  placeholder={gettext("Tell us...")} />
      </:actions>
      <:actions>
        <button type="button" phx-click="cancel_reply">
          <%= gettext("Cancel") %>
        </button>
        <button type="submit" >
          <%= gettext("Send") %>
        </button>
      </:actions>
    </.simple_form>
  </div>
</article>

On the server side I have:

def handle_event("show_reply_form", %{"id" => review_id}, socket) do
    form_data = %{
      "review_id" => review_id,
      "content" => nil
    }
    form = to_form(form_data, as: "review")
    socket = assign(socket, form: form)
    {:noreply, socket}
  end

Clicking on the button send the event to server side, The form is added to assigns but in the UI I get no diff via socket and no update is made.
I tried to generate a dynamic form for each item from the list but still no render update.

Any suggestions on what I am doing wrong?

2

The form is nested inside the for comprehension so the loop won’t run again unless you make a change to @reviews. I think in the current code the same form will then render for each comment.

3

I also tried to add a form for each element from the list like this:

<div :if={assigns[:"form_#{rv.id}"} class="mt-8 ml-12">
  <.simple_form for={assigns[:"form_#{rv.id}"]} id="reply_review_form" phx-submit="submit_reply" class="mb-6">
      <:actions>
          <.input type="hidden" id="review_id" field={assigns[:"form_#{rv.id}"][:review_id]} />
      </:actions>
      <:actions>
          <label for="comment" class="sr-only">Your comment</label>
          <.input type="textarea" id="comment" field={assigns[:"form_#{rv.id}"][:content]} rows="6"  placeholder={gettext("Tell us...")} />
      </:actions>
      <:actions>
        <button type="button" phx-click="cancel_reply">
          <%= gettext("Cancel") %>
        </button>
        <button type="submit" >
          <%= gettext("Send") %>
        </button>
      </:actions>
    </.simple_form>
  </div>

and

def handle_event("show_reply_form", %{"id" => review_id}, socket) do
    form_data = %{
      "review_id" => review_id,
      "content" => nil
    }
    form = to_form(form_data, as: "review")
    socket = assign(socket, "form_#{review_id}": form)
    {:noreply, socket}
  end

Theoretically it should render just the form from the corresponding review but nothing is send to UI.