Method: :delete is not working in multiple locations in my phoenix app

Phoenix Forum Questions / Help
1

At some point, I lost the ability to log out of a session as well as delete entries on my web app.

<%= link "Delete", to: model_path(@conn, :delete, model), method: :delete, data: [confirm: "Are you sure?"], class: "btn btn-danger btn-xs" %>

It also appears in other locations:

<%= link "Log out", to: user_session_path(@conn, :delete, @current_user), method: "delete" %></li>

The link is replaced with a “#” instead of a real link. Googling around identifies this as a client side javascript issue, which seems to make sense as the output from mix shows no activity when the buttons are pressed.

app.js has import "phoenix_html" included, as well as a set of multiple other scripts being updated on a per page basis per the outline in: https://blog.diacode.com/page-specific-javascript-in-phoenix-framework-pt-1

But that didn’t seem to have been the issue as after I did that modification the features worked. Just recently, anything associated with the delete method stopped working and I have no clue why.

2 Likes
2

What browser are you using and is JavaScript enabled? Have you tried a died serene browser? Is the JavaScript function associated with the on load of the link available? Can you see any messages in your browsers JavaScript console?

1 Like
3

I’ve used these browsers on linux: Chrome, Brave, Firefox
Also used brave and chrome on android: Chrome, Brave, Firefox
And on Windows 10: Chrome, Edge

None of them have an error in the javascript console, at least the ones I can check (windows 10 and linux).

<a data-csrf="[TOKEN edited out]" data-method="delete" data-to="/users/user_sessions/1" href="#" rel="nofollow">Log out</a> is the html element associated with the log out link.

I also tried switching that to a button but it did nothing.

In both production and dev environments the link fails to work. This is after an environment appropriate mix compile brunch build and mix phoenix.digest

I’m not sure what to look for the in the JS script that is in the sources on the browser menu. It’s minified. It’s possible that the error could be there but I don’t think I ever touched anything at all in the phoenix_html source. The import is called out in app.js, listed at the end of app.html.eex template right before the</body> tag.

There is some language in the minified js that the channel javascript is included, but a search on “method” brings up nothing and “delete” only turns up things which I do not know the import of:

f.register = f.define = function(e, o) {
    if ("object" == typeof e)
        for (var r in e)
            i.call(e, r) && f.register(r, e[r]);
    else
        t[e] = o,
        delete n[e],
        v(e)
}

and the other chunk of code:
this.map(s, function(e, t) { var n = a[e]; if (n) { var o = t.metas.map(function(e) { return e.phx_ref }); n.metas = n.metas.filter(function(e) { return o.indexOf(e.phx_ref) < 0 }), i(e, n, t), 0 === n.metas.length && delete a[e] } }),

1 Like
4

Did you update your dependencies recently? My suggestion is to nuke rm -rf node_modules in your current application and build it from scratch. Maybe a cache from old to new version is messing stuff up.

7 Likes
5

Thank you, Jose! That was it.

1 Like
6

I have the same problem, post deletion and session deletion does not work. I’ve spent more than a day on this issue,and there is no indication in logs or mix why this is the case. I reinstalled npm modules as suggested by Jose as well- no luck. Any one else facing this?

1 Like
7

You might want to try this in order:

cd assets && rm -rf node_modules
rm -rf deps
rm mix.lock
mix deps.get
cd assets && npm install

I deleted all node_modules and elixir deps and re-installed them.
Make sure your phoenix_html is up to date THEN run npm install

1 Like
8

Deleting mix.lock can have some dangerous side effects, please consider backing it up first… Or just using mix deps.update phoenix_html instead…

2 Likes
9

Interesting. Didn’t know that!
What kind of side effects could deleting mix.lock have?

1 Like
10

Thanks for the response. I tried these steps in order, but the issue remains same. On pressing ‘delete’, the link is appended with a “#” and nothing happens. Strange, because all other buttons (edit, show , new etc) work form the generated phoenix html, except delete.

1 Like
11

edit/show/new links are regular links that take you to another page.
delete links are treated as submitting a form behind the scenes. The way delete links work was changed in phoenix_html 2.10. I suspect that the version of phoenix_html you’re using is less than 2.9.X.
mix deps would list all packages and their versions. Double check that to make sure you have 2.10.X.

1 Like
12

Here is the output of mix dips. I’m using 2.10.4

phoenix_html 2.10.4 (Hex package) (mix)
locked at 2.10.4 (phoenix_html) d4f99c32
ok

1 Like
13

The same as doing an mix deps.update --all. You might end up with incompatible updates, due to some random dependency that does not adhere SemVer.

1 Like
14

followed by ‘npm install’ worked for me.

1 Like
15

Am facing the same issue, tried to follow this steps but havent succeeded yet. Am i missing something? :innocent:

16

I have the same issue tried everything, did anyone get this working?

17

What error message do you get on the server and on the client javascript console?

18

So I’m not getting an error messages at all?

19

If you are using the method delete with the phoenix_html form it will generate some elements in the DOM that register with javascript. What is that generated HTML, and is the javascript loading ‘after’ it is generated (bottom of the page, not the top)?

20

I have my JS code at the bottom, and the html is this

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2><%= dgettext("add_magnet", "Add Magnet")%></h2>
            <hr>

            <div class="card">
                <div class="card-body text-default-light style-primary">
                </div>
            </div>
        </div>
        <%= for magnet <- @magnets do %>
            <div class="col-md-6">
                <div class="card card-bordered style-primary">
                    <div class="card-head">
                        <div class="tools">
                            <div class="btn-group">
                                <%= link to: magnet_path(@conn, :edit, magnet), class: "btn btn-icon-toggle btn-refresh" do %>
                                    <span class="md md-edit"></span>
                                 <% end %>
                                 <%= link to: magnet_path(@conn, :delete, magnet), method: :delete, data: [confirm: "Are you sure?"], class: "btn btn-icon-toggle btn-refresh" do %>
                                     <span class="md md-delete"></span>
                                 <% end %>
                            </div>
                        </div>
                        <%= link to: magnet_path(@conn, :show, magnet), class: "" do %>
                         <header><i class="fa fa-fw fa-tag"></i><%= magnet.title %></header>
                        <% end %>
                    </div>
                    <!--end .card-head -->
                    <div class="card-body style-default-bright">
                        <p>
                            <%= magnet.description %>
                        </p>
                    </div>

                </div>
            </div>
            <% end %>



    </div>

</div>

<div class="section-floating-action-row">
 <%= link to: magnet_path(@conn, :new), class: "btn ink-reaction btn-floating-action btn-lg btn-primary"  do %>
  <i class="md md-add"></i>
 <% end %>
</div>

I am getting the following errors in my console on the browser but this is with a 3rd party lib

codemirror.min.js:40 Uncaught TypeError: Cannot read property 'value' of undefined
    at Function.CodeMirror.fromTextArea (VM192 codemirror.min.js:40)
    at init.setCodeMirror (editormd-perview.js:716)
    at editormd-perview.js:565
    at HTMLScriptElement.script.onload (editormd-perview.js:4166)