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

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

ただいまの
回答率

90.50%

  • Ruby on Rails

    7274questions

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

  • jQuery

    6711questions

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

  • Ajax

    1090questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 141

ruby_0ct

score 38

 前提・実現したいこと

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


絞り込み後の結果も正常に受け取っています。

$('#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>');

 該当のソースコード

DBの関係性は、memos 1対多 memocategories です。
メモ本体のテーブル memos

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

カテゴリーのテーブル memocategories

id category
1 TODO
2 買い物

memo_controller.rb

def dbsort
    @memo = Memo.where(memocategory_id: params[:memocategory_id]).order(created_at: created_params)
end


プルダウンメニューを選択すると、アクションにpostされるjQueryのajaxメソッド
/views/layout/application.html.erb

$(function() {
      $('#memocategory_id, #newoldsort').change(function(){
        $.ajax({
          url: 'dbsort',
          type: 'post',
          data: { memocategory_id: $('#memocategory_id').has('option:selected').val(),
                 newoldsort: $('#newoldsort').has('option:selected').val()
               },
          dataType: 'html',
          success: function(data) {
            console.log('Postされました');
          },
          error: function(data) {
            console.log('Postエラー');
          }
        });
      });
    });


/view/memo/dbsort.js.html

$('#memo-list').html('<%= j(render partial: 'memolist') %>');


部分テンプレート /views/memo/_memolist.html.erb

<% @memo.each do |memo| %>
<%= link_to memo_path(memo) do %>
<div class="memo-box">
  <div class="memo-category"><%= memo.memocategory.category %></div>
  <div class="margin-box">
    <div class="memo-name"><%= memo.title %></div>
    <div class="memo-innovator">
      <div class="user"><%= memo.name %></div>
    </div>
    <div class="memo-content"><%= memo.content %></div>
  </div>
</div>
<% end %>
<% end %>


メモ一覧表示するトップページ /views/memos/index.html.erb

<div id="container">
  <h1>メモ一覧</h1>
  <div id="categorybox">
    <div class="cb-item cb-category">
      <%= form_for @dbsort, url: memo_path do |f| %>
        <%= f.collection_select :id, Memocategory.all, :id, :category, prompt: 'すべてのカテゴリー' %>
      <% end %>
    </div>

    <div id="memo-list">
      <%= render partial: 'memolist' %>
    </div>

  </div>


ルーティング

Rails.application.routes.draw do
  get 'memo/index', as: 'memo'
  post 'memo/dbsort'
  get 'memo/dbsort'
  get 'index/dbsort'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

 参照したサイト

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby on Rails

    7274questions

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

  • jQuery

    6711questions

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

  • Ajax

    1090questions

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