ruby on rails - rails4 ajax returning the text inside my .js.erb file -

i trying set ajax dropdown replace contents of 2 charts/graphs based on dropdown. problem instead of replacing partial, ends rendering in js.erb file.

in view have:

<h3 class="att">index markets     <%= form_tag(chart_path(:format=>:js), {:method=>"get", :remote=> true})  %>             <%= hidden_field_tag :id, params[:id]%>             <%= select_tag(:sector, options_for_select([['all sectors',3], ['equities',4], ['fixed income',5], ['currencies',6], ['commodities',7]]),             onchange: 'this.form.submit()')%>      <% end %> </h3>  <div id="chart_partial">         <%= render partial: "chart", locals: {risk:@mkt_risk, ret: @mkt_ret}%> </div> 

in controller:

  def update_chart     num = params[:sector].to_i     = ['sp','nq','dj','nk','sx','dx','se','tu','fv','ty','us','bs','bm','bl','lg','ec','jy','bp','ad','cd','sf','cl','ng','gc','si','hg','pl','c','w','s','lh','lc']     mkt_arr = [[],[],[],all,all[1..6],all[7..14],all[15..20],all[21..-1]]     mkts=mkt_arr[num]     data = attribution.where(:index_id=>params[:id],:type=>num)     risk = data.pluck(:risk).first     ret = data.pluck(:return).first     @mkt_risk = mkts.zip(risk)     @mkt_ret = mkts.zip(ret)      respond_to |format|         format.js{         }     end   end 

then in update_chart.js.erb have:

 $("#chart_partial").html("<%= escape_javascript(render partial: 'chart', locals: {risk:@mkt_risk, ret: @mkt_ret} ) %>");  

my partial _chart.html.erb is:

<div class="chart2">     <%= pie_chart risk, :library=>{:is3d => true,:title=>'realized volatility'} %> </div> <div class="chart3">     <%= column_chart ret, :library=>{:title=>'annualized returns'}%> </div> 

my output looks contents of js file chart partial calculated on white background in plain text.

$("#chart_partial").html("\n \n loading...\n</div>\n\n new chartkick.piechart(\"chart-1\", [[\"tu\",0.105915369876919],[\"fv\",0.109578737820998],[\"ty\",0.113233218167653],[\"us\",0.110792736994865],[\"bs\",0.128625046761138],[\"bm\",0.132789248798581],[\"bl\",0.137079687448451],[\"lg\",0.161985954131393]], {\"library\":{\"is3d\":true,\"title\":\"realized volatility\"}});\n</script>\n\n</div>\n\n \n loading...\n</div>\n\n new chartkick.columnchart(\"chart-2\", [[\"tu\",0.00197521267400713],[\"fv\",0.00289326291991543],[\"ty\",0.00364311932366435],[\"us\",0.00329300336431948],[\"bs\",0.00284554054267638],[\"bm\",0.00533162857564418],[\"bl\",0.0058341286792607],[\"lg\",0.00432347733360738]], {\"library\":{\"title\":\"annualized returns\"}});\n</script>\n\n</div>");

it turns out

 onchange: 'this.form.submit()')%> 

portion of code causing request not sent ajax remote true.

once changed worked:

onchange: "$(this).parent('form').submit();")%> 

i have no idea why though, if can explain appreciated