$ 未定义,在 Rails 中使用 Select2 插件时未捕获 ReferenceError
$ is not defined, Uncaught ReferenceError while using Select2 plugin with Rails
我正在尝试使用 Select2 插件将搜索栏添加到我的 select 框中。
查看页面控制台时出现以下错误:
Uncaught ReferenceError: $ is not defined
在这里搜索不同的问题让我相信这个错误的发生是因为 jQuery javascript 没有包含在脚本被调用之前。但我仍然找不到让它工作的方法。我该如何修复此错误并使 select2 插件正常工作?
这是 application.js 文件:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require select2
//= require tinymce
//= require turbolinks
//= require_tree
我已经尝试以多种不同的方式重新排列 select2 在 application.js 文件中的顺序但没有成功(我试图确保 jQuery 在 Select2 之前加载).
这是 index.html.haml 文件:
%select{:id => "test"}
- @lamps.each do |lamp|
%option{:value => "1"}= lamp.brand + ' ' + lamp.category + ' ' + lamp.lamptype + ' (' + lamp.cct.to_s + 'K)'
:javascript
$(document).ready(function() { $("#test").select2(); });
这是 application.html.haml 文件:
!!! 5
%html
%head
%title= t('.lspdd_light_spectral_power_dis')
%meta{:name => "viewport", :content=>"width=device-width, user-scalable=no"}
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true, :defer => "defer"
= javascript_include_tag "d3.min.js", :defer => "defer"
= csrf_meta_tags
补充信息:
- Rails 版本:4.0.3
- ruby 1.9.3p484(2013-11-22 修订版 43786)[x86_64-linux]
谢谢!
编辑#1:
添加网络开发工具显示信息的屏幕截图。
如果我理解正确,application-ea826f14bc5ea6f6976b187ce8d3008e.js 文件包含 application.js 文件中提到的所有内容?
如果您已经手动包含所有脚本,请不要使用 //= require_tree
。这可能是错误的原因。删除此字符串并尝试重新加载页面
p.s
我还认为你使用的是不正确的 sintax
//= require_tree
正确版本包含点
//= require_tree .
p.p.s.
不是关于你的主要问题,而是你使用的是旧版本的 ruby。检查较新的
还有一件重要的事情 我之前没有提到的。您正在使用 defer="defer"
属性来延迟主脚本加载。内联 javascript 您在主脚本之前加载的页面上键入的内容
我正在尝试使用 Select2 插件将搜索栏添加到我的 select 框中。
查看页面控制台时出现以下错误:
Uncaught ReferenceError: $ is not defined
在这里搜索不同的问题让我相信这个错误的发生是因为 jQuery javascript 没有包含在脚本被调用之前。但我仍然找不到让它工作的方法。我该如何修复此错误并使 select2 插件正常工作?
这是 application.js 文件:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require select2
//= require tinymce
//= require turbolinks
//= require_tree
我已经尝试以多种不同的方式重新排列 select2 在 application.js 文件中的顺序但没有成功(我试图确保 jQuery 在 Select2 之前加载).
这是 index.html.haml 文件:
%select{:id => "test"}
- @lamps.each do |lamp|
%option{:value => "1"}= lamp.brand + ' ' + lamp.category + ' ' + lamp.lamptype + ' (' + lamp.cct.to_s + 'K)'
:javascript
$(document).ready(function() { $("#test").select2(); });
这是 application.html.haml 文件:
!!! 5
%html
%head
%title= t('.lspdd_light_spectral_power_dis')
%meta{:name => "viewport", :content=>"width=device-width, user-scalable=no"}
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true, :defer => "defer"
= javascript_include_tag "d3.min.js", :defer => "defer"
= csrf_meta_tags
补充信息:
- Rails 版本:4.0.3
- ruby 1.9.3p484(2013-11-22 修订版 43786)[x86_64-linux]
谢谢!
编辑#1:
添加网络开发工具显示信息的屏幕截图。
如果我理解正确,application-ea826f14bc5ea6f6976b187ce8d3008e.js 文件包含 application.js 文件中提到的所有内容?
如果您已经手动包含所有脚本,请不要使用 //= require_tree
。这可能是错误的原因。删除此字符串并尝试重新加载页面
p.s 我还认为你使用的是不正确的 sintax
//= require_tree
正确版本包含点
//= require_tree .
p.p.s. 不是关于你的主要问题,而是你使用的是旧版本的 ruby。检查较新的
还有一件重要的事情 我之前没有提到的。您正在使用 defer="defer"
属性来延迟主脚本加载。内联 javascript 您在主脚本之前加载的页面上键入的内容