Why I get "Uncaught SyntaxError: Unexpected token ILLEGAL"? - ruby-on-rails

Question

Could someone help me please?
I've tried to move js code from view to separate js file, but I got many errors like this: Uncaught SyntaxError: Unexpected token ILLEGAL. Why it happened?
My js code for high charts:
var chart;
var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect};
var monthNames = #{Date::MONTHNAMES.to_json}
var currentView = '#{#current_view}';
var currentMonth = #{#current_month};
var CURRENT_YEAR = #{Date.current.year};
var currentYear = #{#current_year};
var currentIndex = #{#current_index};
var currentInterval = '#{#current_interval}';
var seriesColors = #{{ "Applicants" => status_color(20), "Inquiries" => status_color(10), 'Conversion Rate' => '#7FC315', 'RSVPs'=> '#937CB0'}.to_json}
var registrantsData = #{#registrants_data.to_json};
var applicantsData = #{#applicants_data.to_json};
var pendingData = #{#pending_data.to_json};
var toursData = #{#tours_data.to_json};
var conversionData = #{#conversion_data.to_json};
var toursRequestedCount = #{#tours_requested.count}
$(document).ready(function() {
getDataForView = function() {
if (currentView == 'Applicants') { return applicantsData; }
if (currentView == 'Inquiries') { return registrantsData; }
if (currentView == 'Conversion Rate') { return conversionData; }
if (currentView == 'RSVPs') { return toursData; }
}
getSeriesColor = function() {
return seriesColors[currentView];
}
changeChartMonth = function(increase) {
if (increase && currentIndex < 23) { currentIndex = currentIndex + 1 }
if (!increase && currentIndex > 1) { currentIndex = currentIndex - 1 }
switchChartSeries();
}
selectedYear = function() {
year = currentIndex < 12 ? CURRENT_YEAR - 1 : CURRENT_YEAR;
return year;
}
updateTextIndication = function() {
var text = '';
$('.nav-arrow').hide();
if (currentInterval == 'days') {
text = monthNames[currentIndex % 12 + 1] + ' ';
if (currentIndex > 1) { $('.left-nav-arrow').show(); }
if (currentIndex < 23) { $('.rigth-nav-arrow').show(); }
$('.year').hide();
year = selectedYear();
text = text + year;
$('strong.current_chart_date').text(text);
$('span.current_chart_view').text(currentView + ' for:');
$('strong.current_chart_date').show();
} else {
$('strong.current_chart_date').hide();
$('.left-nav-arrow').hide();
$('.rigth-nav-arrow').hide();
$('.year').show();
}
$('.chart_interval a').removeClass('active');
$('.chart_interval a.' + currentInterval).addClass('active');
}
setYear = function(year) {
if (year == CURRENT_YEAR) {
currentIndex = 12;
} else {
currentIndex = 11;
}
$('a.year').removeClass("active_year");
$("a[year="+year+"]").addClass("active_year");
}
switchChartSeries = function() {
var dataSource = getDataForView();
var seriesType = 'column';
var categories;
data = dataSource[currentIndex];
if (currentInterval == 'months') {
categories = monthCategories;
temp = [];
for (var i=0; i<dataSource.length; i++) {
if (dataSource[i].drilldown.year == selectedYear()) {
temp.push(dataSource[i]);
}
}
dataSource = temp;
}
if (currentInterval == 'days') {
categories = data.drilldown.categories;
dataSource = data.drilldown.data;
}
updateTextIndication();
updateNavTabs();
chart.xAxis[0].setCategories(categories);
while(chart.series.length > 0)
chart.series[0].remove(true);
if (currentView == 'Conversion Rate') {
seriesType = 'area';
chart.yAxis[0].setExtremes(0, 100);
} else {
seriesType = 'column'
var maxVal = 0
if (currentInterval == 'days') {
maxVal = Math.max.apply(Math, dataSource)
} else {
for (var i = 0; i < dataSource.length; i++) {
if (dataSource[i].y > maxVal) {
maxVal = dataSource[i].y
}
}
}
if (maxVal < 3) {
chart.yAxis[0].setExtremes(0, 3)
} else {
chart.yAxis[0].setExtremes(0, null)
}
}
chart.addSeries({
name: currentView,
type: seriesType,
data: dataSource,
color: getSeriesColor(),
borderRadiusTopLeft: 3,
borderRadiusTopRight: 3,
marker: {
symbol: 'circle',
fillColor: 'white',
lineColor: '#7FC315',
lineWidth: 3
},
// fillColor: '#7FC315',
// fillOpacity: 0.9,
lineWidth: 1
});
}
updateNavTabs = function() {
var display = function ($target, count) {
var dataKey = ((count <= 0) ? "zero" : (count <= 1) ? "one" : "many");
var title = $target.closest("li").data(dataKey)
$target.text(count);
$target.closest("a").text(" " + title).prepend($target);
}
display($('strong.applicants'), calculateNumber(applicantsData));
display($('strong.registrants'), calculateNumber(registrantsData));
$('strong.conversion').text(calculateConversation(conversionData) + '%');
}
getDataSource = function(data) {
var dataSource = [];
if (currentInterval == 'days') {
dataSource = data[currentIndex].drilldown.data;
} else {
for (var i=0; i<data.length; i++) {
if (data[i].drilldown.year == selectedYear()) {
dataSource = dataSource.concat(data[i].drilldown.data);
}
}
}
return dataSource;
}
calculateNumber = function(data) {
var dataSource = getDataSource(data);
var number = 0;
for (var i=0; i<dataSource.length; i++) {
number += dataSource[i];
}
return number;
}
calculateConversation = function(data) {
var dataSource = getDataSource(data);
var number = 0;
var length = 0;
for (var i=0; i<dataSource.length; i++) {
if (dataSource[i] != 0) {
number += dataSource[i];
length ++;
}
}
if (length != 0)
number = (number/length).toFixed(0);
return number;
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'pipeline',
type: 'column',
spacingTop: 10
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: #{(1..Time::days_in_month(Date.current.month)).map{ |d| d }.inspect }
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: null
}
},
tooltip: {
shadow: true,
useHTML: true,
formatter: function() {
var title;
if (currentInterval == 'months') {
titleInside = '<b>' + monthNames[monthCategories.indexOf(this.x) + 1] +'</b><br/>'
} else {
titleInside = '<b>' + monthNames[currentIndex % 12 + 1] + ' ' + this.x +'</b><br/>'
}
title = '<div class="highChartsTooltip">'+ titleInside + this.series.name + ': ' + Math.round(this.y) + '</div>'
if (currentView == 'Conversion Rate') {
title = '<div class="highChartsTooltip">'+ titleInside + this.series.name + ': ' + Math.round(this.y) + '%' + '</div>'
}
return title
}
},
plotOptions: {
area: {
fillOpacity: 0.05,
point: {
events: {
click: function() {
chartPointClick(this)
}
}
}
},
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
chartPointClick(this)
}
}
}
}
},
series: []
});
chartPointClick = function(sender) {
var drilldown = sender.drilldown;
if (drilldown) {
currentInterval = 'days';
if (currentIndex < 12) {
currentIndex = drilldown.month - 1;
} else {
currentIndex = 12 + drilldown.month - 1;
}
switchChartSeries();
} else {
var start_date = new Date(selectedYear(), currentIndex % 12, sender.x + 1);
var end_date = new Date(selectedYear(), currentIndex % 12, sender.x + 2);
var url = '#{admin_students_path}'
if( currentView == "Inquiries" ){
var search_type = 'created';
var status_scope = 'inquiries_students';
} else{
var search_type = 'submitted';
var status_scope = 'applied_students';
}
var params = encodeURI('display_all=true&default=') + status_scope + encodeURI('&result_type=and&search[') + search_type + encodeURI('_at_gteq]=') + $.datepicker.formatDate('yy-mm-dd', start_date) + '&' +
encodeURI('search[') + search_type + encodeURI('_at_lteq]=') + $.datepicker.formatDate('yy-mm-dd', end_date);
document.location.href = url + '?' + params
}
}
switchChartInterval = function(sender, interval) {
$('.chart_interval a').removeClass('active')
sender.addClass('active');
currentInterval = interval;
if (interval == 'months') {
year = selectedYear();
setYear(year);
}
switchChartSeries();
}
$('.boxes li').click(function() {
var $this = $(this);
var proposedView = $this.data('view');
if (currentView != proposedView) {
currentView = proposedView;
if (currentView == 'RSVPs') {
$('#pipeline').hide()
$('#rsvps').show()
$('.months-filter').hide()
} else {
$('#rsvps').hide()
$('#pipeline').show()
$('.months-filter').show()
switchChartSeries();
}
$('.boxes li').removeClass('active');
$this.addClass('active');
}
return false;
})
$('.boxes li[data-view="' + currentView + '"]').addClass('active');
$('#programs').change(function() {
var program = $(this);
$.ajax({
url: "#{admin_dashboard_change_program_path}",
data: {
program_id: program.val(),
current_view: currentView,
current_month: currentIndex % 12 + 1,
current_year: selectedYear(),
current_interval: currentInterval
},
beforeSend: function() {
program.hide();
$('#programs_spinner').show();
},
complete: function() {
switchChartSeries();
if($('.boxes li.active').data('view') === 'RSVPs'){
$('#pipeline').hide()
$('#rsvps').show()
$('.months-filter').hide()
}
}
})
})
switchChartSeries();
});
Thank a lot for help guys!

Answer 1

The #{...} in here
var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect};
is ruby code: it will only work in ruby. it's not valid javascript on it's own: when it runs through the erb interpreter it will generate (hopefully) valid js.
You can do it in a js.erb file for example (or an html.erb file for that matter) because the .erb file is evaluated in ruby. But you can't do it in a plain js file.