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

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

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

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2549閲覧

Rails Ajaxで並び替えができない

ruby_0ct

総合スコア57

Ruby on Rails

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/06/20 17:05

編集2018/06/21 18:06

前提・実現したいこと

DBにあるレコードをリストで一覧表示させています。
これをAjaxと部分テンプレートを使ってカテゴリーで絞り込みを行いたいのですが、jQueryでの書き換えがうまく行われません。
jQueryが原因だと思うのですが、具体的な原因はなんなのか検討がつかない状況です。

サーバサイドの処理はデバッグ情報を見ると、正常に処理されています。(下記参照)

怪しそうなところをご指摘いただけると、助かります。

処理の流れ

  1. プルダウンメニューでカテゴリーを絞り込む
  2. 選択されると、jQueryのajaxメソッドが発動し、絞り込みを行うアクション(dbsort)が実行される
  3. 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

idtitlenamememocategory_idcontent
1今日のやること太郎1筋トレ
2スーパーで買ってくるメモ二郎2ラーメン

カテゴリーのテーブル memocategories

idcategory
1TODO
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

参照したサイト

Railsのajax処理で部分テンプレートのみ更新する方法が便利 | EC-CUBEな日々

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

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

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

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

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

guest

回答1

0

自己解決

解決しました。
データを受け取った後のjQueryの処理に問題がありました。

投稿2018/06/22 06:53

ruby_0ct

総合スコア57

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問