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);
javascriptajaxcsvprogress-bar

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

Is it possible to execute a Google Script on the last row of a spreadsheet exclusively

I have an email script that is functioning correctly, but I only want it to run through the last row with data in it. If there is no data in a row, then I do not need the script to run for that specific row. How can I modify the example script below to ref ...

javascriptfor-loopgoogle-apps-scriptgoogle-sheets

extract information from the request header

One of the functionalities in my application involves making Ajax requests to the server. $.ajax({ type: "get", beforeSend: function (jqXHR) { jqXHR.setRequestHeader(ZO_KEY1, _key1); jqXHR.setReq ...

javascriptjqueryruby-on-railsajax

Sorting through a collection of subarrays

Within my application, the structure is set up as follows: [ ["section title", [{ item }, { item } ... ]], ["section title", [{ item }, { item } ... ]], ... and so forth When displayed in the view, the sections are placed in panels, with their internal ...

javascripthtmlangularjs

How can we ensure successful validation using Jquery?

I'm currently working on a basic form that includes text fields. Whenever these text fields are modified, an Ajax function is called to save the changes. However, I am facing a challenge in validating these fields using jQuery before the change even ...

javascriptjquery-uijqueryjquery-plugins

Tips on dividing and recycling mongodb connection in Node.js

I am currently troubleshooting the connection to MongoDB using Node.js. The code I have in a file named mongodb.js is as follows: const mongoClient = require('mongodb').MongoClient; const env = process.env.NODE_ENV || 'development'; co ...

javascriptnode.jsmongodbexpress

Investigate issues with POST data requests

I recently utilized a REST API to send a POST request. Upon clicking on the function addmode(), a textbox is displayed allowing users to input data. However, upon clicking the save() button, an unexpected error occurs and redirects to a PUT Request. Using ...

javascriptangularjs

Warning: The use of 'node --inspect --debug-brk' is outdated and no longer recommended

Encountering this error for the first time, please forgive any oversight on my part. The complete error message I am receiving when running my code is: (node:10812) [DEP0062] DeprecationWarning: `node --inspect --debug-brk` is deprecated. Please use `node ...

javascriptnode.jsmongodbexpressmongoose

What could be the reason for the GET request not functioning properly in Node.js?

const express = require('express'); const mongoose = require ("mongoose"); const app = express(); const Student = require('../models/students'); require('dotenv').config(); const PORT = process.env.PORT || 3000; const co ...

javascriptnode.jsangularmean

Tips for creating visually appealing text on a web browser with the help of open-source libraries

Have you ever noticed that no matter how we display text on webpages, whether it's in a <p> tag or an <h1> tag, the result is always the same? (a screenshot of a rendering done in Firefox) Do you struggle with pixelated areas on the curv ...

phpjavascripthtml

The GraphQL Resolver function that returns an object

When querying with GraphQL, I receive results in the following format: { "data": { "events": [ { "_id": "65f0653eb454c315ad62b416", "name": "Event name", " ...

javascriptgraphql

Incorporating a pre-existing component into a Vue.JS template through an onclick event: How can this

I'm trying to enhance my template by implementing a feature that allows me to add a component simply by clicking on a button. Let me give you a glimpse of what I have in mind: The component named Draggable.vue is the one I intend to incorporate upon c ...

javascripthtmlvue.js

Setting an AJAX response as the value of a modal form

One of the functionalities on my website involves a button that, when clicked, triggers the opening of a modal form and sends an ajax request to a php page. This request includes an id from a specific table in the database. The php page then retrieves a ...

phpjqueryajaxbootstrap-modal

Exploring the Express problem with AWS SNS web service subscriptions using a Sinatra case study

I'm currently working on developing an auto-subscription API that sends back a token via POST. While I have successfully implemented this in Sinatra (rendering the POSTed JSON from AWS), I'm facing challenges with Express. I believe it's jus ...

javascriptnode.jsamazon-web-servicesexpressamazon-sns

Change web page in JavaScript using post data

Is there a method to utilize JavaScript for navigating to a new URL while including POST parameters? I am aware that with GET requests, you can simply add a parameter string to the URL using window.location.replace(). Is there a way to achieve this with ...

javascriptjqueryajaxpost

jquery attempting to refresh modal dialog using data fetched through ajax

On my page, I have a section where users' contact information is shown. If they need to make changes, there's an "Edit" button that triggers a modal dialog box with a form prepopulated with their current data. This functionality was working perfe ...

jqueryajaxmodal-dialog

Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged ...

javascripthtmlcss

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

I have been trying to troubleshoot this issue, but I am having trouble understanding how to resolve it. Currently, I am using lottie-web in a project and need to set the animation parameters on an object in order to pass them as a parameter later. This i ...

javascriptjsonparsingvue.jslottie

How can I trigger a masterpage function from a contentpage in asp.net?

I am trying to call a function on the masterpage from a content page in the codebehind. Here is my attempt: ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alert__", string.Format("setStatusBarMessage('{0}',{1});", barMessage, ty ...

javascriptasp.netmaster-pages

Tips for maintaining focus on an editable div using jQuery

Is there a way to prevent an editable div from becoming unfocused when clicking on a formatting bar created using jQuery? I've been trying to implement this feature but can't seem to figure it out. Any advice would be greatly appreciated. Many th ...

javascriptjqueryhtmlcontenteditable

Invoke a Google Apps Script through AJAX that necessitates authentication

I am looking to access a Google Apps Script via AJAX that requires user authorization to send an email from their Gmail account. The challenge lies in the fact that I need to send the email from within the Google Apps Script. The call originates from my w ...

javascriptajaxgoogle-apps-scriptoauth-2.0google-oauth