Getting a 406 (Not acceptable) error when trying to perform an AJAX action in Rails 4

Question

Getting a 406 (Not acceptable) error when trying to perform an AJAX action in Rails 4

I am attempting to automatically refresh a specific partial view every 60 seconds on the homepage. To make it easier to manage, I have divided the actions into two routes. However, I am encountering an issue with the respond_to block and could use some assistance in finding a better approach.

feed_controller.rb

def index
 @hashtags = hashtag_refresh
end

def hashtag_refresh
 Hashtag.order('created_at DESC').limit(10).uniq
 respond_to do |format|
  format.js
end
end

feed\hashtag_refresh.js.erb

 $('.trends_li_container').html("<%= escape_javascript(render('feed/shared/hashtag_list')).html_safe %>");

routes.rb

get 'feed/hashtag_refresh', to: 'feed#hashtag_refresh'

hashtag_autorefresh.js

//Refresh Hashtags Partial
$(document).ready(function (){
    setTimeout(refreshHashtag, 60000)
});

//Calls action refreshing the partial
function refreshHashtag() {
    $.ajax({
        url: 'feed/hashtag_refresh',
        type: 'GET',
        dataType: 'script'
    })
}

feed/shared/ folder _hashtag_list.html.erb

feed/ controller folder hashtag_refresh.js.erb

Server Development Log

  Started GET "/feed/hashtag_refresh?_=1462210930323" for 127.0.0.1 at 2016-05-02 13:45:05 -0400
    Processing by FeedController#hashtag_refresh as JS
      Parameters: {"_"=>"1462210930323"}
      User Load (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 5]]
      Rendered feed/shared/_hashtag_list.html.erb (0.0ms)
      Rendered feed/hashtag_refresh.js.erb (11.5ms)
    Completed 200 OK in 50ms (Views: 47.5ms | ActiveRecord: 0.0ms)

javascript ruby-on-rails ruby ajax

Answer 1

Answer №1

Consider updating your refreshHashtag() function with the following changes:

// Function for refreshing the hashtag content
function refreshHashtag() {
    $.ajax({
        url: 'feed/hashtag_refresh'
        type: 'GET', //POST
        dataType: 'script'
    })
}

Answer 2

Consider updating your refreshHashtag() function with the following changes:

// Function for refreshing the hashtag content
function refreshHashtag() {
    $.ajax({
        url: 'feed/hashtag_refresh'
        type: 'GET', //POST
        dataType: 'script'
    })
}

Answer 3

Answer №2

It seems like the issue lies in the return value of hashtag_refresh. Instead of returning a collection of Hashtags, it is actually returning the result of respond_to, which is unknown to me :P

To fix this, you can update your controller as follows:

def index
  hashtag_refresh do |hashtags|
    @hashtags = hashtags
  end
end

def hashtag_refresh
  yield Hashtag.order('created_at DESC').limit(10).uniq
  respond_to do |format|
    format.js
  end
end

For your JavaScript code:

// Refresh Hashtags Partial
$(document).ready(function (){
  setInterval(refreshHashtag, 60000)
});


// Calls action refreshing the partial
function refreshHashtag() {
  $.ajax({
    url: 'feed/hashtag_refresh.js',
    dataType: 'javascript'
  })
}

It's recommended to use setTimeout instead of setInterval for recursive calls in JavaScript to avoid running indefinitely if not canceled manually. Here's an updated version:

//Refresh Hashtags Partial
$(document).ready(function (){
  (function refreshHashtag() {
    $.ajax({
      url: 'feed/hashtag_refresh.js',
      dataType: 'javascript'
    }).then(function() {
      setTimeout(refreshHashtag, 60000);
    });
  })();
});

I hope this helps resolve your problem :)

UPDATE

If you encounter the error ActionController::UnknownFormat, it indicates that Rails does not recognize the format js or the mime type text/javascript. You can add some configuration in

config/initializers/mime_types.rb

to address this:

config/initializers/mime_types.rb

# The RFC standard mime type for javascript
Mime::Type.register "application/javascript", :js

# The legacy but widely used mime types for javascript
Mime::Type.register "text/javascript", :js
Mime::Type.register "application/x-javascript", :js

Answer 4

It seems like the issue lies in the return value of hashtag_refresh. Instead of returning a collection of Hashtags, it is actually returning the result of respond_to, which is unknown to me :P

To fix this, you can update your controller as follows:

def index
  hashtag_refresh do |hashtags|
    @hashtags = hashtags
  end
end

def hashtag_refresh
  yield Hashtag.order('created_at DESC').limit(10).uniq
  respond_to do |format|
    format.js
  end
end

For your JavaScript code:

// Refresh Hashtags Partial
$(document).ready(function (){
  setInterval(refreshHashtag, 60000)
});


// Calls action refreshing the partial
function refreshHashtag() {
  $.ajax({
    url: 'feed/hashtag_refresh.js',
    dataType: 'javascript'
  })
}

It's recommended to use setTimeout instead of setInterval for recursive calls in JavaScript to avoid running indefinitely if not canceled manually. Here's an updated version:

//Refresh Hashtags Partial
$(document).ready(function (){
  (function refreshHashtag() {
    $.ajax({
      url: 'feed/hashtag_refresh.js',
      dataType: 'javascript'
    }).then(function() {
      setTimeout(refreshHashtag, 60000);
    });
  })();
});

I hope this helps resolve your problem :)

UPDATE

If you encounter the error ActionController::UnknownFormat, it indicates that Rails does not recognize the format js or the mime type text/javascript. You can add some configuration in

config/initializers/mime_types.rb

to address this:

config/initializers/mime_types.rb

# The RFC standard mime type for javascript
Mime::Type.register "application/javascript", :js

# The legacy but widely used mime types for javascript
Mime::Type.register "text/javascript", :js
Mime::Type.register "application/x-javascript", :js

Getting a 406 (Not acceptable) error when trying to perform an AJAX action in Rails 4

Answer №1

Answer №2

UPDATE

Similar questions

The issue of appending request URLs in the $.ajax function

Move files into the designated folder and bundle them together before publishing

The ancient oracle of Delphi and the modern login portal of Microsoft

Issue with dropdown list removeClass function

Canceling a window in JSP and navigating back to the previous page using JavaScript

The use of '-' in v-bind:style within Vue.js

I'm experiencing very slow page load times in dev mode with Next.js (30s+). What could be the reason behind this sluggishness?

The Bcrypt hashed password does not match the password hash stored in Mongodb

A step-by-step guide on accessing and displaying local Storage JSON data in the index.html file of an Angular project, showcasing it on the

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

Troubleshooting React: Child Component Fails to Render

Personalized parallax design

Excessive recursion in MooTools causing issues with Google Maps integration

Responsive design in Android does not function as intended

What are the steps to effectively incorporate Jquery Ajax in a success function?

Does vite handle module imports differently during development versus production?

A Guide on Adding Excel-Like Filtering Functionality to AngularJS

Can minification of JS be achieved in a Jekyll environment?

Utilizing loop variables in ng-class and ng-click directive

Developing a vanilla JavaScript web component with distinct HTML and JavaScript files