Question

我按照本教程http://pullmonkey.com/2008/03/30/dynamic-select-boxes-ruby-on-rails/ 并整合了

的高图示例

这是控制器：

class TestItController < ApplicationController
  def index
    @genres  = Genre.find(:all)
    @artists = Artist.find(:all)
    @songs   = Song.find(:all)
  end

  def update_artists
    # updates artists and songs based on genre selected
    genre = Genre.find(params[:genre_id])
    artists = genre.artists
    songs   = genre.songs

    render :update do |page|
     page.replace_html 'artists', :partial => 'artists', :object => artists
     page.replace_html 'songs',   :partial => 'songs',   :object => songs
    end
  end

  def update_songs
    # updates songs based on artist selected
    artist = Artist.find(params[:artist_id])
    songs  = artist.songs

    render :update do |page|
     page.replace_html 'songs', :partial => 'songs', :object => songs
    end
  end
end

这里的型号：

class Genre < ActiveRecord::Base
  has_many :artists
  has_many :songs, :through => :artists
end
class Artist < ActiveRecord::Base
  has_many :songs
end

以下是视图：index.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="contain" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
$(function () {
$('#contain').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: 'Browser market shares at a specific website, 2014'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
        ]
    }]
});
});
</script>    



<%= collection_select(nil, :genre_id,  @genres,  :id, :name,
                  {:prompt   => "Select a Genre"},
                  {:onchange => "#{remote_function(:url  => {:action => "update_artists"},
                                                   :with => "'genre_id='+value")}"}) %>

<div id="artists"><%= render :partial => 'artists', :object => @artists %></div>
<div id="songs"><%= render :partial => 'songs',   :object => @songs %></div>

_artists partial（_artists.html.erb）：

<%= collection_select(nil, :artist_id, artists, :id, :name,
                 {:prompt   => "Select an Artist"},
                 {:onchange => "#{remote_function(:url  => {:action => "update_songs"},
                                                  :with => "'artist_id='+value")}"}) %>

_songs partial（_songs.html.erb）：

<%= collection_select(nil, :song_id, songs, :id, :title,
                 {:prompt   => "Select a Song"}) %>

选择Gnre时出现此错误：

Uncaught ReferenceError: Ajax is not defined
   onchange

请有人帮我解决这个问题：

我花了3个月时间仍然没有找到答案。

似乎是jquery.min和来自组合框的事件onchange之间的冲突。

Answer 1

Ajax在prototypejs中定义。您应该在使用Ajax的代码之前包含原型脚本。 http://prototypejs.org/

进一步阅读here和here。

Answer 2

将您的jQuery代码放入此LINE $(document).on('ready', function(){})代码段中，这可能是一个问题，“Ajax function not defined”是范围问题或错误的jquery

未捕获的ReferenceError：未在更改问题上定义Ajax

2 个答案: