Ytukyg

I've looked at many of the other answers to this question, and none work for me.

Given this form:

<form data-remote="true" method="POST" accept-charset="UTF-8" action="/admin/audiences/search/industry.js">

  <div class="form-group">

    <input data-target="lookup.value" type="text" class="form-control" id="q" name="q" placeholder="Start typing to search...">

  </div>

</form>

Pressing return after typing in the field gives this error in the console: Resource interpreted as Document but transferred with MIME type text/javascript, and the correct javascript is rendered as text in the browser, rather than being executed as something with data-remote='true' is expected to be.

The server response is:

Started POST "/admin/audiences/search/industry.js" for 127.0.0.1 at 2018-11-19 10:29:04 -0500

Processing by Admin::AudiencesController#search as JS

  Parameters: {"q"=>"a", "type"=>"industry"}

  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]

  ↳ /Users/timsullivan/.rvm/gems/ruby-2.5.1/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98

   (36.6ms)  SELECT DISTINCT "salesforce"."account"."industry" FROM "salesforce"."account" WHERE (industry ilike '%a%')

  ↳ app/controllers/admin/audiences_controller.rb:89

  Rendering admin/audiences/search.js.erb

  Rendered admin/audiences/search.js.erb (0.5ms)

Completed 200 OK in 90ms (Views: 12.4ms | ActiveRecord: 37.1ms)

Note that the server properly recognizes that it's a JS request, and is returning a JS response, and even the browser is recognizing that it's getting JS, it's just rendering it as a document.

Other UJS elements on the page work fine, it's just this one, so rails_ujs is working properly, at least sometimes. The worst part is that this USED to work before I made some changes, and undoing those changes hasn't fixed the problem.

As with so many of my problems, recently, this one is embarrassing:

Nested HTML forms: you can't have them.

I mean, I knew this, but the form from the question is inserted dynamically into the page, and it happens to fall within a form in this case. So, it's not getting properly hooked by the UJS stuff, and sends the request without AJAX at all.

On the upside, I now know more about how UJS works than any mortal should.