Добавление flexslider вручную в приложение Rails 4 - ошибка типа flexslider не является функцией

Я пытаюсь исправить ошибку в приложении Rails 4. Flexslider в моем приложении не работает, изображения не загружаются вообще. В консоли это показывает - TypeError (..).flexslider Это не функция. Тема прекрасно работает, если она не интегрирована в Rails. Это основанная на начальной загрузке тема со следующими конфигами - файл application.css.scss выглядит следующим образом

*= require_self
*= require font-config
*= require framework_and_overrides
*= require animate
*= require flexslider
*= require site-wide

Для файла application.js есть следующее -

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require flexslider
//= require cbpAnimatedHeader
//= require jqueryeasing
//= require jquerymousewheel
//= require classie
//= require scrollpage
//= require site

Пытался изменить их порядок несколько раз, но безрезультатно. Ползунки инициализируются следующим образом -

$(document).ready(function() {
$('#myCarousel').flexslider({
        animation: "fade",
        directionNav: false,
        controlNav: false //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage

    });
    $('#slider').flexslider({
        animation: "fade",
        directionNav: true
    });
   });

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

Спасибо за ваше время.

Обновление: я использую начальные приложения RailsApps от Daniel Kehoe с помощью composer.

Обновление: я не установил flexslider, используя какой-либо драгоценный камень, так как драгоценный камень, который я нашел на сайте rubygems, использует более старую версию, т.е. flexslider 2.2 и я использую 2.4 .

Поэтому я пытаюсь сделать это вручную.

Источник

3 ответа

Решение

Хорошо, это мой первый раз, когда я интегрировал тему, основанную на начальной загрузке, разработанную вне среды rails и затем интегрированную в нее. вот как я решил проблему В файле application.js (файл манифеста) я добавил

//= require_selfсверху, как показано ниже:

//= require_self
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require flexslider
//= require cbpAnimatedHeader
//= require jqueryeasing
//= require jquerymousewheel
//= require classie
//= require scrollpage
//= require site

Поместить его где-нибудь между //= require jquery а также //= require turbolinksзаставил мои слайдеры и даже модальные бутстрапы не работать. Так что после многих попыток я понял, это должно быть на вершине.

Как я узнал, почти каждый раз, когда я вчера проверял свой источник, я игнорировал application-[content hash].js, который располагался ниже всех файлов js, которые я упоминал в файле манифеста.

Сегодня я подумал, что этот файл создает проблему, и поскольку имя файла было application-[content hash].js, которое я использовал //= require_self чтобы разместить его размещение жестко закодировано в самом файле. Я не знал о //= require_self материал для js, так как я вижу, что он упоминается только в файле манифеста css, возможно, из-за моего путешествия с Rails 4.2 всего 5-6 месяцев. Так что у старшего разработчика рельсов может быть лучший способ сделать это.

Если кто-то может улучшить ответ или пролить немного света на него, я буду благодарен.

Спасибо ** Обновление - Хорошо, вот еще одна вещь, которую я узнал, я использовал стартовое приложение от Даниэля Кехо с помощью инструмента Composer, и оно содержало предварительно скомпилированные ресурсы в общедоступной папке, которые включались при использовании директивы require_self.

Источник

Ладно, мне тоже потребовалось время, чтобы понять это, но теперь работает потрясающе.

ШАГ 1:

Загрузите исходный код здесь: http://flexslider.woothemes.com/thumbnail-controlnav.html

ШАГ 2:

Затем получите три файла, как показано ниже:

1. /demo/css/flexslider.css
2. /fonts      //yes, copy this entire folder that contains four files
3. /demo/js/jquery.flexslider.js

ШАГ 3:

Переместите первые два файла (1 и 2) в vender/assets/stylesheets и последний (3) в vender/assets/javascripts

ШАГ 4:

включите в application.css / sass сверху:

*= require flexslider

и включите в application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.flexslider
//= require_tree .

SETP 5:

Поместите ниже в application.js

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
   });
});

Тогда вы получите базовый слайдер. Если вы хотите получить другие типы слайдеров, просто измените код JavaScript STEP 5 на то, что вы видите здесь: http://flexslider.woothemes.com/index.html

Источник

Так должно быть

*= require jquery.flexslider

вместо

*= require flexslider

Есть два камня flex slider & flexslider-rails: оба имеют одинаковый способ включения JavaScript. Смотрите документацию на тот, который вы используете.

https://github.com/constantm/Flexslider-2-Rails-Gem https://github.com/werein/flexslider-rails

Источник
Другие вопросы по тегам