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

What are the steps to setting up Webpack-simple with Vue Cli 3?

I'm completely new to Vue Cli and the Vue framework in general, so any help is appreciated! From what I understand, in Vue Cli 2, the command was something like this: Vue init webpack-simple xxx However, with the latest major update (3), it has cha ...

javascriptwebpackvue.js

Deactivate the Mention and Hash tag in ngx-linkifyjs

I am currently utilizing ngx-linkifyjs to automatically convert URLs in text to clickable hyperlinks. However, I am facing an issue where it is also converting # and @ tags into links. Is there a way to prevent the conversion of # and @ while maintain ...

javascriptangulartypescript

Clicking on an anchor tag will open a div and change the background color

.nav_bar { background: #c30015; margin-left: 50px; float: left; } .nav_bar ul { padding: 0; margin: 0; display: flex; border-bottom: thin white solid; } .nav_bar ul li { list-style: none; } .nav_bar ul li a { ...

javascriptjqueryhtmlcss

What is the best way to enforce a required bindings property in an AngularJS component?

Suppose I have the following component defined: angular.module('myApp').component('myComponent', { templateUrl: 'myComponent.html', bindings: { myPropOne: '<', myPropTwo: '<' ...

javascriptangularjsangularjs-components

Monitor Changes with Grunt: Be Prepared for Some Waiting!

My Grunt watch task is experiencing significant delays between detecting a file change and starting to work. Output similar to the following is frequently seen: >> File "src/static/app/brandManager/addChannel.html" changed. Running "html2js:main" ...

javascriptgruntjsgrunt-contrib-watch

Retrieving intricate JSON data from a specific web address

I need assistance in extracting and printing the date value from the JSON content available at the specified URL. Specifically, I am looking to retrieve the date value of "data.content.containers.container.locationDateTime" only if the "data.content.conta ...

javascriptphpjqueryjson

Generating unique ObjectIDs for each object is crucial before saving documents in Mongoose

I need to generate a unique ObjectID for every object within my array. The challenge is that I am fetching products from another server using a .forEach statement and adding them to my array without a Schema that automatically creates an ObjectID.... Prod ...

javascriptnode.jsmongoosemongoose-schemaobjectid

When referencing an object in AngularJS that is defined within the $scope, it is important to

Imagine having a NameController implemented in AngularJS. You can define variables like so: this.name = 'Joe'; Alternatively, you could use: $scope.name = 'Joe'; I have a preference for accessing all variables using object notation: ...

javascriptangularjsangularjs-scopeangularjs-controller

Creating Conditional Connections in jsPlumb

Attempting to establish connections between nodes based on specific rules, such as: The "API request" endpoint is restricted from connecting to any node except "Initiate Call". The "Failed" endpoint cannot be linked to "Play Audio", and so forth. Below ...

javascriptjqueryvue.jsjsplumb

Issue with AngularJs failing to display data

As a newcomer to AngularJS, I am looking to utilize AngularJs to display the Json output from my MVC controller. Here is the code snippet for my MVC Controller that generates Json: [HttpGet] public JsonResult GetAllData() { ...

javascriptangularjsjsonasp.net-mvcangularjs-directive

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...

javascripthtmlforms

Selenium in Perl: Facing a puzzling JavaScript error while attempting to resize window

Utilizing the Perl Selenium package known as WWW::Selenium, I have encountered a perplexing JavaScript error while attempting to resize the browser window. The error message reads: "Threw an exception: missing ; before statement". Below is the code snippe ...

javascriptperlselenium

Hide the burger menu when a link is clicked

Is there a way to make my Bootstrap burger menu automatically close when the user clicks on a menu link, rather than having to click on the burger itself? I've tried using some JavaScript code but it ends up disabling the burger menu entirely. Can any ...

javascripthtmlcssmenubootstrap-5

Dynamic HTML Generation using ASP.NET

Below is the code snippet that needs to be optimized: <asp:TemplateField HeaderText="Item Data"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "ItemData1") %> <br />&nbsp;&nbsp; <%# D ...

c#asp.nethtmldata-bindingitemtemplate

socket.io, along with their supporting servers

Can socket.io function separately from being the webserver? I prefer to utilize an external webserver, but in order for it to function properly I require /socket.io/socket.io.js. Is there a method other than duplicating[1] this file? I want to avoid comp ...

javascripthtmlnode.jsnginxsocket.io

Create an HTML table with a line separating two table cells

I need help with creating a table row and td's dynamically using basic HTML and CSS. I would like to draw lines between the td's similar to the example image shown below. Can someone please assist me in achieving this? https://i.sstatic.net/GPd ...

javascripthtmlcss

Google Cloud Endpoints API Encounter 404 Error

Scenario Currently, my setup involves AppEngine Cloud Endpoints using a Bootstrap JavaScript UI along with a Google SQL Datastore. Issue The problem arises when the Javascript tries to call gapi.client.load and receives a 404 error. Surprisingly, the ...

javascriptgoogle-app-enginegoogle-cloud-endpoints

The SetInterval function will continue to run within a web component even after the corresponding element has been removed from the

I am currently engaged in developing a straightforward application that coordinates multiple web components. Among these components, there is one that contains a setInterval function. Interestingly, the function continues to run even after the component it ...

javascripttypescriptsetintervalweb-component

What is the best method to transfer information between main.js and a specific directory?

Is there a way to efficiently pass data between the main and directory components? I would like to automatically activate the directive when main.js loads. Directive code: angular.module('dmv.shared.components'). directive('doImportPackag ...

javascriptangularjsangularjs-directiveangularjs-scopeelectron

JavaScript code that displays items in a shopping cart

I've set up the HTML and JS functionality for the cart, but I'm facing an issue where the JS doesn't render the cart items when the shop item is clicked. The styling in my HTML is done using Tailwind. If anyone could provide some assistance ...

javascripthtmlcss