javascriptjqueryruby-on-railsactiveadminrails-ujs

ActiveAdmin breaks Rails JQuery UJS. Unobtrusive JavaScript ajax:success and ajax:error are not firing or being called


I have the following

=form_for @issue, remote: true, html: {class: 'form-inline'} do |f|
  ...

And

<form class="form-inline" id="new_issue" action="/issues" accept-charset="UTF-8" data-remote="true" method="post">

And

$(document).on 'turbolinks:load', ->
  $("#new_issue").on("ajax:success", (e, data, status, xhr) ->
    console.log 'data='+data
    console.log 'status='+status
    console.log 'xhr='+xhr
    $("#new_issue_success").append(xhr.responseText).show()
    $("#new_issue_error").hide()
  ).on("ajax:error", (e, xhr, status, error) ->
    console.log 'error='+error
    console.log 'status='+status
    console.log 'xhr='+xhr
    $("#new_issue_error").append("ERROR: #{error}").show()
    $("#new_issue_success").hide()
  ).on('ajax:complete', ->
    console.log 'complete'
  )

And

  def create
    issue = Issue.new issue_params
    issue.validate_user_entry
    if issue.errors.empty? && issue.save # can't use #valid? because that clears errors and runs only standard Rails validations!
      render json: issue, status: :created
    else
      render json: issue.errors.full_messages, status: :unprocessable_entity
    end

I get this in my browser console

POST http://localhost:3000/issues 422 (Unprocessable Entity)
XHR failed loading: POST "http://localhost:3000/issues".

And this in my Rails server console

Started POST "/issues" for 127.0.0.1 at 2018-06-07 22:29:34 -0400
Processing by IssuesController#create as JS
  Parameters: {"utf8"=>"√", "issue"=>{"first_name"=>"", "last_name"=>"", "city"=>"", "issue"=>""}, "commit"=>"Submit"}
Completed 422 Unprocessable Entity in 1ms (Views: 0.2ms | ActiveRecord: 0.0ms)

So why isn't it calling the Ajax callback and printing out the results on the console? Whether it succeeds or fails, I expected it to show the results.

It's taken straight from the guide: http://guides.rubyonrails.org/v5.0/working_with_javascript_in_rails.html#form-for

I also tried

$(document).on("ajax:success", (e, data, status, xhr) ->
  ...
).on "ajax:error", (e, xhr, status, error) ->
  ...

I verified the event is listening on the element in the browser

enter image description here

I have something almost exactly like this in another Rails project that works. I downgraded to Rails 5.0.6 like the other project but it didn't help.

Rails 5.0.7, JQuery 3.3.1


I've discovered this is caused by ActiveAdmin. I have entered a bug for it. When I rename active_admin.js.coffee to active_admin.js.coffee.xxx then it works, but of course breaks ActiveAdmin then. I tried adding //= stub active_admin to application.js, but for some reason jquery_ujs would not load. I viewed the source of the page and /assets/jquery_ujs.self-784... would no longer appear, despite //= require jquery_ujs being in application.js.

How can I have both ActiveAdmin and UJS? I don't need UJS on /admin pages.


Solution

  • I fixed it by moving active_admin.js.coffee to vendor\assets\javascripts\active_admin.js.coffee. Now the /admin works and the remote form at / works. Not obvious at all. Wish they put this in the docs, or better yet, just not interfere with standard Rails.