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
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.
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.