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

Despite a valid entry from a list, the controller is receiving null values in MVC 4 with AJAX integration

Sort an array by mapping it in decreasing order based on the total sum of its elements

Is it possible to retrieve the vertices array from a QuickHull instance in three.js?

Is there a way to randomly change the colors of divs for a variable amount of time?

Utilizing AJAX to call a partial view

What is the correct method of implementing the "OnChange" event to a WooCommerce select element?

ng-grid defines different cellClass based on the value of the field

How can I use JavaScript to sort through an array and organize the data into groups?

Is it possible to merge createStackNavigator with createBottomTabNavigator for enhanced navigation functionality

Connect the jQuery UI droppable feature to the Lift ajax handler

When attempting to import my JSX file into page.js, I continue to encounter the error "module not found." How can I troubleshoot and resolve this issue in Visual Studio Code

Do we need to use the "new" keyword when using ObjectID in a MongoDB query

The input value in the HTML form was altered momentarily before reverting back to its original state

The retrieved item has not been linked to the React state

What is the best method for displaying a table using a JSON array?

Printing incorrect value in $.ajax call

Validation of forms using Javascript

Verify whether the div contains a specific class before triggering the animation

An issue with Nuxt.js causing body parameters to not be passed successfully while using this.$http.post

Having difficulty inserting an image with style="background-image:url(' ')" in Rails from the database