select2 rails gem:已安装资产并调用函数,但下拉列表未更改(TypeError:undefined不是函

select2-rails gem: installed assets and called function but dropdown not changing (TypeError: undefined is not a function)

本文关键字:下拉列表 undefined TypeError 安装 gem rails 函数 调用 select2      更新时间:2023-09-26

SO上有几个类似的帖子,但我还没有找到一个答案被检查正确的帖子。我正试图按照GitHub页面上的说明,在我的rails 3.2应用程序中实现select2 rails gem。我捆绑了gem,并包含了javascript和css文件。然后我添加了一个js函数调用,类似于示例代码中的调用。然而,我的选择栏根本没有改变。

Javascript包括:

# application.js
//= require jquery
//= require jquery_ujs
//= require select2
//= require jquery-1.11.0.min.js
//= require lightbox.min.js
//= require parsley
//= require ./jquery.datetimepicker.js
//= require Stripe/jquery.payment.js
//= require_tree .

CSS包括:

# application.css.less
/*
 *= require_tree .
 *= require select2
 *= require select2-bootstrap
 *= stub active_admin
*/

我的页面带有表单,只是试图复制示例:

# new.html.haml
=content_for :title, 'Post a job'
= javascript_include_tag "https://js.balancedpayments.com/1.1/balanced.js"
:javascript
  var _balanced_marketplace = "#{@balanced_marketplace}";
  var _categories = #{raw(@categories.to_json)};
  $(document).ready(function() { $("#e1").select2(); });
...
...
%select{id: "e1"}
  %option{value: "AL"} Alabama
  %option{value: "WY"} Wyoming

我的脚本和HAML:生成的HTML的结尾

$(document).ready(function() { $("#e1").select2(); });
</script>
      <select id='e1'>
        <option value='AL'>Alabama</option>
        <option value='WY'>Wyoming</option>
      </select>

所有这些只会导致一个正常的选择下拉列表,没有select2样式/功能。

在Javascript控制台中,我看到函数调用出现以下错误:

Uncaught TypeError: undefined is not a function 

我对Javascript不是很熟悉,但我猜这意味着函数"select2()"有问题。然而,我不知道如何开始调试,因为我已经逐字逐句地遵循了gem安装说明。当我查看页面源代码时,我看到select2js库被加载如下:

<script src="/assets/select2.js?body=1" type="text/javascript"></script>

错误可能与您两次加载jQuery有关:

//= require jquery
//= require jquery_ujs
//= require select2
//= require jquery-1.11.0.min.js

您要做的是加载jquery,然后加载select2。然后加载第二个jQuery,它将删除第一个jQuery(与它关联的select2)。所以当你打电话时:

$("#e1").select2();

select2在第二个jQuery上不再存在。

我无法想象你真的需要加载两个jQueries,所以去掉一个。