Question

I’m getting the below error when using jquery ui slider while update via ajax:

ActionView::Template::Error (undefined method `model_name' for Fixnum:Class):
1: $("#x_stock_list").html("<%= escape_javascript(render(@date_range)) %>");
app/views/home/index.js.erb:1:in`_app_views_home_index_js_erb__1074827181885368454_2504361900'

My jquery slider function looks like this:

<script type="text/javascript">
$(function() {
    $( "#x_slider" ).slider({
    range: true,
    step: 1,
    min: 1,
    max: 52,
    values: [1, 52 ],
    stop: function(event, ui) {
       var url_param = $('#x_slider').slider('option', 'values');
       $('#x_low_selected').html(ui.value);      
       $.ajax({
         type: "GET",
         data: ({ weeks: url_param[0] }),
         url: $(this).attr('data-href'),
         dataType: 'script'
       });
     }
   });
 });
</script>

In my home controller, I have this:

 def index
    unless params[:weeks]
      @date_range = 4
    else
      @date_range = Home.filter(params[:weeks])
    end
  end

And in my model:

  def self.filter(weeks)
    timeago = weeks.to_i
  end 

Finally, in my index.js

 $("#x_stock_list").html("<%= escape_javascript(render(@date_range)) %>");

When I drag the slider, the value is displayed fine:

 Parameters: {"weeks"=>"8", "_"=>"1327514933685"}

However it throws that error.

If I manually navigate the url http://localhost:3000/?weeks=9 everything works fine.

Can someone explain what I’m doing wrong here please?

Answer 1

The render method is not necessary here it’s purpose is to render partials, files or text. You are passing the number 4.

You don’t need to escape_javascript for a number either as it expects a class that responds to gsub.

#From the above link:    
result = javascript.gsub(%r(\\|<\/|\r\n|\3342\2200\2250|[\n\r"'])/) {|match| JS_ESCAPE_MAP[match] }
javascript.html_safe? ? result.html_safe : result

Either use:

$("#x_stock_list").html("<%= @date_range %>");

Or convert it to a string:

$("#x_stock_list").html("<%= @date_range.to_s %>");

For highcharts in the past, I have done something along the lines of:

$.getJSON('traffic_sources.json', null, function(data) {
    pie_chart("traffic_sources_graph", data.traffic_sources);
});

function pie_chart(div, data)
{
   new Highcharts.Chart({
      chart: {
         renderTo: div,
         backgroundColor: '#dddddd'
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: data
      }]
   });
}