I'm making an EC site with Rails6.
I want to select a product from the product (ticket) list page, click the button to change the page, and display a list of selected products.

First, the products selected on the product list page will be entered into ticketIds as an array in JavaScript.
Then, when the button is pressed, the following jQuery statement is invoked and a get request is sent to the controller below.

$. 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) #This is a test

When you look at the log, you can see that the rendering is done without any problems.

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)

But nevertheless, the page doesn't change and remains the original product selection screen.

Why is it? .

What I did

・ In the first jQuery description, there is dataType: "html", but since it was first datatype, it was modified, but it has not changed.
・ There is no error, but I tried to put the following in front of the above ajax statement by copy and paste, but it is not changed because it is because the token is not included.

$.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);

I deleted turbolinks from the page application.js, but ...

  • Answer # 1

    Ajax performs server-side processing without page transitions.
    dataType only specifies the type of data returned from the server side.


    jQuery.ajax (options)
      Specifies the type of data returned from the server. If omitted, jQuery will automatically determine the MIME type. Possible values ​​are as follows:

    Normally, the information returned from the server side is rewritten with JavaScript using JavaScript.
    First Ajax (jQuery) 2018 edition
    As you can see, if communication/processing is successful, you will receive the result with done () It is a good idea to check the returned results and reflect them in HTML accordingly.