Leveraging the power of JavaScript functions together with the asp:Timer component

<p><b> Progress: <asp:Label ID="progressPercentageLabel" runat="server"></asp:Label>%</b></p>    

<script>
        function updateBar()
        {
            var bar = document.getElementById("CompletionBar");
            var width = document.getElementById("progressPercentageLabel").innerText;
            bar.style.width = width + '%';
            document.getElementById("Percentage").innerHTML = width + '%';
        }
        setInterval(updateBar, 1000);
    </script>

    <asp:Timer ID="Timer1" runat="server" Interval="60000"></asp:Timer>

Is there a way to continuously update my loading bar every minute as directed by the Timer without displaying the Label? I'm struggling to connect the "width" variable to asp in order to have it behave like the label.

Appreciate any help. Thank you.

javascriptc#asp.netajax

Answer №1

If you're considering using the asp.net timer control, it is recommended to utilize an update panel and handle all operations on the server side like so:

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <p id="CompletionBar" runat="server"></p>
        <p><b> Completed: 
          <asp:Label ID="completedPercentageLabel" runat="server"></asp:Label>%
        </b></p>
    </ContentTemplate>
</asp:UpdatePanel>


<asp:Timer ID="Timer1" runat="server" Interval="60000" OnTick="timer_tick"></asp:Timer>

In the server-side handler:

protected void Timer1_Tick(object sender, EventArgs e)
{
    completedPercentageLabel.Text = <NEW VALUE>;

    CompletionBar.Style.Add("width","<NEW VALUE>px");
}

For further details, visit this MSDN page.

Answer №2

Utilizing an asp:HiddenField allows you to keep track of Progress without having it visible on the page.

Instead of creating your own progress bar, consider using the HTML5 progress element. For more information, visit: http://www.w3schools.com/TAgs/tag_progress.asp

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

Navigating array usage in Selenium IDE

I am trying to extract emails from a webpage using Selenium for future testing. I need to compare these emails with ones displayed in a selection later on. I attempted to read the emails within a while-loop but struggled with handling arrays in IDE. Unfor ...

javascriptarraysseleniumselenium-ide

Combining object IDs with identical values to create a new array in JavaScript

i have an array of objects that are a join between the transaction, product, and user tables. I want to merge IDs with the same value so that it can display two different sets of data in one object. Here's my data let test = [ { Transac ...

javascriptnode.jsarraysobject

Utilizing Express.js: A Guide to Fetching File Downloads with a POST Method

Although GET requests are successful, I am facing challenges when using POST to achieve the same results. Below are the different code snippets I have attempted: 1. app.post("/download", function (req, res) { res.download("./path"); }); 2. app.post ...

javascriptnode.jsexpress

Invoking a JavaScript function within a different JavaScript function

Is there a way to ensure that the JavaScript function works properly even when using a text editor? var editor = $('#CKEditor1').ckeditorGet(); editor.on("instanceReady", function () { this.document.on("keydown", function (event) { ...

javascriptjqueryaudio

TypeError: The function cannot be performed on the value of 0 in the Array.from

I encountered a peculiar error while attempting to utilize Array.from with Array.prototype.map. let fn = Array.from.bind(Array); // [Function: bound from] fn('test') // [ 't', 'e', 's', 't' ] ['test ...

javascriptarrays

Ways to retrieve the initial key object received through an AJAX request

I have a form with three dynamic dropdowns. The second dropdown depends on the first one, and the third dropdown depends on the second one. Therefore, selecting an option in the first dropdown will automatically populate the next two dropdowns. Below is t ...

javascriptjqueryajax

Schema-specific conditions for JSON data

I have been experimenting with the if-then-else statement in JSON, but I am encountering some issues with it. { "type": "object", "minProperties": 2, "maxProperties": 2, "properties": { "human": { "enum": [ "Kids", "Ad ...

javascriptarraysjsonif-statement

Tips for altering a key within a tree-view:

I am working with a potentially infinite tree-view array: type Tree = { id: number; name: string; email: string; children: Tree[]; }; const tree: Tree[] = [ { id: 1, name: 'Truck', email: '@mail', children ...

javascripttypescriptrecursiontreetreeview

Issue with xsl:include functionality in a Firefox extension

I've been working on a Firefox extension that utilizes XSL transformations with no issues. However, I encountered a problem when trying to perform an xsl:include from the XSL stylesheet. Upon importing the XSL stylesheet containing an xsl:include stat ...

javascriptxsltfirefox-addon

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...

javascripthtmlcssdom

Utilize Set.Attribute prior to entering the for loop

Could someone please clarify why I am unable to declare the var node before the for loop and then simply use appendChild(node) inside the loop? Why is it necessary to declare it for each iteration in order for it to affect all div elements? Otherwise, it w ...

javascript

What could be causing the lack of data for the current user?

I have been attempting to fetch the current user session and display the data in the view, but nothing is appearing. I even checked the database and confirmed an active session with all the necessary information. I attempted logging the user out and starti ...

javascriptnode.jsexpressparse-platform

Extract information from a webpage using Selenium WebDriver

Currently, I am working on mastering Selenium, but I have hit a roadblock that I need assistance with. My task is to gather all the betting information for games from the following link and store it into an array. Given my limited experience with HTML an ...

javascriptseleniumselenium-webdriverautomated-tests

In my sequence of Promises, a "reject is not defined" error led to the rejection of a Promise

In my code, I set up a chain of Promises like this: let promise = new Promise((resolve, reject) => { imgToDisplay.onload = () => { resolve(imgToDisplay.width); } }) .then((result) => { window.URL.revokeObjectURL(imgToD ...

javascriptpromisees6-promise

I need to know the right way to send a file encoded in Windows-1255 using Express

I'm currently developing an API that is responsible for generating text files. The purpose of this API is to support legacy software that specifically requires the use of Windows 1255 encoding for these files. To create the content of the file, I am r ...

javascriptnode.jsexpresscharacter-encodingiconv

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

Troubleshooting problem with sorting in Angular 4 material header

Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. It displays "Sorted by ascending order" here. The ngx modal theme ...

javascripthtmlangulartypescriptangular-cdk

After successfully sending a GET request to the API, the Next.js 13.4.3 website still does not reflect new posts added on the hosting platform

I am currently using Next.js version 13.4.3 in my app directory to create a blog site. However, I am facing an issue. When I run npm run build locally on my computer and then start with npm run start, the new posts are displayed normally after adding them ...

javascriptnode.jsreactjsnext.jsfrontend

Is it possible to cache silverlight WCF service calls?

The service being called by the application is using WCF BinaryEncoding and requires 3 parameters. While I have experience with making similar calls using JavaScript Ajax stacks, I have not attempted it with Silverlight before. I am wondering if this is p ...

ajaxsilverlightweb-services

Converting long date format to short date format: yyyy-mm-dd

Is there a way to convert the long date format from "Sat Dec 13 2014 06:00:00 GMT+0600" to "2014-12-13" in yyyy-mm-dd format? <script> function myDate(val) { var now = new Date("<?php echo $Cnextdue;?>"); now.setDate(now.getDate() + 30*val); ...

javascriptdatedatetime