####実現したいこと
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});
回答2件
あなたの回答
tips
プレビュー