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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

608閲覧

jsがうまく動かない:rails

susiyaki

総合スコア39

Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/12/04 06:11

編集2018/12/04 06:42

####実現したいこと
tab: has_many
folder: belongs_to
の関係で、

タブ名1[+]  フォルダ名1  フォルダ名2 タブ名2[+]  フォルダ名3

のように表示し、[+]ボタンを押すことでタブに属したフォルダの表示/非表示を切り替えたい

####問題
タブ名に.toggle-btnを、フォルダ名に.toggle-areaを付与したが、うまく動作しない。

####試したこと
ブラウザのコンソールで

js

1 $('.toggle-btn').on('click', function() { 2 $(".toggle-area").toggle(); 3 });

を実行すると正しく動作した。
jqueryの読み込みがおかしい可能性?

####該当のコード

index.html.erb

html

1<h1>フォルダ管理</h1> 2<%# #folder-formの送信内容を.foldersでajax処理 %> 3<ul class="tabs"> 4 <% @tabs.each do |tab| %> 5 <li><button class="toggle-btn"><%= tab.name %></button></li> 6 <ul class="folders toggle-area"> 7 <% tab.folders.each do |folder| %> 8 <li> 9 <%= simple_form_for(folder, remote: true) do |f| %> 10 <%= f.input :name, input_html: {value: folder.name} %> 11 <%= f.association :tab, as: :select %> 12 <%= f.button :submit, "update", method: :put %> 13 <% end %> 14 <%= link_to "delete", folder_path(folder), method: :delete %> 15 </li> 16 <% end %> 17 </ul> 18 <% end %> 19</ul> 20 21 22<div id="folder-form"> 23 <%= simple_form_for(Folder.new, url: folders_path, method: :post, html: { class: "form js-form" }) do |f| %> 24 <%= f.input :name, input_html: { class: "form__text-field js-form__text-field" } %> 25 <%= f.association :tab, as: :select %> 26 <%= f.button :submit, input_html: { class: "form__submit js-submit" } %> 27 <% end %> 28</div>

folder.js

js

1//folder追加 folder#index 2 3//folder追加 folder#index 4 5$(function() { 6 7 function buildHTML(folder) { 8 var html = $('<li class="folder-content">').append(folder.name); 9 return html; 10 } 11 12 $('.js-form').on('submit', function(e) { 13 e.preventDefault(); // submitによるフォームの送信を中止 14 // テキストフィールドの中身を取得 15 var textField = $('.js-form__text-field'); 16 var folder = textField.val(); 17 // Ajax発動!! 18 $.ajax({ 19 type: 'POST', 20 url: '/folders.json', //createアクションへ 21 data: { 22 folder: { 23 name: folder //取得したテキストフィールドの中身をcontentとして送る 24 } 25 }, 26 dataType: 'json' 27 }) 28 .done(function(data) { 29 var html = buildHTML(data); //返ってきたデータをbuildHTMLに渡す↑↑ 30 $('.folders').append(html); //作成したhtmlをビューに追加 31 textField.val(''); //テキストフィールドを空に 32 }) 33 .fail(function() { 34 alert('error') 35 }); 36 }); 37 }); 38 39 40//アコーディオン folder#index 41$(function() { 42 $(document).on('click', '.toggle-btn', function() { 43 $('.toggle-area').toggle(); 44 }); 45});

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

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

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

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

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

m.ts10806

2018/12/04 06:15

$ is Undefined のようなエラーが出ていなければjQuery読み込みの問題ではないように思います。念のため利用しているjQueryのバージョンと現象確認されたブラウザをご提示いただけますか?
susiyaki

2018/12/04 06:18

JQueryのバージョンは1.12.4です。使用しているブラウザはGoogle Chromeです。
guest

回答2

0

自己解決

読み込めていない原因を考えていたら、application.jsでfolder.js等をインポートしていないためでした。
そこで、自分で作ったjsのファイルの中身をコピーしたところ、思ったような挙動をしてくれました。

しかし、folderの追加等の動作はしていたので、書いてあるファイルによって動かせるものとそうでないものがあるようです。

投稿2018/12/04 15:53

susiyaki

総合スコア39

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

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

m.ts10806

2018/12/04 15:55

私の回答は直接解決策にはなっていないようなので、こちらの回答をベストアンサー(自己解決)とされては? ベストアンサーは移せます
guest

0

動的にHTMLを作っているっぽいので、documentからイベント付与されると良いと思います。

$(document).on("click", "#2", function(){

alert("2つ目の要素クリック");

});

コンソールから実行して成功するのは動的であってもそれで出来上がったHTMLに対して指示していることになるからかなと(未検証ですが)

投稿2018/12/04 06:28

編集2018/12/04 06:29
m.ts10806

総合スコア80765

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

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

susiyaki

2018/12/04 06:34

``` //アコーディオン folder#index $(function() { $(document).on('click', '.toggle-btn', function() { $('.toggle-area').toggle(); }); }); ``` 回答していただいたリンクを元にこのように書き換えてみましたが、同様にコンソールに入力した場合しか動きませんでした;; 他に原因等は考えられるでしょうか・・・
m.ts10806

2018/12/04 06:37

エラーすら起きないのでしたらイベントが正しく付与されてないのは確かで大体がDocumentから付与すると動作するものではあるのですが… 念のため更新後のコードを記載いただけますか?
susiyaki

2018/12/04 06:43

folder.jsを更新後に編集しました。 他に必要なコードはありますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問