title: Ruby on Rails - Make an AJAX request and render the partial of the resulting model
body: <p>I have looked everywhere for an answer to my doubt, but none of them worked for me (I probably did something wrong).</p>
  
  <p>I am very new to Ruby/Ruby on Rails, so I do not know very much how things work.</p>
  
  <hr>
  
  <p>I have two models in my application</p>
  
  <ul>
  <li><p><code>Attribute name:string</code> and;</p></li>
  <li><p><code>Product name:string</code>.</p></li>
  </ul>
  
  <p>I do also have two controllers:</p>
  
  <ul>
  <li><p><code>attributes_controller</code> and;</p></li>
  <li><p><code>products_controller</code>.</p></li>
  </ul>
  
  <p>I also have the following view <code>../app/views/product_models/new.html.erb</code>. In this view, I want to be able to create an attribute and show it to the user right afterwards (using AJAX)</p>
  
  <pre><code>&lt;div id="attributes_list"&gt;
    &lt;%= render :partial =&gt; "attributes/attribute", :collection =&gt; @attributes, :as =&gt; :attribute %&gt;
  &lt;/div&gt;
  
  &lt;div id="new_attribute"&gt;
    &lt;strong&gt;Adicionar novo atributo&lt;/strong&gt; &lt;br /&gt;
    Nome: &lt;input type="text" class="name"&gt;&lt;br /&gt;
    &lt;span class="create_button"&gt;Criar&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>for this situation, I have the following jquery (in <code>../app/assets/javascripts/application.js</code>):</p>
  
  <pre><code>$(document).ready(function () {
      var new_attribute_div = $(document).find('#new_attribute')
      new_attribute_div.on('click', '.create_button', function () {
          // alert('funfou');
          $.ajax({
              url: '/attributes',
              type: 'POST',
              dataType: "script",
              data: {
                  name: new_attribute_div.find(".name").val()
              },
              success: function (data) {
                  $(document)
                      .find('#attributes_list')
                      .append("&lt;%= j render @attribute %&gt;");
  
                  new_attribute_div.find(".name").val("");
  
              },
              error: function (data) {
                  alert("error:" + data)
              }
          });
      });
  });
  </code></pre>
  
  <p>and my attributes_controller is just like this</p>
  
  <pre><code>class AttributesController &lt; ApplicationController
  
    def create
      @attribute = Attribute.new(attribute_params)
      @attribute.save
  
      respond_to do |format|
        format.html { redirect_to @attribute }
        format.js
        format.json
      end
    end
  end
  
  private
  def attribute_params
    params.permit(:name)
  end
  </code></pre>
  
  <p>The problem I am having is, when the following line of the jquery is executed</p>
  
  <pre><code>.append("&lt;%= j render @attribute %&gt;");
  </code></pre>
  
  <p>Instead of rendering the partial of the attribute, rails is rendering the string itself (<em>&lt;%= j render @attribute %></em>)</p>
  
  <p>What am I doing wrong? 
  How can I render the @attribute that is returned from the controller?</p>