JQuery-UI和Bootstrap衝突

我有一個使用Twitter Bootstrap的Rails 3.2.5應用程序。我正在嘗試使用JQuery UI日期選擇器。我已經搜索了幾天，尋找解決方案並找不到任何東西。我有一個Rails視圖中的文本字段，我試圖使用JQuery datepicker。但是，當我點擊文本字段時，沒有任何反應。JQuery-UI和Bootstrap衝突

在我的Rails的看法，我有一個簡單的text_field_tag像這樣：

<%= text_field_tag 'andrew' %>

在我相關的CoffeeScript文件：

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

在Chrome開發者工具JavaScript控制檯，我看到這個錯誤：

Uncaught TypeError：Object [object Object] has no method'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">]

之後，當我瀏覽器瀏覽器窗口時，點擊文本字段會彈出日期選擇器日曆，就像我想要的那樣。

那麼，如何讓我的代碼工作呢？也就是說，我手動解決了JavaScript控制檯中的衝突，但是我無法通過我的代碼來實現它。

來源

2012-11-13 andrunix

這一切對我來說更爲複雜，因爲我根本不都知道CoffeeScript中和，似乎是在Rails的默認了。 – andrunix

有關Bootstrap 3和jQuery UI之間衝突的更新？ –

看起來我經歷了很多痛苦之後才解決了這個問題。我創建了一個新項目，並且慢慢地，有條不紊地將我的應用程序移到新應用程序中。我終於發現了一個只在我的項目中出現上述問題的目錄。

有一個「公共/資產」目錄下面的內容。我不記得創建該目錄或將這些文件放在該目錄中。將該目錄重命名爲不同的內容導致我的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

如果有誰知道這是怎麼創作的，這使我的放心。謝謝！

安德魯

來源

2012-11-16 19:13:59 andrunix

哦，我知道這是如何創建的。 bundle exec rake資源：預編譯 – andrunix

JQuery-UI和Bootstrap衝突

回答

相關問題