javascript - Uncaught ReferenceError : Ajax is not defined onchange issue

Question

这个问题已经有答案了:

How to fix Prototype conflict with Highchart? (1 个回答)

已关闭 9 年前。

我遵循本教程http://pullmonkey.com/2008/03/30/dynamic-select-boxes-ruby-on-rails/还集成了来自

的 highchart 示例

这是 Controller :

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

这是 View :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 部分 (_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 部分 (_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 的代码之前包含原型(prototype)脚本。 http://prototypejs.org/

进一步阅读here和here .