title: Using js.erb file to change the content of an HTML element in Rails 6
body: <p>I'm trying to use AJAX to replace the inner HTML of a div element when I press a button. The div should change to a simple form like this, which will create a &quot;contribution&quot; resource when filled out:</p>
  <pre><code>&lt;%# ???.html.erb %&gt;
  
  &lt;h2&gt;Make a contribution:&lt;/h2&gt;
  &lt;%= form_with(model: [ @event, @event.contributions.build ], local: true) do |form| %&gt;
    &lt;p&gt;
      &lt;%= form.label :text %&gt;&lt;br&gt;
      &lt;%= form.text_field :text %&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;%= form.submit %&gt;
    &lt;/p&gt;
  &lt;% end %&gt;
  </code></pre>
  <p>I'm still new to Rails, but I've managed to use <a href="https://www.rubyguides.com/2019/03/rails-ajax/" rel="nofollow noreferrer">this tutorial</a> to get partway there. So far, I've written something like this:</p>
  <pre><code>// contribution_script.js
  $(document).on('turbolinks:load', function() {
      $('[data-js-new-contribution]').click(function(event){
          event.preventDefault();
          divElement = ... // get the div element
          $('#' + divElement.id).html(&quot;&lt;%= j (render partial: '???') %&gt;&quot;);
      });
  });
  </code></pre>
  <p>This does successfully replace the content of the div, but since this is in a .js file rather than a js.erb file, it doesn't process the Ruby code and simply changes the div to the raw string.</p>
  <p>Here's what the tutorial says about using .js.erb files:</p>
  <blockquote>
  <p>Put this code in a file with an extension of .js.erb, with the name of
  the current action (like create.js.erb) &amp; inside the views folder.</p>
  <p>On the controller you can render this view just like any other view.</p>
  </blockquote>
  <p>This is confusing to me: I get that my .js.erb file has to go somewhere in my views folder, but what is my &quot;current action?&quot; The page where this div will be displayed comes from views/events/index.html.erb, so I guessed that my current action is &quot;index&quot; in events. Based on <a href="https://stackoverflow.com/questions/60900787/how-to-use-js-erb-views-in-rails-6">this Stack Overflow question</a>, I wrote the following in my events controller:</p>
  <pre><code>def index
      @events = Event.all
      respond_to do |format|
          format.html
          format.js
      end
  end
  </code></pre>
  <p>Then I took the JavaScript code above, renamed it &quot;index.js.erb,&quot; and put it in my views/events folder. This doesn't seem to do anything. So, how do I make this work? Thanks for your time!</p>
  <p>Bonus question: once I do get the js.erb file working, how can I actually render the form from an html.erb file? I looked at <a href="https://stackoverflow.com/questions/11127934/rendering-partial-in-js-erb-file">this question</a>, but I'm still unsure how to set up the partial so it will have the necessary information about the event which the contribution will be added to.</p>