Ajax事件未触发form_for

Question

I have a little issue with events in JS for a form in Rails. In fact I done a form, but events are not fired when the form is submitted, I don't understand what I did wrong :/

Here is my form:

<%= form_for(@server, remote: true, method: "get", url: "/servers", html: { id: "edit_server_form" }) do |f| %>
Name: <%= f.text_field :name, class: "form-control" %>
<%= f.submit %>
<% end %>

And my JS:

edit_server_form = $("#edit_server_form")
edit_server_form.bind 'ajax:before', (e) ->
    console.log 'ajax:before'
edit_server_form.bind 'ajax:success', (event, data, status, xhr) ->
    console.log 'ajax:success'
edit_server_form.bind 'ajax:failure', (xhr, status, error) ->
    console.log 'ajax:failure'
edit_server_form.bind 'ajax:error', (xhr, status, error) ->
    console.log 'ajax:error'
edit_server_form.bind 'ajax:complete', ->
    console.log 'ajax:complete'

None of these events is triggered but the query is sent :/

Thanks for your help !

Answer 1

This looks like it could be to do with your JQuery delegation :

#app/assets/javascripts/application.js
$(document).on("ajax:before", "#edit_server_form", (e) ->
    console.log 'ajax:before'
).on("ajax:success", "#edit_server_form", (event, data, status, xhr) ->
    console.log 'ajax:success'
).on("ajax:failure", "#edit_server_form", (xhr, status, error) ->
    console.log 'ajax:failure'
).on("ajax:error", "#edit_server_form", (xhr, status, error) ->
    console.log 'ajax:error'
).on("ajax:complete", "#edit_server_form" ->
    console.log 'ajax:complete'

--

The problem you have isn't a lack of request, but its logging.

The " Beginning " message suggests that a request is being fired.

Because Turbolinks causes issues with the DOM (it refreshes the body without updating the JS / assets), you have to delegate from an element which is always going to remain present. We use document , although it's quite inefficient.

---

You'd also do well to use the following with your form:

<%= form_for @server, remote: true, url: servers_path, method: "get", html: { id: "edit_server_form" } do |f| %>