Delete Method does not work without Brunch

The browser does not natively support delete requests so for them to work you will need to include the Phoenix HTML Javascript file (phoenix_html/priv/static/phoenix_html.js at main · phoenixframework/phoenix_html · GitHub)

In removing brunch you will have also removed the mechanism through which this file was added previously. Load it on the page through a method of your choice and delete link will work again.

Except you can set the delete method in the form, you don’t need javascript at all. What the javascript is used for is the ‘are you sure’ question of it, which you can leave out if you don’t need it and/or want to get rid of javascript (you can emulate it well enough via CSS and DOM nodes anyway as I’ve done at work).

What if you are submitting the form via a link, though? For example, a link that triggers a delete request? I think then you would still need the JS.

As per the HTML5 standards, raw links only method is GET (never PUT/POST/DELETE/etc… though they can potentially cause a HEAD or OPTION request), and raw links should not make effectful changes into a system, only forms should cause effectful changes.

thank you for response,can you explain this ? i am new to the web programming specially in front end

The phoenix_html ‘delete’ button function actually just makes a form that does nothing when clicked, it instead delegates the functionality to javascript to cause a popup box to ask if you are sure you want to delete it and if the user clicks Ok then it sends the command. I really don’t like that pattern as then it won’t work when I’m in, for example, elinks (as I often am), so they just don’t work for me. Using a proper form with just CSS to fix it up and ask a question on first expansion is far more reliable and ‘safe’.

if possible send me example about this , i dont like to use or see magic codes in my program and the delete link which generated by phoenix confuses me
or show me a way to dont use the phoenix_html.js

This is my delete button that I use:

 @doc """
  This must not be inside of another form!
  """
  def delete_button(path), do: delete_button(path, :raised, [])
  def delete_button(path, btn_type) when is_atom(btn_type), do: delete_button(path, btn_type, [])
  def delete_button(path, opts) when is_list(opts), do: delete_button(path, :raised, opts)
  def delete_button(path, btn_type, opts) do
    {form, opts} = Keyword.pop(opts, :form, [])
    {form_class, form} = Keyword.pop(form, :class, "")
    form = Enum.map(form, fn {k, v} -> ~E{ <%= dasherize(k) %>="<%= v %>"} end)
    opts = opts ++ [do: "Delete"]
    opts = Keyword.put(opts, :class, "btn--red #{opts[:class]}")
    ~E"""
    <form action="<%= path %>" class="link <%= form_class %>" method="post"<%= form %>>
      <input name="_method" type="hidden" value="delete">
      <input name="_csrf_token" type="hidden" value="<%= get_csrf_token() %>">
      <%= button(:submit, btn_type, opts) %>
    </form>
    """
  end

And if I want an ‘are you sure’ kind of thing then I instead just put it inside a pure CSS collapsible element that I use here with the title of it as something like ‘Dangerous options’ or whatever and the delete button inside of it, so it first has to be expanded then the delete button can be clicked or so.

thank you bro

Just for clarity, this is the important bit of it. It is a form with the action being the path to delete to, the method is ‘post’ (just because browsers don’t support non get/post methods very well), but then you override the method with the hidden input named _method with it’s value set to delete, and of course a CSRF token as all good forms should have, and the button to actually submit the delete form request.