在使用带有Rails的Select2插件时，未定义$，未捕获的ReferenceError [英] $ is not defined, Uncaught ReferenceError while using Select2 plugin with Rails

问题描述

我正在尝试使用Select2插件将搜索栏添加到我的选择框中。

I'm trying to use the Select2 plugin to add a search bar to my select box.

查看页面控制台时出现以下错误：

I get the following error when looking at the page console :

未捕获的ReferenceError：$未定义

Uncaught ReferenceError: $ is not defined

在这里搜索不同的问题让我相信这个错误发生是因为在调用脚本之前没有包含或放置jQuery javascript。但我仍然找不到让它发挥作用的方法。如何修复此错误并使select2插件正常工作？

Searching different questions here led me to believe this error happens because the jQuery javascript is not included or put before the script is called. But I still could not find a way to make it work. How can I fix this error and make the select2 plugin work?

这是application.js文件：

Here is the application.js file :

//= 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

我尝试以多种方式重新排列application.js文件中select2的顺序但没有成功（我试图确保在Select2之前加载了jQuery。

I've tried rearranging the order of select2 in the application.js file in many different ways with no success (I tried to make sure jQuery was loaded right before Select2).

这是index.html.haml文件：

Here is the index.html.haml file :

%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文件：

Here is the application.html.haml file :

!!! 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：

添加网络开发工具显示的信息的屏幕截图。

Adding the a screenshot of the information displayed by the network dev-tool.

http://imgur.com/QJGCM2b

如果我理解正确的应用程序-ea826f14bc5ea6f6976b187ce8d3008e.js文件包含所有内容在application.js文件中提到过？

If I understand correctly the application-ea826f14bc5ea6f6976b187ce8d3008e.js file includes everything mentionned in the application.js file?

推荐答案

如果你已经包括所有你，请不要使用 // = require_tree 脚本manualy。这可能是错误的原因。删除此字符串并尝试重新加载页面

dont use //= require_tree if you already include all you scripts manualy. this can be the cause of errors. remove this string and try to reload page

ps
i也认为你使用的是不正确的sintax

p.s i also think what you are using incorrect sintax

//= require_tree

正确的版本包含点

//= require_tree .

pps
不是关于你的主要问题，但你是使用旧版本的红宝石。检查更新的

p.p.s. not about your main question, but you are using old version of ruby. check the newer

更重要的一件事我之前没有提到的内容。您正在使用 defer =defer属性来处理主脚本加载。内联javascript你在主页上加载的页面上输入的内容

one more important thing what i didn't mentiond before. you are using defer="defer" attribute for deffering main script loading. inline javascript what you type on page loaded BEFORE main scripts

这篇关于在使用带有Rails的Select2插件时，未定义$，未捕获的ReferenceError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！