Encountering an unexpected Action Controller error while using Rails 4 and implementing unobtrusive JavaScript with AJAX requests

My current setup looks like this:

In the uploads_controller.rb file:

 class UploadsController < ApplicationController
    before_action :set_upload, only: [:show, :edit, :update, :destroy] 

   # GET /uploads
   def index
     @uploads = Upload.all
     update_file_status
     @uploads = Upload.all
   end

  # Other controller actions here...

   end

Then in the routes.rb file:

 match 'uploads/refresh_table', to: 'uploads#refresh_table', via: :get 
 resources :uploads

Content of uploads.js.coffee file:

 $(document).ready ->
    setInterval refresh_table, 5000

 refresh_table = ->
    $.ajax url: "/uploads/refresh_table"

Inside views/uploads/index.html.erb:

 <table class="table table-striped">
   <thead>
     <tr>
        <!-- table headers here -->
     </tr>
   </thead>
   <tbody>
     <%= render (@uploads)%> <%# partial _upload.html.erb %> 
   </tbody>
 </div>
 </table>

Partial view _upload.html.erb:

  <tr id= "uploads_table_rows">
    <!-- content for each upload item -->
  </tr>

Refresh table view in refresh_table.js.erb:

 $('#uploads_table_rows').html("<%=escape_javascript(render(@uploads)) %>");

Issue arises when accessing some_url/uploads/refresh_table:

  ActionController::UnknownFormat
 Request parameters 
 {"controller"=>"uploads", "action"=>"refresh_table"}

Server output:

 Started GET "/uploads/refresh_table" for 127.0.0.1 at 2014-01-02 21:10:26 -0500
 Processing by UploadsController#refresh_table as HTML
  Upload Load (0.3ms)  SELECT `uploads`.* FROM `uploads`

 Completed 500  in 2ms

 ActionController::UnknownFormat - ActionController::UnknownFormat:

After troubleshooting for 2 days, I can confirm that the routing is correct, but the JavaScript view is not being triggered. Assistance would be greatly appreciated. Thank you.

Answer №1

Experiment with the code snippet below in your uploads.js.coffee file:

$.ajax({
  url: "/uploads/refresh_list",
  dataType: 'json'
});

Your current action is designed to handle only ajax requests. However, the server is interpreting the ajax request as an HTML request, indicating that it is not being recognized as an ajax request.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for comparing and adding a field to a sub-array within an object

I have a scenario where I have two objects. The first object contains name and id, while the second object has some fields along with the id field from the first object. For Example: FirstObj = [{ _id: '48765465f42424', Name : 'Sample& ...

The request cannot be completed using GET. The connection has not been established, and the offline queue is not activated

Encountering this unexpected error in the live environment, despite implementing a retry strategy of 500ms and wrapping the setAsync and getAsync functions with a setTimeout of 1s. It's puzzling why this issue persists. Error Message: AbortError at ...

Exploring file writing using Node Webkit and JavaScript

When developing my app, I encountered an issue with the 'fs' module not functioning as expected. Despite the code being written to write a file, nothing happens when the app is launched. However, if I start the app using the following command: $ ...

Obtain individual information from XML

After fetching data from the server using ajax, I am looking to retrieve only a specific part of the data which is the name. How can I modify my code to achieve this? const url = 'https://jsonplaceholder.typicode.com/users' const xhr = new XMLH ...

Switching on Closed Captions for HTML5 video while deactivating the standard video controls

I am facing two issues. Whenever I include the track tag in my video element, the default controller of the video pops up, which is causing conflicts with my custom controls. Secondly, I am unable to figure out how to turn closed captions on and off. Thi ...

Trouble with the Ajax search feature in Laravel

No data is currently being displayed; console:finished loading: GET "http://todolist.local/teachers/search?text=a". I am attempting to display results in the tbody when a user types something in the search bar. Ajax code: <script> $(document).rea ...

Practical strategy for developing and launching a TypeScript/Node.js application

I'm currently developing a node.js app using Typescript, which requires compilation to JS before running. As someone with a background in java/jvm, I'm hesitant about the deployment process where code is pushed to git, built/compiled on the serve ...

jquery ready function key event

When using AJAX to load elements on my page, I have a requirement where pressing Enter should move the focus to the next input, textarea, or select element. Some inputs also have a number formatting function applied, but the current solution runs multipl ...

Creating a dynamic select input in React that displays a default value based on other user inputs

My dilemma involves working with two radio buttons, named radio1 and radio2, along with a select input. The options available in the select input are conditional based on the selected radio button. I am aiming to automatically set the value of the select t ...

Creating a synchronous loop in Node.js with Javascript

After exhausting various methods such as async/await, synchronous request libraries, promises, callbacks, and different looping techniques without success, I find myself seeking help. The task at hand involves calling the Zoom API to fetch a list of cloud ...

When utilizing a question mark in a string, there is a discrepancy between the encoding in asp.net server and URL encoding

When encoding a string in ASP.NET, I use the function Server.UrlEncode(GAE?), which results in the string GAE%3f. However, when using the JavaScript function encodeURIComponent(GAE?), the result is GAE%3F. Unfortunately, the validation of the string fail ...

How can I send and retrieve multiple variables in a URL using WordPress?

There seems to be an issue where I can only retrieve the first variable, specifically "product_category," from the URL http://localhost/coffeesite/?product_category=coffee&brand=bourbon. When I output JavaScript to confirm that the variables are set, ...

Integrate AngularJS service with Angular framework

Attempting to utilize the $log service within an angular 2 app, it seems that the following steps are necessary: Set up a module that includes the service you wish to inject. Utilize UpgradeAdapter's upgradeNg1Provider method. Therefore, I proceede ...

PHP is used in the while loop, but the output should be displayed using JavaScript

I need help with modifying my code to display individual MySQL results in message boxes using JavaScript. Currently, when I click on a message box, it only shows one result for every button. My goal is to have each button display its own unique message fr ...

What is the best method to fill a mat-select dropdown with an existing value?

I am encountering an issue with a mat-form-field that contains a dropdown of data fetched from an API. I can successfully select an option and save it to the form. However, upon returning to the dropdown or reloading the page, the saved value does not appe ...

Tips for resolving a post 405 error on a Windows 2012 R2 server

My test application is designed to record camera footage and send the file to a directory on my server. The main code for this application is shown below: <!DOCTYPE html> <html> <head> <script src="https://cdn.WebRTC-E ...

How to stop Mouseenter event from bubbling up in an unordered list of hyperlinks using Vue 3

I've experimented with various methods to prevent event bubbling on the mouseenter event, but I'm still encountering an issue. When I hover over a link, the event is triggered for all the links as if they were all being hovered over simultaneousl ...

An issue with MVC Ajax calls to an API resulting in a null model retrieval

I've been scratching my head for hours because I'm facing a strange issue with my API in one project, while everything is working fine in another project! The Problem: Here's the JavaScript code snippet: var data = new FormData(), ...

Implementing a sibling combinator technique within Material UI's useStyles framework

Is there a way to change the background of one div when hovering over another using material ui? The traditional CSS method is: #a:hover ~ #b { background: #ccc; } Here is my attempt with Material UI: const useStyles = makeStyles(theme => ({ ...

Is it more efficient to pass session variables through an ajax function, or should I access them directly within the script?

I am currently working on a page that utilizes an ajax function to retrieve updates from another page. The function requires the user's id, which is obtained from a session variable, to fetch any new updates. These updates are then displayed in a spec ...