Почему я получаю сообщение «Uncaught SyntaxError: Неожиданный токен ILLEGAL»?

Question

Не мог бы кто-нибудь помочь мне, пожалуйста? Я попытался переместить js-код из вида в отдельный файл js, но у меня появилось много таких ошибок: Uncaught SyntaxError: Неожиданный токен ILLEGAL. Почему это случилось?

Мой код расслоение плотной высоких графиков:

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(); 

});

Большое спасибо за помощь ребятам!

Answer 1

#{...} здесь

var monthCategories = #{Date::ABBR_MONTHNAMES[1..12].inspect}; 

рубин код: он будет работать только в рубин. он недействителен javascript на своем собственном: когда он проходит через интерпретатор erb, он будет сгенерировать (надеюсь) действительный js.

Вы можете сделать это в файле js.erb (например, файл html.erb), поскольку файл .erb оценивается в ruby. Но вы не можете сделать это в простом js-файле.