Rails Rendering partial with form object

Question

I want to render a partial 'colordata' after selecting a :color from the drop down list as it involves Ajax. I am not able to observe any change in main page. Even form is undefined in colordata partial.

Here's my schema of model Order

create_table "orders", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8" do |t|
    t.string "design"
    t.integer "quantity"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "color"
    t.string "lotnumber"
    t.float "consumption", limit: 24
    t.string "number"
  end

Here's the ajax call

  $("select[name='order[color]']").change(function(){
     $.ajax({
       url: "colordata",
       type: "post",
       data:{
         "color": $(this).val()
       },
       dataType: JSON,
       success: function(data){
       }
     });
   });

Here's the controller.

def colordata
    request.POST.each do |key, value|
      @color = value
    end
    @lotdetail= Master::Yarn.where('color like?', @color)
    respond_to do |format|
      format.js
    end
  end

Here's the Colordata.js.erb

$(".lot").innerHTML += "<%= escape_javascript(render(partial: 'colordata'),locals: {form: form) %>"

Here's the partial _colordata.html.erb

<%= form.label :lotnumber %>
<%= form.collection_select(:lotnumber, @lotdetail, @lotdetail.lotnumber,@lotdetail.lotnumber,prompt: "Select the Yarn")%>

errors are

1. form is not define in _colordata.html.erb
2. Partial is not appending into the class lot.

Thanks in advance.

Answer 1

To append your partial with jquery, you can use the append method instead. locals should be define inside the render. So you can fix like that :

$(".lot").append("<%= escape_javascript(render(partial: 'colordata', locals: { form: form })) %>")