2

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.

2
  • did you try moving ajax callbacks outside of turbolink:load callback? Commented Jun 8, 2018 at 3:45
  • @kasperite Yes. See 'I also tried...'. Commented Jun 8, 2018 at 15:07

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

1 Comment

doesn't worked for me sadly... Do you have any idea on why this happened?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.