Generating progress bar in Javascript while exporting CSV fileCan JavaScript export CSV and

Looking for a way to add a progress bar while generating and serving a CSV file via ajax? The database-heavy process is causing a delay, so I need a loader on the screen that disappears once the task is complete. It should be done with ajax or stay on the same page if possible. Currently using the code below, but struggling to determine when the download is finished in order to stop the progress:

var iframe = document.createElement("iframe");
                iframe.src = (value.url);
                iframe.style.display = "none";
                document.body.appendChild(iframe);

Answer №1

From what I gather, it seems like you are creating a file on the server side upon receiving a request, saving it to disk, and then serving it from there. If this is indeed your process, you have two possible solutions:

  1. Update a shared state (such as memcached, redis, mongodb, sqlite database, or a file) in your generating code at the beginning of the file generation with the total number of rows to generate and the current number of rows generated. Then, make additional ajax requests to an endpoint that retrieves the current values from that shared state.
  2. Send the generated CSV file directly back to the client - if the data retrieval process doesn't take up the majority of the time, this method will show the download dialog faster, giving the illusion of quicker speed.

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

Choosing between radio buttons either horizontally or vertically within a table

Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...

Develop two varieties of user account models using Mongodb/Mongoose

Currently, I am utilizing mongoose in my nodejs project and I am seeking advice on creating a MongoDB schema that caters to two different user types: employees and clients. Both of these users will be registering through the same page (I am implementing pa ...

Unforeseen anomalies arise when deleting an element from an array in a React application

I've been scouring for a solution, but I could really use some human guidance. I have a basic form where users can input additional fields. They also have the option to delete irrelevant fields. The problem arises when trying to remove these fields. ...

Can someone help me figure out the issue with my Angularjs ng-repeat implementation?

After spending hours trying to figure out why something so simple is not working, I'm at a loss. Testing with a dummy list proves the functionality works, but when I connect my server-side data source, it fails. The JSON returned from the AJAX call i ...

Exploring Vue CLI: Guidelines for updating, deleting, and browsing through all available plugins

After diving into the world of Vue.js, I quickly realized that Vue CLI is essential for speedy development. I got it up and running, created an app, and everything seems to be going smoothly. I decided to enhance my project by adding the Vuetify.js plugin ...

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

Retrieve the element (node) responsible for initiating the event

Is there a way to identify which element triggered the event currently being handled? In the following code snippet, event.target is only returning the innermost child node of #xScrollPane, with both event.currentTarget and event.fromElement being null. A ...

Dynamic manipulation of classes based on user attributes

One thing I've noticed is that certain WordPress themes, like 'Thematic', include user-specific classes in the body element to avoid using CSS browser hacks. For example: wordpress y2010 m02 d26 h05 home singular slug-home page pageid-94 pa ...

Looking to showcase elements within an array inside an object using ng-repeat

In this JSON dataset, we have information about various anchoring products. These products include anchors, cleats, snubbers, shackles, and more. When it comes to displaying these products on an HTML page using Angular, make sure to properly reference the ...

The HTTP response object in Express does not provide any data in its return

While working on developing a server using express js, I encountered an issue. When I send a get request to my endpoint from another server, the response is received successfully; however, it does not contain the data that was sent by the server after res. ...

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

In search of a straightforward AJAX script with minimal complexity

Looking for a straightforward and uncomplicated AJAX script. Anyone have a sample of this type of script to share? This is the setup I have: There's a PHP script on the server that outputs the current date and time on the server All I need is the ...

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters. The search re ...

Can the image be adjusted based on different time zones around the world?

How can I create an HTML banner that changes images based on the time of day? I want one image to display between 7pm and 6am, and another image during the rest of the day. I came across a helpful website that achieves this by changing the image according ...

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

Send the user authentication form to a different location by using an AJAX request

I am in the process of developing a .Net Web application using ASP MVC, jQuery & AJAX. Within this application, I have a list of products. When a user clicks on the detail button of a specific product, they are taken to a details view which includes an "Ad ...

Ways to bring GIFs into NextJS

I am currently working on my portfolio website using Nextjs and I would like to incorporate gifs into the site. However, I have been struggling to figure out how to do so. Below is the code that I have been working with: https://i.stack.imgur.com/zjoiD.pn ...

What is the method for accessing the req, res objects within the callback functions?

One of my preferences is to access the req, res, next objects outside of the middleware function. For instance, in a sample middleware file called sample.js: var app = express(); .... ..... .... var updateUserInput = { init:function(){ get_data ...

Encountered an error stating 'Cannot read property 'user' of undefined' while attempting to generate a user document during account creation using Firebase

I'm having trouble adding the user ID to a new collection named 'accounts' during account creation. I keep encountering an error that says 'Cannot read property 'user' of undefined'. Can someone please help me troubleshoo ...