Rails Cancancan Ajax custom action not working

Question

I have a Rails App to which I added Devise and Cancancan to authentication and authorization. Before that, the actio worked correctly, now in the console browser I see a redirect to the home.

I call the action submitting the form in javascript

$("input[name='period']").click(function(){
if ($(this).val() == '1' || $(this).val() == '2' || $(this).val() == '3') {
  $('#form_search_dates').hide();
  var elem = $('#my-form')[0];
  $(elem).submit();
} 
else {
  $('#form_search_dates').show();
}
});

This is my controller action

class ShoppingsController < ApplicationController
  before_action :authenticate_user!
  load_and_authorize_resource

  rescue_from CanCan::AccessDenied do |exception|
    redirect_to root_url, :alert => exception.message
  end

  def search
    @shoppings = nil
    logger.debug "Dentro Search"
    @period = params[:period]
    if @period.present?
      logger.debug "Period: #{@period}"
      if @period == '1'
        logger.debug "Tutte"
        @shoppings = Shopping.where(:user_id => current_user.id).order(date_shopping: :asc)
      elsif @period == '2'
        logger.debug "Ultimi 7 giorni"
        @date_end = Date.today
        @date_start = @date_end - 7
        @shoppings = Shopping.where(:user_id => current_user.id).where(:date_shopping => @date_start..@date_end).order(date_shopping: :asc)
      elsif @period == '3'
        logger.debug "Ultimi 30 giorni"
        @date_end = Date.today
        @date_start = @date_end - 30
        @shoppings = Shopping.where(:user_id => current_user.id).where(:date_shopping => @date_start..@date_end).order(date_shopping: :asc)
        end
      else
        logger.debug "No parametri"
        @shoppings = Shopping.where(:user_id => current_user.id).order(date_shopping: :asc)
      end
   @result_total_price = @shoppings.sum(:total_price)
   respond_to do |format|
     format.html
     format.js
   end
 end

And this is my ability.rb

def initialize(user)
  can :create, Shopping
  can :read, Shopping, user_id: user.id
  can :update, Shopping, user_id: user.id
  can :destroy, Shopping, user_id: user.id

When I call the action clicking on radiobuttons, It does a redirect to the root url, and in console I see this

Started POST "/shoppings/search" for ::1 at 2023-12-19 12:18:00 +0100
Processing by ShoppingsController#search as JS
Parameters: {"authenticity_token"=>"[FILTERED]", "period"=>"2"}
User Load (0.5ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
Redirected to http://localhost:3000/
Completed 200 OK in 17ms (ActiveRecord: 0.5ms | Allocations: 2903)

I don't see the logs in the console, like it seems that it doesn't even start to execute the controller action, What am I missing? Thanks

Answer 1

this is the rendered HTML form

<form id="my-form" data-turbolinks="false" action="/shoppings/search" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="b4W-ish4XpxX_b6BSpIzeQ_sRLurmXmfFAJISUwuasOMZLK7ATRNMKmU4H4smqg-1WAnfdvZr4JJc2EyI8uFaw" autocomplete="off">
    <div class="form-group">
        <input type="radio" value="1" name="period" id="period_1"> 
        <label class="label_index" for="period">Tutte</label>

        <input type="radio" value="2" name="period" id="period_2"> 
        <label class="label_index" for="period">Ultimi 7 giorni</label>

        <input type="radio" value="3" name="period" id="period_3"> 
        <label class="label_index" for="period">Ultimi 30 giorni</label>

        <input type="radio" value="4" name="period" id="period_4"> 
        <label class="label_index" for="period">Cerca per date</label>
    </div>
 </form>

In console I have the error

Uncaught SyntaxError: Unexpected token 'T', "Turbolinks"... is not valid JSON

In Network tab in browser the answer is Turbolinks.clearCache() Turbolinks.visit("http://localhost:3000/", {"action":"replace"}) It does not render the search.js.erb file in the Views folder