Infinte-scroll Rails and Webpacker Failed to load resource: the server responded with a status of 406 (Not Acceptable)

Question

I tried successfully to reproduce the tutorial of GoRails about the infinite scroll with stimulus https://gorails.com/episodes/infinite-scroll-stimulus-js on a new Rails 6 project , but impossible to reproduce to a older and bigger project updated to rails 6, including webpacker. I use Pagy. And the goal is to scroll pictures. But it doesn't work when I am at the bottom at the page, and don't load the page 2 automatically, and i get a 406 (Not Acceptable) error in the console

my Html 'newsfeed' where Pagy is:

<div data-controller="infinite-scroll">
    <div data-infinite-scroll-target="entries">
        <%= render "newsfeedpictures" %>
    </div>
    <div data-infinite-scroll-target="pagination">
        <%== pagy_nav(@pagy) %>
    </div>
</div>

the partial newsfeedpictures:

<% @pictures.each do |pic| %>
  <% if pic.image.attached? %>
      <% image_tag(pic.try(:hd_image), :secure => true, class: "img-responsive") %>
  <% end %>
<% end %>

The controller :

@pagy, @pictures = pagy(Picture.order(created_at: :desc), items: 5)

respond_to do |format|
  format.html
  format.json {
    render json: { entries: render_to_string(partial: "newsfeedpictures", formats: [:html]), pagination: view_context.pagy_nav(@pagy) }
  }
end

The infinite scroll js , where i think the problem is :

  loadMore() {
    let next_page = this.paginationTarget.querySelector("a[rel='next']")
    if (next_page == null) { return }
    let url = next_page.href
    console.log("loadmore");

    Rails.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      success: (data) => {
        console.log(data)
        this.entriesTarget.insertAdjacentHTML('beforeend', data.entries)
        this.paginationTarget.innerHTML = data.pagination
      }
    })
  }

The server response when i scroll at the bottom :

Started GET "/pictures/newsfeed?locale=fr&page=2" for 127.0.0.1 at 2021-06-13 17:27:27 +0200
Processing by PicturesController#newsfeed as GEOJSON
  Parameters: {"locale"=>"fr", "page"=>"2"}
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
   (0.2ms)  SELECT COUNT(*) FROM "pictures"
Completed 406 Not Acceptable in 5ms (ActiveRecord: 0.4ms | Allocations: 1468)


User excluded error: #<ActionController::UnknownFormat: PicturesController#newsfeed is missing a template for this request format and variant.

request.formats: ["application/json", "text/javascript", "*/*"]
request.variant: []>
  
ActionController::UnknownFormat (PicturesController#newsfeed is missing a template for this request format and variant.

request.formats: ["application/json", "text/javascript", "*/*"]
request.variant: []):

The console in Chrome:

rails-ujs.js:216 GET http://localhost:3000/pictures/newsfeed?locale=fr&page=2 406 (Not Acceptable)
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax @ rails-ujs.js:216
loadMore @ infinite_scroll_controller.js:37
(anonymous) @ infinite_scroll_controller.js:26
processIntersectionEntries @ infinite_scroll_controller.js:24
(anonymous) @ infinite_scroll_controller.js:12

The rails-ujs.js line 216 is

    if (xhr.readyState === XMLHttpRequest.OPENED) {
      return xhr.send(options.data);
    }

The json seems to be ok because i have something at this url : http://localhost:3000/pictures/newsfeed.json?locale=fr And I think that the have the problem is with the Rails.ajax dataType: 'json'

Infinte-scroll Rails and Webpacker Failed to load resource: the server responded with a status of 406 (Not Acceptable)

0 Answers0