何回か質問しておりますが、回答が得られないので内容を変えてみました。
Rails5.1.3でWebアプリの制作、学習中です。Tag-itを使いタグ付けを導入したいのですが、動いてくれません。
思った通りの画面は表示されます。
たぶんバージョンの違いで誤った記述をしているのだと思いますが、記述方法がわからなくて困っております。
自分のバージョンはjquery-ui-rails-6.0.1です。以前もturbolinks、datepickerでバージョンの違いで記述方法が違っていたので
今回もバージョンの違いにより動かないのかな?と思いましたが、記述方法がわかりませんので教えていただけないでしょうか?
記述内容は以下になります。
app/assets/javascripts/satff.js //= require jquery //= require rails-ujs //= require jquery_ujs //= require jquery.turbolinks //= require tag-it //= require turbolinks //= require jquery-ui/widgets/datepicker //= require jquery-ui/i18n/datepicker-ja //= require_tree ./shared //= require_tree ./staff
app/assets/javascripts/staff/tag-it.js.coffee $(document).on 'turbolinks.load', -> $("#tag-it").tagit()
app/assets/stylesheets/staff.css /* *= require jquery-ui/datepicker *= require jquery.tagit *= require_tree ./shared *= require_tree ./staff */
app/views/staff/messages/show.html.erb <% @title = 'メッセージ詳細' %> <h1><%= @title %></h1> <div class="table-wrapper"> <% if @message.kind_of?(CustomerMessage) %> <div class="links"> <%= link_to '返信する', new_staff_message_reply_path(@message) %> </div> <% end %> <table class="attributes"> <% p = MessagePresenter.new(@message, self) %> <tr><th>種類</th><td><%= p.type %></td></tr> <tr><th>送信者</th><td><%= p.sender %></td></tr> <tr><th>受信者</th><td><%= p.receiver %></td></tr> <tr><th>件名</th><td><%= p.subject %></td></tr> <tr><th>作成日時</th><td class="date"><%= p.created_at %></td></tr> <tr> <th>タグ</th> <td> <%= markup(:ul, id: 'tag-it') do |m| @message.tags.each do |tag| m.li tag.value end end %> </td> </tr> </table> <div class="tree"><%= p.tree %></div> <div class="body"><%= p.formatted_body %></div> </div>
*http://aehlke.github.io/tag-it/をダウンロードしtag-it.jsとjquery.tagit.cssはvendor/assets/javascriptと
vendor/assets/stylesheetsにコピーしています。
この状態でページを開くと添付した画面のように思った通りの画面は表示されますが、タグ欄に入力するようなことができません。
原因がわからずかなり困っております。どうすればいいのか教えていただけないでしょうか?
宜しくお願いします。
追記
consoleを見てみました。
Uncaught Error: jquery-ujs has already been loaded!
at Function.error (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:254)
at jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js:18
at jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js:555
tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js:30 Uncaught TypeError: $.widget is not a function
at tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js:30
at tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js:591
このようなエラーがでていました。が、私のレベルでは解読できません。
回答4件
あなたの回答
tips
プレビュー