Can't get delete links to work in Phoenix 1.7rc

Phoenix Forum Questions / Help
1

Hey guys :smile:

Sorry if this sounds dumb but I’m at a loss for how to get this to work.

I’m trying out Phoenix 1.7rc and, after generating a new project and adding a Todo model using mix phx.gen, I still don’t understand how to use <.link> to delete an item.

If I run mix phx.routes, here’s what I get:

  GET     /                                      AppWeb.PageController :home
  GET     /items/toggle/:id                      AppWeb.ItemController :toggle
  GET     /items                                 AppWeb.ItemController :index
  GET     /items/:id/edit                        AppWeb.ItemController :edit
  GET     /items/new                             AppWeb.ItemController :new
  GET     /items/:id                             AppWeb.ItemController :show
  POST    /items                                 AppWeb.ItemController :create
  PATCH   /items/:id                             AppWeb.ItemController :update
  PUT     /items/:id                             AppWeb.ItemController :update
  DELETE  /items/:id                             AppWeb.ItemController :delete

I’m only interested in accessing the DELETE in the last line.

I have noticed that in the generated .heex files (inside lib/app_web/controllers/item_html/index.html.heex), they actually have the deleting working properly.

<.table id="items" rows={@items} row_click={&JS.navigate(~p"/items/#{&1}")}>
  <:col :let={item} label="Text"><%= item.text %></:col>
  <:col :let={item} label="Person"><%= item.person_id %></:col>
  <:col :let={item} label="Status"><%= item.status %></:col>
  <:action :let={item}>
    <div class="sr-only">
      <.link navigate={~p"/items/#{item}"}>Show</.link>
    </div>
    <.link navigate={~p"/items/#{item}/edit"}>Edit</.link>
  </:action>

 <!-- if I click this button, it works properly -->
  <:action :let={item}>
    <.link href={~p"/items/#{item}"} method="delete" data-confirm="Are you sure?">
      Delete
    </.link>
  </:action>
</.table>

I’m trying to achieve this. behaviour However, when I do something similar like:

    <%= for item <- @items do %>

      <li data-id={item.id} class={complete(item)}>
        <div class="view">
          <label><%= item.text %></label>
          <.link
            class="destroy"
            navigate={~p"/items/#{item}"}
            method="delete"
          >
          </.link>
        </div>
      </li>
      <% end %>

It simply doesn’t work. It seems to ignore the method='delete' line and just makes a GET request to /items/1, for example.

Why is this not working? Should method have a different value?

Thank you very much for the attention!

2

I don’t think method is a valid attribute in an a tag. Don’t you have to use a form?

1 Like
3

If you use href={~p"/items/#{item}"} (which the generated code uses) instead of navigate={~p"/items/#{item}"} it works.

Have a look at the difference in the generated <a> tags: href will include the data-method="delete" attribute, navigate does not

<.link href={~p"/items/#{item}"} method="delete">
<a href="/items/1" 
  data-method="delete" 
  data-csrf="..." 
  data-to="/items/1">
  Delete
</a>

<.link navigate={~p"/items/#{item}"} method="delete">
<a href="/items/1" 
  data-phx-link="redirect" 
  data-phx-link-state="push">
  Delete
</a>
3 Likes
4

Wow, do I feel dumb.
You were completely right @dpreston ! Can’t believe I missed this.
Thank you so much!

2 Likes
5

Don’t be!

Thanks for reporting and I have updated the docs to make it clear that method requires href.

4 Likes