Rails 5.1.4 Ajax issue after upgrade

Question

On my account.js.coffee I have this to see if Ajax events are called.

$(document).on 'ajax:success', 'form', (event) ->
 console.log 'success'

$(document).on 'ajax:error', 'form', (event) ->
 console.log 'error'

class AccountsController < ApplicationController
 def update
    respond_to do |format|
       if @account.update(home_params)
            format.html { redirect_to @account, notice: 'Home was successfully updated.' }
            format.json { render :show, status: :ok, location: @account }
            format.js
        else
            format.html { render :edit }
            format.json { render json: @account.errors, status: :unprocessable_entity }
            format.js
        end
    end
 end

end

When I submit my form remotely an Ajax event should be triggered, if there is an error should trigger the Ajax error, or when the object is been updated trigger the Ajax:success; but the Ajax success is trigger when there is an error on the form (empty attribute when the attribute must be presence), and when the object successfully updates no Ajax is trigger. The form has the remote:true attribute and on the application.js.coffee I have jQuery, rails-ujs on it. The only time I received a ajax:error event is when I purposely erase the object from my update.js.erb page to see if the Ajax:error is trigger. When rails was on 4.2 (before the update) everything was working just fine :(

This is the event I received on the console when the is an error on the form. CustomEvent {isTrusted: false, detail: Array, initCustomEvent: function, type: "ajax:success", target: , …}

update.js.erb

<% if @account.errors.any? %>
    <!-- Show errors in to the modal view -->
    <%= render :partial=>'layouts/js_errors', :locals=> { :target=> @account } %>

    <!-- Sending error alert -->
    $('#flash-alerts').html("<div class=\"alert alert-danger\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\"><i class=\"ace-icon fa fa-times\"></i></button><i class=\"ace-icon fa fa-check green\"></i>Something went wrong, please try again later</div>");
   timeOutAlert();
<% else %> 
   <!-- hidden the modals -->
   $('#myModal').modal('hide');
   $('#myModal .modal-title').html('');
   $('#myModal .modal-body').html('');

   <!-- Update The title of the accounts/_title from show.html.haml -->
   $('.page-header h1').html("<%= j render partial: 'title', locals:{account: @account} %>");

   <!-- Update the account block -->
   $('#account').html("<%= j render @account %>");

   <!-- Sending successfully alert -->
   $('#flash-alerts').html("<div class=\"alert alert-success\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\"><i class=\"ace-icon fa fa-times\"></i></button><i class=\"ace-icon fa fa-check green\"></i> Account was successfully updated.</div>");
   timeOutAlert();
<% end %>

So far, I found out that if you insert the form in a bootstrap (version 3) modal, then when you hit submit the form (remote: true) and it is successful, then the ajax:success callback won't be trigger. If the object rollback because an error (attribute can't be blank) then the ajax:success it's trigger. When I use the form on the accounts/edit.html.haml instead, then my Jquery validation is trigger, and the ajax:success is trigger when the object is updated as well. Thanks for your help.

Answer 1

Maybe this could help, according to the docs, Rails 5.1 introduced rails-ujs and dropped jQuery as a dependency. As a result this introduction causes changes to custom events fired during the request see: 3.5 Rails-ujs event handlers (edge).

According to jquery-ujs wiki, ajax:error is only trigged:

When processing a request failed on the server.
https://github.com/rails/jquery-ujs/wiki/ajax

This is why you always get ajax:success even if the form has a validation error.