Q&A
前提・実現したいこと
投稿フォームにtagsinputを使ってカンマ区切りのタグを作りたいです。
new.html.erb
1 <div class="field"> 2 <%= f.label :skill_list, "スキル・特技" %><br> 3 <%= text_field_tag 'post[skill_list]', @post.skill_list.join(','), "data-role" => "tagsinput" %> 4 </div>
bootstrap4を入れてます。
gem
1Gemfile 2source 'https://rails-assets.org' do 3gem 'rails-assets-bootstrap' 4gem 'rails-assets-bootstrap-timepicker' 5gem 'rails-assets-bootstrap-tagsinput' 6end
applicationjs
1//= require rails-ujs 2//= require activestorage 3//= require jquery 4//= require jquery_ujs 5//= require bootstrap 6//= require bootstrap-timepicker/bootstrap-timepicker 7//= require bootstrap-tagsinput.min 8//= require bootstrap-tagsinput 9//= require turbolinks 10//= require toastr 11//= require moment 12//= require moment/ja.js 13//= require leaflet 14//= require_tree .
applicationcss
1*= require_self 2 *= require bootstrap 3 *= require bootstrap-tagsinput 4 *= require jquery-ui 5 *= require toastr 6 *= require leaflet 7 *= require_tree . 8 */
applicationhtml
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Live</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 10 <%# toastr file...%> 11 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 12 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 13 <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> 14 <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> 15 <%# leafret file...%> 16 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> 17 <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> 18 <%#taginput%> 19 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 20 <link rel="stylesheets" type="text/css" href="jquery.tagsinput.css" /> 21 </body> 22 </head> 23 24 <body> 25 26 <%= render 'layouts/header' %> 27 <%= render 'layouts/notice'%> 28 <%= yield %> 29 </body> 30</html> 31
発生している問題・エラーメッセージ
ncaught ReferenceError: jQuery is not defined at index.js:22 (anonymous) @ index.js:22
