2015-03-11 1 views
1

Сова Карусель не работает с моими рельсами. Это не отображается на тестовой странице и появляется эта ошибка в консоли разработчика Chrome:Сова-карусель не работает с рельсами

Chrome console error highlighting call to .owlCarousel()

Uncaught TypeError: undefined is not a function

Я следовал инструкциям на https://github.com/acrogenesis/owlcarousel-rails

и even installed this fix since Rails turbolinks apparently messes with DOM triggers.

Вот соответствующий код в рельсах:

**GemFile** 
gem 'owlcarousel-rails' 

**app/assets/application.js** 
//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap 
//= require owl.carousel 
//= require_tree . 

**app/assets/stylesheets/application.css** 
*= require_tree . 
*= require_self 
*= require owl.carousel 
*= require owl.theme 

**home.html.erb** 
<body> 
... 
<div class="owl-carousel" col-lg-12"> 
    <div> Your Content </div> 
    <div> Your Content </div> 
    <div> Your Content </div> 
    <div> Your Content </div> 
    <div> Your Content </div> 
    <div> Your Content </div> 
    <div> Your Content </div> 
</div> 
... 
</body> 
<script> 
$(document).ready(function(){ 
$('.owl-carousel').owlCarousel({ 
    autoPlay: 3000, 
    item: 3 
}); 
}); 
</script> 

Как прямо сейчас, это то, что область выглядит как (должно быть содержание в белой области): Screenshot of page showing only page title

+0

'jquery.turbolinks' говорит поместить' требует turbolinks' после всех ваших других утверждений 'require'. Вы пробовали это сделать? –

ответ

2

Вы должны проверить JavaScript файлы, как это кажется у вас есть дополнительный инициализатору где-то, о чем свидетельствует Tools ошибки Chrome Dev:

$('#owl-carousel').owlCarousel();

который довольно сильно отличается от вашего

$('.owl-carousel').owlCarousel({ 
    autoPlay: 3000, 
    item: 3 
}); 

Ошибка возникает, потому что $('#owl-carousel') возвращает нулевой объект, так как у вас нет объекта с id = 'owl-carousel'

+0

Изменена строка инициализации для вызова класса .owl-carousel и по-прежнему дает ту же ошибку в консоли javascript: 'Uncaught TypeError: undefined не является функцией'. – Godzilla74

+0

Это может быть длинный выстрел, но MAYBE вам не хватает строки '<% = javascript_include_tag" приложения "%>' в вашем файле app/views/layouts/application.html.erb? – Mario

0

Я сова карусель с одним из моих рельсовых проектов. Вам не нужно устанавливать драгоценный камень. Попробуйте удалить строку из Gemfile. Убедитесь, что у вас есть правильный путь к owl.carousel.js в application.js и owl. *. Css в application.css. И перезапустите сервер.

Кроме того, я бы рекомендовал переместить любые внешние js (owl.carousel.js) и css (owl.carousel.css, owl.theme.css) поставщику/активам /.

+0

все это изменило, добавили файлы: owl.carousel.js ~> vendor/assets/javascripts' и 'owl.carousel.css' и' owl.theme.css ~> поставщик/активы/таблицы стилей'.Убрал жемчужину. Перезагрузили, проверили исходный код в заголовке и посмотрели ссылки на файлы, но все же получили те же результаты. – Godzilla74

0

Я думаю, что у вас есть дополнительная кавычка в

<div class="owl-carousel" col-lg-12"> 

и это не правильно делает. перейти к

<div class="owl-carousel col-lg-12"> 
+0

Вы забыли добавить то, что он должен изменить;) – Bono

3

Только в случае, если кто-то с этой проблемой приходит через эту страницу, я построил из быстрого репо, демонстрирующий рабочую версию owlcarousel-rails драгоценного камня, встроенного в загрузочной сетке. Я также объясняю изменения, внесенные мной в README.

Я знаю, что иногда нужно видеть все рабочие детали вместе, чтобы выяснить, где именно происходит ошибка.

REPO ЗДЕСЬ: https://github.com/EliCash82/carousel-optimization

Посмотрите в app/assets/javascripts, app/assets/stylesheets, и самое главном app/views/static_pages/carousel_in_grid.html.erb

Надеется, что это поможет кому-то из :)

+0

спасибо. это помогло мне :) – Sarah

+0

спасибо за этот $ (document) .ready (function() {}) до $ ("# owl-carousel"). owlCarousel ({}) решил мою проблему в совой карусели –