Rails ajax通信でページが更新されない・・・

Question

Rails6でECサイトを作っています。
商品（チケット）一覧ページから商品を選択、ボタンをおしてページ遷移、選択した商品の一覧を表示させようと考えています。

最初に、商品一覧ページで選択した商品はJavaScriptでticketIdsに配列として入ってゆきます。
そして、ボタンを押すと、以下のjQuery文が発動し、下のコントローラにgetリクエストを出します。

$.ajax({
   type: "GET",
   url: "/manage_tickets/",
   data: { id: ticketIds },
   dataType: "html"
   }
});

class ManageTicketsController < ManageController
  before_action :logged_in_user, only: %i[index create destroy]
  before_action :correct_user,   only: :destroy

  def index
    @tickets = Ticket.where(id: params[:id]).limit(10) #テストな感じです
  end

ログを見ると、レンダリングまで問題なく行われているという情報が出ています。

D, [2019-11-29T21:02:57.198735 #83105] DEBUG -- :   ↳ app/views/manage_tickets/index.html.erb:22
I, [2019-11-29T21:02:57.199729 #83105]  INFO -- :   Rendered manage_tickets/index.html.erb within layouts/manage (Duration: 257.7ms | Allocations: 17416)
I, [2019-11-29T21:02:57.215902 #83105]  INFO -- :   Rendered layouts/_header.html.erb (Duration: 3.5ms | Allocations: 1051)
I, [2019-11-29T21:02:57.216350 #83105]  INFO -- :   Rendered layouts/_sidebar.html.erb (Duration: 0.2ms | Allocations: 132)
I, [2019-11-29T21:02:57.217211 #83105]  INFO -- :   Rendered layouts/_footer.html.erb (Duration: 0.7ms | Allocations: 462)
I, [2019-11-29T21:02:57.217458 #83105]  INFO -- : Completed 200 OK in 281ms (Views: 217.5ms | ActiveRecord: 60.6ms | Allocations: 24203)

しかしそれにも関わらず、ページは遷移せずもとの商品選択画面のままなのです。

なぜなのでしょうか。。

###やってみたこと

・最初jQueryの記述の部分で、dataType: "html"とありますが、最初datatypeとなっていましたので、これを修正しましたが、変わりません。
・エラーは出ていないのですが、トークンが入っていないためなのかと、以下をコピペで上のajax文の前につけてみましたが、変わりません。

      $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
        var token;
        if (!options.crossDomain) {
          token = $('meta[name="csrf-token"]').attr('content');
          if (token) {
            return jqXHR.setRequestHeader('X-CSRF-Token', token);
          }
        }
      });

turbolinksをページapplication.jsから削除してみましたが、変わらず・・・

何卒、よろしくお願いいたします

Comments

[2KOH]

状況がつかめていませんが、もしかして $.ajax でページ遷移させようとしていますか？
$.ajax にページ遷移機能はありませんよ。

[orori]

おっしゃるとおり、ajaxでコントローラにリクエストをだしてページ遷移させようと考えていました。レンダリングまでしているのでもう少しでできるのかと思っていましたが、できないのですね。

Answer 1

Ajaxはページ遷移をせずにサーバーサイドの処理を行うものです。
dataTypeはあくまでサーバーサイドから返ってくるデータの型を指定するものです。

jQuery.ajax(options)

サーバから返されるデータの型を指定します。省略した場合は、jQueryがMIMEタイプなどを見ながら自動的に判別します。指定可能な値は、次のようなものです。

通常は、サーバーサイドから返ってきた情報をJavaScriptでHTMLを書き換えていきます。
はじめてのAjax(jQuery) 2018年版
にあるように、通信・処理成功した場合、done()で結果を受け取るので、
そこで返ってきた結果を確認し、適宜HTMLに反映すると良いでしょう。

Comments

[orori]

>通常は、サーバーサイドから返ってきた情報をJavaScriptでHTMLを書き換えていきます。
Railsには上の機能が備わっているということなのですね、
またdone()コールバックで帰ってきた結果をHTMLにすれば通常の動作と同じことになるわけですね。
Rails内部の動きももっと学ばねばならないですね。
ありがとうございました！

[m.ts10806]

Railsはあくまでサーバーサイドのフレームワークです。（VIEWも結局は画面に表示させるために裏ではサーバーサイドの置換処理が走っているはず）
Ajaxとの連携についてはドキュメントや紹介記事などであると思うので、探してください。