JQuery-UI和Bootstrap冲突

时间:2012-11-13 21:59:26

标签: jquery-ui twitter-bootstrap jquery-ui-datepicker

我有一个使用Twitter Bootstrap的Rails 3.2.5应用程序。我正在尝试使用JQuery UI datepicker。我已经谷歌搜索了几天寻找解决方案,找不到任何东西。我在Rails视图中有一个文本字段,我试图与JQuery datepicker一起使用。但是,当我单击文本字段时,没有任何反应。

在我的Rails视图中,我有一个简单的text_field_tag,如下所示:

<%= text_field_tag 'andrew' %>

在我关联的CoffeeScript文件中:

$ ->
  $('#andrew').datepicker

在Chrome开发者工具JavaScript控制台中,我看到了以下错误:

未捕获TypeError:对象[object Object]没有方法'datepicker'

现在我已经确定JQuery-UI和Bootstrap之间存在冲突。在同一个JavaScript控制台中,我可以这样做:

jQuery.noConflict();

我得到了

function (a,b){return new e.fn.init(a,b,h)}

然后我可以输入:

$('andrew'.datepicker();

我得到了:

[<input id="andrew" name="andrew" type="text" class="hasDatepicker">]

在此之后,当我转到浏览器窗口时,单击文本字段会调出datepicker日历,就像我想要的那样。

那么如何在我的代码中使用它呢?也就是说,我手动解决了JavaScript控制台中的冲突,但我无法通过我的代码使其工作。

1 个答案:

答案 0 :(得分:0)

看起来我经历了很多痛苦之后解决了这个问题。我创建了一个新项目,并慢慢地,有条不紊地将我的应用程序部分移动到新应用程序。我终于发现了一个只在我的项目中出现上述问题的目录。

有一个'public / assets'目录,其中包含以下内容。我不记得创建这个目录或将这些文件放在该目录中。将目录重命名为不同的目录会导致我的JQuery-UI日期选择器与Twitter Bootstrap一起正常工作。

以下是公共/资产的内容:

-rw-r--r--  1 andrunix  staff   83360 Sep  3 18:01 application 6fc1172d858485077bbecdb82b96399a.css
-rw-r--r--  1 andrunix  staff   13546 Sep  3 18:01 application-6fc1172d858485077bbecdb82b96399a.css.gz
-rw-r--r--  1 andrunix  staff  100616 Sep  3 18:01 application-990a4cf0df42934fcc4c14aaf88b7ced.js
-rw-r--r--  1 andrunix  staff   35448 Sep  3 18:01 application-990a4cf0df42934fcc4c14aaf88b7ced.js.gz
-rw-r--r--  1 andrunix  staff   83294 Sep  3 18:01 application.css
-rw-r--r--  1 andrunix  staff   13484 Sep  3 18:01 application.css.gz
-rw-r--r--  1 andrunix  staff  100618 Sep  6 20:26 application.js
-rw-r--r--  1 andrunix  staff   35448 Sep  3 18:01 application.js.gz
-rw-r--r--  1 andrunix  staff   13826 Aug 30 17:42 glyphicons-halflings-f6675c325532ec11a984d58e172b8e2a.png
-rw-r--r--  1 andrunix  staff    8777 Aug 30 17:42 glyphicons-halflings-white-13553a5bf21ae3cc374006592488ec64.png
-rw-r--r--  1 andrunix  staff    8777 Aug 30 17:42 glyphicons-halflings-white.png
-rw-r--r--  1 andrunix  staff   13826 Aug 30 17:42 glyphicons-halflings.png
-rw-r--r--  1 andrunix  staff     368 Sep  5 15:00 manifest.yml
-rw-r--r--  1 andrunix  staff    6646 Aug 10 19:57 rails-be8732dac73d845ac5b142c8fb5f9fb0.png
-rw-r--r--  1 andrunix  staff    6646 Aug 10 19:57 rails.png

如果有人知道这是如何创造的,那会让我放心。谢谢!

安德鲁