質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

Q&A

解決済

4回答

3552閲覧

jQueryのTag-itが発火しない(動かない)ときの対応について

koume

総合スコア458

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

0グッド

0クリップ

投稿2017/08/29 01:53

編集2017/08/29 03:10

何回か質問しておりますが、回答が得られないので内容を変えてみました。
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
このようなエラーがでていました。が、私のレベルでは解読できません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/08/29 02:18

<%= markup(:ul, id: 'tag-it') do・・・ここには実際にはどのようなHTMLが出力されているのでしょうか?
koume

2017/08/29 02:37

回答ありがとうございます。このあたりの記述は参考書の記述を写しています。本には「では、実際にタグの追加・削除インターフェースをメッセージ詳細表示ページに埋め込んでみましょう。」とありました。初心者なのでこれくらいしかわかりません。すいません。
退会済みユーザー

退会済みユーザー

2017/08/29 02:45

chromeで閲覧した場合「F12」を押せばソースが表示されます。上記の部分がどのようなソースになっているのか見れば入力できない理由が分かるかもしれません。
koume

2017/08/29 03:12

回答ありがとうございます。エラーが出力されておりました。が、何のエラーなのか私のレベルではわからないので宜しくお願いします。
m.ts10806

2017/08/29 03:59 編集

エラーメッセージは何が悪いか(できていないか)教えてくれるものです。エラーメッセージはそのままGoogle検索などに突っ込めばある程度ヒントとなる記事が出てきます。ヒントを元に試行錯誤することで技術も身につきます。この際、調べて対応する力も少しずつつけていきましょう。
koume

2017/08/29 04:04

ありがとうございます。いろいろ自分で試してみます。
guest

回答4

0

2つめのエラー
Uncaught TypeError: $.widget is not a function
について、

tagitが動作するためにはjquery-uiが必要なのですが、それを部分的(datepicker分)しかロードしていないからだと思います。
このへんはちゃんとreadme読んだほうがよいと思いますが、ビギナーだと難しいかな...。

app/assets/stylesheets/staff.css

/* *= require jquery-ui *= require jquery.tagit *= require_tree ./shared *= require_tree ./staff */

app/assets/javascripts/satff.js

//= require jquery //= require rails-ujs //= require jquery_ujs //= require jquery.turbolinks //= require jquery-ui //= require tag-it //= require turbolinks //= require_tree ./shared //= require_tree ./staff

としてみてください。変更したのは、
・読み込む順番を変更(tag-itを呼ぶ前にjquery-uiを呼ぶ)
・jquery-uiをすべてロード
です。

投稿2017/08/29 04:48

h_daido

総合スコア824

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koume

2017/08/29 06:28

回答ありがとうございます。consoleのエラーはおかげさまで無くなりました。しかし、タグの入力欄に記述できない状況のままです。何がたりないのでしょうか?
guest

0

自己解決

Turbolinks5に対応していないファイルを作ってしまっていたのが原因でした。
そこを修正し、解決しました。

投稿2017/08/29 08:15

koume

総合スコア458

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

上の回答などで、コンソールエラーは消えているようなので、
View側がおかしいのではないかと思います。

<%= markup(:ul, id: 'tag-it') do |m| @message.tags.each do |tag| m.li tag.value end end %>

この記載おかしくないですか?
下みたいに修正してみてください。

<%= markup(:ul, id: 'tag-it') do |m| %> <% @message.tags.each do |tag| %> <li> <% tag.value %> </li> <% end %> <% end %>

投稿2017/08/29 07:03

NobutakaKomaki

総合スコア114

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koume

2017/08/29 07:47

回答ありがとうございます。修正してみましたが、変化はありませんでした。疑問点があるのですが、 最初にrails newしたときにvenderフォルダができていますが、その中にassets/javascriptと assets/stylesheetsが無かったので自分でフォルダを作り、そこにtag-it.jsとjquery.tagit.cssをコピー しました。ここで読み込めていないということはないのでしょうか?
koume

2017/08/29 08:18

いろいろありがとうございました。自分の記述ミスでした。 別のファイルでturbolinks5に対応していない記述をしてしまっていて 動作がおかしくなっていたようです。お騒がせいたしました。 今後とも宜しくお願いします。
guest

0

railsは触ったことがありませんが。

【rails-ujsとjquery-ujsで2回リクエストが送られる - Qiita】
http://qiita.com/hisas/items/8399aec3a5377bf75017

投稿2017/08/29 03:16

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koume

2017/08/29 03:48

回答ありがとうございます。教えていただいた通りに//= require jquery_ujsを削除しましたが、変化はありませんでした。バージョンの違いとかではないのでしょうか?
koume

2017/08/29 03:53

何回もすいません。削除したらエラーの内容が変わっていました。 Uncaught TypeError: $.widget is not a function at tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js?body=1:30 at tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js?body=1:591 (anonymous) @ tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js?body=1:30 (anonymous) @ tag-it.self-ccfa6fe5ebee9a806f00ca9e8a45f5e2299922093c7664de7838e2b13af24f8d.js?body=1:591
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問