title: Rails 6 + UJS: make ajax call on blur without jQuery
body: <p>I have a form with two input text fields. The datalist for the second field needs to be populated when the first field has a value. I have everything working as I want except I can't work out how to fire the ajax call when the first field loses focus (I have put in a link I can click to test everything else is working.)</p>
  <p><strong>org.rb</strong></p>
  <pre><code>class Org &lt; ApplicationRecord
    has_many: competitions
  end
  </code></pre>
  <p><strong>_form.html.haml</strong></p>
  <pre><code>  .field
      = f.label &quot;Competition:&quot;
      League:
        = text_field_tag :org, @match.org&amp;.name, list: &quot;orgs&quot;, size: 60 # onblur: ?
      Division:
        = text_field_tag :competition, @match.competition&amp;.name, list: &quot;comps&quot;, size: 30
  
    %datalist#orgs
      = options_for_select Org.all.map(&amp;:name).sort
  
    %datalist#comps
      = render &quot;comps&quot;
  </code></pre>
  <p><strong>_comps.html.haml</strong></p>
  <pre><code>= options_for_select @comps.map(&amp;:name).sort
  </code></pre>
  <p><strong>controller</strong></p>
  <pre><code>  def comps
      org = Org.find_from_identifier(params[:org])
      @comps = org&amp;.competitions || []
      respond_to do |format|
        format.js
      end
    end
  </code></pre>
  <p><strong>comps.js.erb</strong></p>
  <pre><code>comps = document.getElementById(&quot;comps&quot;)
  comps.innerHTML = &quot;&lt;%= j render &quot;comps&quot; %&gt;&quot;
  </code></pre>
  <p>If I put this line into the form everything works as I expect when I click it:</p>
  <pre><code>= link_to 'test', update_comps_path(org: 'scottishfootballleague'), remote: true
  </code></pre>
  <p>(Routes.rb has <code>get 'matches/comps', to: &quot;matches#comps&quot;, as: :update_comps</code> in it.)</p>
  <p>So my question is how do I do what that link does when the first input field loses focus?</p>
  <p>I tried putting <code>onblur: 'updateComps()'</code> into the field and using</p>
  <pre><code>:javascript
    function updateComps() {
      var org = document.getElementById(&quot;org&quot;).value
      fetch(&quot;/matches/comps?org=&quot; + org )
    }
  </code></pre>
  <p>This works in the sense that the call gets made at the right time but I'm missing whatever magic <code>data-remote: true</code> attaches to the link to make it an ajax call that works in the rails world. Am I missing a Rails helper? Or do I need to instruct fetch() with what to do with the js that gets returned?</p>
  <p><strong>Edit:</strong> I've got as far as working out that the response to the fetch consists of the javascript I expect, and which presumably needs to be executed. I've tried this:</p>
  <pre><code>:javascript
    function updateComps() {
      var org = document.getElementById(&quot;org&quot;).value
      fetch(&quot;/matches/comps?org=&quot; + org,
        { credentials: &quot;include&quot;  })
      .then(response =&gt; {
        eval(response.text());
      })
    }
  </code></pre>
  <p>There are two problems with this. 1) it doesn't work 2) this doesn't seem very rails-like.</p>
  <p><strong>Update (with an answer)</strong></p>
  <p>I got the fetch approach working and executing the server generated js:</p>
  <pre><code>function updateComps() {
      var org = document.getElementById(&quot;org&quot;).value
      fetch(&quot;/matches/comps.js?org=&quot; + org,
        { credentials: &quot;include&quot;  })
      .then(response =&gt; response.text())
      .then(text =&gt; {
        eval(text)
      })
    }
  </code></pre>
  <p>I'm still not at all sure what the &quot;Rails way&quot; of doing this is. Rails.ajax() seems to have been removed (or is only available 'internally') according to some <a href="https://github.com/rails/rails/issues/38191" rel="nofollow noreferrer">github discussions</a>.</p>