前提・実現したいこと
DBにあるレコードをリストで一覧表示させています。
これをAjaxと部分テンプレートを使ってカテゴリーで絞り込みを行いたいのですが、jQueryでの書き換えがうまく行われません。
jQueryが原因だと思うのですが、具体的な原因はなんなのか検討がつかない状況です。
サーバサイドの処理はデバッグ情報を見ると、正常に処理されています。(下記参照)
怪しそうなところをご指摘いただけると、助かります。
処理の流れ
- プルダウンメニューでカテゴリーを絞り込む
- 選択されると、jQueryのajaxメソッドが発動し、絞り込みを行うアクション(
dbsort
)が実行される - Ajaxで部分テンプレートを利用して、書き換えが行われる
発生している問題・エラーメッセージ
サーバサイドのデバッグ情報
Processing by MemoController#dbsort as HTML Parameters: {"memocategory_id"=>"1", "newoldsort"=>"0"} Rendering memo/dbsort.js.erb Memo Load (2.5ms) SELECT `memos`.* FROM `memos` WHERE `memos`.`memocategory_id` = 1 ORDER BY `memos`.`created_at` DESC ↳ app/views/memo/_memolist.html.erb:1 Memocategory Load (0.3ms) SELECT `memocategories`.* FROM `memocategories` WHERE `memocategories`.`id` = 1 LIMIT 1 ↳ app/views/memo/_memolist.html.erb:4 Rendered memo/_memolist.html.erb (6.8ms) Rendered memo/dbsort.js.erb (33.4ms) Completed 200 OK in 118ms (Views: 68.3ms | ActiveRecord: 2.8ms)
jQuery側にエラーはなく、Chromeのデバッグを見ると正常にやり取りは行われている様子です。
Request URL: http://localhost:3000/memo/dbsort Request Method: POST Status Code: 200 OK Remote Address: 127.0.0.1:3000
絞り込み後の結果も正常に受け取っています。
javascript
1$('#memo-list').html(' <a href=\"/memo/index/2\">\n <div class=\"memo-box\">\n <div class=\"memo-category\">買い物</div>\n <div class=\"margin-box\">\n <div class=\"memo-name\">スーパーで買ってくるメモ</div>\n <div class=\"memo-innovator\">\n <div class=\"user\">二郎</div>\n </div>\n <div class=\"memo-content\">ラーメン</div>\n </div>\n </div>\n</a>'); 2
該当のソースコード
DBの関係性は、memos
1対多 memocategories
です。
メモ本体のテーブル memos
id | title | name | memocategory_id | content |
---|---|---|---|---|
1 | 今日のやること | 太郎 | 1 | 筋トレ |
2 | スーパーで買ってくるメモ | 二郎 | 2 | ラーメン |
カテゴリーのテーブル memocategories
id | category |
---|---|
1 | TODO |
2 | 買い物 |
memo_controller.rb
ruby
1def dbsort 2 @memo = Memo.where(memocategory_id: params[:memocategory_id]).order(created_at: created_params) 3end
プルダウンメニューを選択すると、アクションにpostされるjQueryのajaxメソッド
/views/layout/application.html.erb
javascript
1$(function() { 2 $('#memocategory_id, #newoldsort').change(function(){ 3 $.ajax({ 4 url: 'dbsort', 5 type: 'post', 6 data: { memocategory_id: $('#memocategory_id').has('option:selected').val(), 7 newoldsort: $('#newoldsort').has('option:selected').val() 8 }, 9 dataType: 'html', 10 success: function(data) { 11 console.log('Postされました'); 12 }, 13 error: function(data) { 14 console.log('Postエラー'); 15 } 16 }); 17 }); 18 });
/view/memo/dbsort.js.html
ruby
1$('#memo-list').html('<%= j(render partial: 'memolist') %>');
部分テンプレート /views/memo/_memolist.html.erb
ruby
1<% @memo.each do |memo| %> 2<%= link_to memo_path(memo) do %> 3<div class="memo-box"> 4 <div class="memo-category"><%= memo.memocategory.category %></div> 5 <div class="margin-box"> 6 <div class="memo-name"><%= memo.title %></div> 7 <div class="memo-innovator"> 8 <div class="user"><%= memo.name %></div> 9 </div> 10 <div class="memo-content"><%= memo.content %></div> 11 </div> 12</div> 13<% end %> 14<% end %>
メモ一覧表示するトップページ /views/memos/index.html.erb
ruby
1<div id="container"> 2 <h1>メモ一覧</h1> 3 <div id="categorybox"> 4 <div class="cb-item cb-category"> 5 <%= form_for @dbsort, url: memo_path do |f| %> 6 <%= f.collection_select :id, Memocategory.all, :id, :category, prompt: 'すべてのカテゴリー' %> 7 <% end %> 8 </div> 9 10 <div id="memo-list"> 11 <%= render partial: 'memolist' %> 12 </div> 13 14 </div>
ルーティング
ruby
1Rails.application.routes.draw do 2 get 'memo/index', as: 'memo' 3 post 'memo/dbsort' 4 get 'memo/dbsort' 5 get 'index/dbsort' 6 7 # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 8end
参照したサイト
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。