Плагин Jquery не работает с Rails 4

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

Я хочу создать интерфейс для ввода тегов, очень похожий на тот, что здесь, на Stack Overflow. Я нашел следующий плагин, в котором есть все функции, с которыми мне хотелось бы повозиться: http://xoxco.com/projects/code/tagsinput/

Итак, вот что я сделал:

1) Я скачал архив.
2) Я поместил jquery.tagsinput.js и jquery.tagsinput.min.js в vendor/assets/javascripts .
3) Я поместил jquery.tagsinput.css в vendor/assets/stylesheets.
4) В мои представления/ nuggets/index.html.erb, я добавил <input name="tags" id="tags" value="foo,bar,baz" />
5) В моем app/assets/javascripts/nuggets.js.coffee я добавил $('#tags').tagsInput();

Когда я заметил, что ввод не работает должным образом, я проверил исходный код страницы и заметил, что там нет следующих строк:
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

В результате я решил добавить //= require jquery.tagsinput в app/assets/javascripts/application.js и *= require jquery.tagsinput в app/assets/stylesheets/application.css.

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

Спасибо за вашу помощь,

Грассвистл

Редактировать, добавляя информацию для @user1965817:
Содержимое app/assets/javascripts/application.js:

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

Содержимое файла app/assets/stylesheets/application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

*= require jquery.tagsinput

body 
{
    background-color:#C5C5F0;
    font-family: Geneva, Tahoma, Verdana, sans-serif;
}

.header 
{
    font-family: Geneva, Tahoma, Verdana, sans-serif;
    font-size:30px;
    text-align:center;

    top: 0px;
    margin:0px;  
    padding: 0px 2px 2px 3px;   
    margin-bottom: 70px; 
    border-width: 2px;
    border-bottom: 1px gray solid;
    width: 70%;
}

person grasswistle    schedule 14.10.2013    source источник


Ответы (1)


Ваш CSS неверен

Вам нужно держать инструкции require в верхней части вашего файла (не разделенные):

 *= require_self
 *= require_tree .
 *= require jquery.tagsinput
 */

Вы инициализировали теги JS?

Чтобы инициализировать скрипт, вы должны иметь возможность «вызвать» плагин, например:

$('#tags').tagsInput({
    //parameters here
});
person Richard Peck    schedule 24.10.2013