Rails Authenticity Token not valid when using a different layout

Question

I have a rails app that uses a modal to post data to a controller and save it to the database. The flow works perfectly when using my old "original" layout, but after implementing a new bootstrap-themed layout, when I try to submit that I get an invalid CRSF error.

If I change the layout on the controller back to the original, it works just fine.

The JS that runs that click/post method is the following:

$(document).on("click",".clickable", function(){
  var link = $(this).data('link')
    console.log(link);
    $.ajax({
      url: link,
      type: "POST",
    });
});

Nothing in the code is changing other than the layout for the controller and like I mentioned, if I change the layout back to the original one, it works just fine. Could I be missing a javascript file or something else in the new layout's javascript?

New layout js file: stack.js

//= require jquery3
//= require popper
//= require rails-ujs
//= require bootstrap
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/morris.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common

Old layout js file: application.js

//= require jquery3
//= require popper
//= require rails-ujs
//= require bootstrap
//= require_tree ./common

All js files specific to the new template are in a "stack" folder under the javascripts main folder which is why only ./common is included above. I did not want all files under stack to be included since there are a lot of files I have not connected or removed yet.

Any thoughts?

Error:

    Started POST "/add_interest?city_id=59020&name=Mission+District%2C+San+Francisco%2C+California%2C+US&region_id=128085&type=region" for 127.0.0.1 at 2019-02-16 13:30:02 -0800
Processing by InterestsController#create as */*

      Parameters: {"city_id"=>"59020", "name"=>"Mission District, San Francisco, California, US", "region_id"=>"128085", "type"=>"region"}
    Can't verify CSRF token authenticity.
    Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)



    ActionController::InvalidAuthenticityToken - ActionController::InvalidAuthenticityToken:
`

Answer 1

Since you are using Rails-ujs, you can use it's ajax method that already handles the token for you:

https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/ajax.coffee#L15

$(document).on("click",".clickable", function(){
  var link = this.dataset.link;
  console.log(link);
  Rails.ajax({
    url: link,
    type: "POST",
  });
});

Answer 2

Try like this:

$(document).on("click",".clickable", function(){
  var link = $(this).data('link')
    console.log(link);
    $.ajax({
      url: link,
      beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
      method: "POST",
      dataType: "json",
      data: {}
    });
});