Enhancing server-side progress in a Rails application

In my Ruby on Rails application, I am looking to implement a file upload and processing feature. The upload process is usually quick, but the server-side processing can sometimes take more than 20 seconds. In order to provide a better user experience, I want to display a progress indicator instead of a generic 'processing...' message.

I have attempted to use the following code snippet in the view:

<%= periodically_call_remote(:url => {:action => 'progress_monitor', :controller => 'files'},
                 :frequency => '5',
                 :update => "setProgress('progressBar','5')"
                 ) %>

The JavaScript function specified in the :update parameter will be executed every 5 seconds.

Furthermore, the files controller contains the following code:

def progress_monitor
  render :text => 'whatever'
end

Ultimately, the progress_monitor method should return an integer value representing the current progress (e.g., % complete). This value will then be passed to the 'setProgress' JavaScript function to update a specific on-screen element.

However, I'm encountering difficulties in obtaining the correct response from the server that can be utilized by JavaScript.

If anyone could offer assistance or suggest an alternative approach, it would be greatly appreciated.

For related inquiries, please refer to the updated question link provided here: here.

Answer №1

periodically_call_remote() is responsible for updating a div, without triggering your JavaScript function. While I may not be a JavaScript expert, the solution to your issue lies in making your own xmlhttp call. Personally, I recommend utilizing prototype's AJAX request.

Check out this link for more information.

You can also use JavaScript's settimeout or setinterval functions for periodic polling.

Visit this website for helpful insights on using settimeout and setinterval in JavaScript.

I hope this advice proves useful, as I have faced a similar problem before too. =)

Answer №2

It is important to note that the :update option should specifically identify the div you want to update, rather than containing JavaScript code for evaluation.

Utilizing Rails helpers remains a strong choice in this scenario, eliminating the need for extensive custom JS. If you desire to execute JS upon return, consider utilizing an RJS template. For those preferring to use pure HTML, simply render a view (or partial), or directly return the progress bar HTML from the render method and include the progress bar div within the :update option of the periodically_call_remote method.

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 on searching for an entry in a database with TypeScript union types when the type is either a string or an array of strings

When calling the sendEmail method, emails can be sent to either a single user or multiple users (with the variable type string | string[]). I'm trying to find a more efficient and cleaner way to distinguish between the two in order to search for them ...

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

How can one effectively identify a JSON request in ASP.NET?

Many ajax frameworks often rely on the "X-Request-With" standard, included either in a header or the query string. In ASP.NET MVC, you have the option to utilize the extension method Request.IsAjaxRequest() Since an ajax client can request various conte ...

Understanding Variable Scope in JavaScript: How Variables are Accessed in Different Functions

I've been experimenting with a script that utilizes jQuery's get function to transfer data to another page and display the returned information as an alert on the current page. My goal is to send both the search field value from an input form (wh ...

Can someone guide me on how to personalize a marker icon in Quasar while utilizing Vue2-Leaflet for mapping?

I'm facing an issue with displaying an icon marker image in my Vue2-Leaflet and Quasar project. Instead of the desired image, I am seeing a broken image icon and encountering a 404 error in the console. Despite researching various solutions, I was abl ...

jQuery setInterval is not functioning as expected

I need help comparing two password fields and displaying a Popover message if they do not match. HTML <div class="form-group col-lg-6"> <label>Password</label> <input type="password" class="form-control" name="password" id="p ...

How can I identify when a browser window is maximized using JavaScript or CSS?

I am currently working on a dashboard designed for static display on large monitors or TVs for clients. My main goal is to implement CSS styling, specifically a snap-scroll feature, but only when the display is in 'fullscreen' or 'maximized& ...

Prototype: Trigger keydown event on the document and cease observation when focus is on a form

I'm implementing next/previous page functionality with AJAX and left/right arrow keys (similar to Facebook). It's all working fine, but I have a form on the page. When a user focuses on the form, I need to stop listening for left/right key presse ...

Using Mongoose schema with a reference to an undefined 'ObjectID' data type

I am currently working on establishing relationships between my schemas, and I have encountered some issues with my solution. Here is how my device schema looks like: var deviceSchema = schema({ name : String, type : String, room: {type: mongo ...

Experimenting with React components that showcase various components in a loop

Currently, I am working on a react-native app where I have a simple component that receives an array and displays it as markers on a map using react-native-maps. My goal is to write tests for this component. The test should verify that there is a marker p ...

Show a variety of pictures in a random arrangement?

Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...

Vercel offers unique functionality specifically designed for Next.js

As part of my application migration process, I am transitioning to the nextjs framework. I am curious if all the features and functionalities offered by Next.js can be replicated on private Docker servers or other Jamstack platforms, or if there are limi ...

Updating the TextField in React Material UI based on the Slider value without affecting the Slider

Is there a way to update the value of a TextField based on the slider, while still allowing manual input in the TextField? I want the TextField to reflect changes from the slider but not vice versa. I attempted making the TextField a controlled component ...

Converting a string to JSON format with JavaScript

My string is structured in JSON format like this: "{""c1"": ""value1"", ""c2"": ""value2""}" After storing it in an SQLITE database, I use the following Javascript code to retrieve it back as JSON: var req= "SELECT json_column from my_table"; var re ...

Customizing Your Google Maps Experience

I've encountered an issue with this code that's causing it to break when I attempt to apply stylers for customizing the colors of my Google Map. Can someone please help steer me in the right direction? What am I missing here? function initialize ...

Is it possible for AJAX to return HTML files instead of just the data value on success?

I am trying to retrieve the user timezone using a simple AJAX code after they log in to the dashboard successfully. JavaScript <script type="text/javascript> $(document).ready(function(){ 'use strict'; /** * Getting user curr ...

Get rid of the "%20" by replacing it with nothing

In my ASP.NET site, I have a redirect that redirects to a new URL. The original URL is.... site.com/7201231234/First%20Last/campaign/7201231234/ After the redirect, the issue is with the URL (campaign%20 is the problem now) site.com/7201231234/First%20 ...

V-Calendar is not displaying the accurate dates

https://i.stack.imgur.com/zk4h7.png The image displays dates starting on June 1, 2022, which should be a Wednesday but appears as a Sunday on the calendar. This issue affects all months as they start on a Sunday instead of their respective weekdays. The p ...

Attempting to add text one letter at a time

Hey there! I'm new to JavaScript and Jquery, and I need some help. My goal is to display text letter by letter when a button is clicked using the setTimeout function. However, I seem to be encountering some issues. Any assistance would be greatly appr ...

Is there a way to access the refScrollView.current value in a React Native application?

Working on a project with react-native I am trying to retrieve my scroll position by using a ScrollView component. However, when I execute my code and print console.log(refScrollView.current) it returns `null` How can I access the value of refScrollVie ...