I'm encountering a "406 Not Acceptable" error in my Stimulus controller's fetch request. The controller is responsible for making an AJAX call to an endpoint, but it seems the server is unable to fulfill the request due to content type issues. Specifically, the fetch request includes an "Accept" header with the value "text/vnd.turbo-stream.html". However, it appears that the server cannot provide this content type.
My edit_description.js code:
import { Controller } from "@hotwired/stimulus"// Connects to data-controller="edit-user-description"export default class extends Controller { connect() { console.log("I Am Connected"); } initialize(){ this.element.setAttribute('data-action','click->edit-user-description#showModal') } showModal(event){ event.preventDefault() this.url = this.element.getAttribute('href') fetch(this.url,{ headers: { Accept: "text/vnd.turbo-stream.html" } }) .then(response => response.text()) .then(html => Turbo.renderStreamMessage(html)) }}And _description_modal.html.erb:
<%= turbo_frame_tag :remote_modal, target: :top do %><!-- Main modal --><div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full". data-controller="bs-modal"><div class="relative p-4 w-full max-w-2xl max-h-full"><!-- Modal content --><div class="relative bg-white rounded-lg shadow dark:bg-gray-700"><!-- Modal header --><div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"><h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Terms of Service</h3><button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal"><svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/></svg><span class="sr-only">Close modal</span></button></div><!-- Modal body --><%= form_with model: @user, url: "#" do |form|%><div class="p-4 md:p-5 space-y-4"><p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"><%= form.label :description %>``your text``<%= form.text_area :about, value: @user.about , rows: 15%></p><p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"></p></div><!-- Modal footer --><div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"><%= form.submit 'Save Changes', data: { action: 'click->bs-modal#submitEnd' } %><button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Close</button></div><%end%></div></div></div><% end %>In the edit_description_turbo_stream.erb:
<%= turbo_stream.replace 'remote_modal' do %><%= render 'description_modal' %><% end %>I have tried various like
<%= turbo_include_tags %>import { Turbo } from "turbo"
2-3 solutions from google. But error is still not resolved.
I need guidance on how to adjust the fetch request to ensure that the server can respond with an acceptable content type and resolve the "406 Not Acceptable" error. The Stimulus controller is written in JavaScript and uses the Turbo library for rendering stream messages.
Any suggestions or code snippets to modify the fetch request to specify an acceptable content type would be greatly appreciated. Additionally, advice on how to handle errors gracefully within the Stimulus controller when encountering the "406 Not Acceptable" response would be helpful.