Using JavaScript to disable and re-enable an ASP.NET Timer control

I currently have a webpage built with ASP.Net that includes an ASP:Timer control

<asp:Timer ID="TimerRefresh" runat="server" Interval="5000" Enabled="true" OnTick="TimerRefresh_Tick">
</asp:Timer>

It is connected to an asp:UpdatePanel on the page, allowing for a specific section of the page to refresh asynchronously.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="TopRow" id="TopRowPlace" runat="server">
        ... Additional HTML Code goes here...
        </div>
    </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TimerRefresh" />
        </Triggers>
</asp:UpdatePanel>

An issue arises when the DIV tag containing the dynamically updated HTML can be hidden by changing the display property to none due to certain user actions. In such cases, there is no need for the content to be updated since it's not visible.

Is there a way in JavaScript to stop the timer from triggering the asynchronous post-back, and then re-enable it once the DIV tag becomes visible again?

asp.netjavascripttimer

Answer №1

After examining the JavaScript code triggered by a Timer on one of my WebForms' BODY.onload event, I've come to the conclusion that it's not a simple task to modify it unless you are willing to delve into overriding the Timer's properties and combining it with additional client-side JavaScript. So, what occurs within your DIV element when you mention:

...which is updated asynchronously can be hidden (...) when a user performs certain actions.

Do these actions take place on the server side? If that's the case, perhaps disabling the timer on the server based on events occurring in the DIV could be a viable solution.
In my WebForm, I have an UpdatePanel containing a CheckBox that triggers AutoPostBack and has a CheckedChanged event handler. When the CheckBox is selected, the Timer activates, updating the content of the UpdatePanel with each tick. On the other hand, if the Checkbox is unchecked, the Timer is deactivated. Surprisingly, the AutoPostBack still functions even when the Timer is turned off.
If your DIV utilizes client-side JavaScript, I believe implementing AutoPostBack would offer the simplest resolution.

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 could be causing errors with my kick command?

Hey everyone, I'm currently working on implementing some admin commands. Right now, I'm focusing on creating a kick command, but I keep running into errors. Making any changes seems to cause issues in other parts of the code. This is where I&apo ...

javascriptnode.jsdiscorddiscord.jsbots

Parcel js is encountering difficulties running the same project on Ubuntu

I have encountered an issue with my JavaScript project when trying to run it on Ubuntu using parcel 2 bundler. The code works perfectly fine on Windows, but in Ubuntu, I am facing errors. Despite trying various solutions like cleaning the cache and reinsta ...

javascriptnode.jsnpmparceljs

Is it more beneficial to categorize REST-based modules/controllers by resource or by specific action/feature?

I'm facing a scenario that goes like this: Endpoint 1: Retrieve all books in the United States owned by John with a GET Request to /country/us/person/john/books Endpoint 2: Get all books owned by John in every country with a GET Request to /person/j ...

javascriptrestmodel-view-controllernestjsweb-development-server

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...

javascriptjqueryhtmljson

Form appears outside the modal window

I am facing an issue with my modal where the form inside is displaying outside of the modal itself. Despite trying to adjust the CSS display settings and switching to react-bootstrap from regular bootstrap, the problem persists. I am uncertain about what s ...

javascriptreactjstypescriptfirebase

What is the best approach for retrieving all column names from related tables in SQL Server and C# by utilizing an algorithm based on their primary keys?

In my SQL Server database, I have more than 30 tables with similar conditions. For example, I have 3 tables: post, user, and person. post: (post_id, post_text, user_id) user: (user_id, user_name, person_id) person: (person_id, person_phone, person_email) ...

c#asp.netsql-serveralgorithm

Unconventional choice for website navigation bar

I'm encountering an issue with my navigation bar. I have implemented a script to fix its position at the top of the site, but the base position for the navigation bar is not at the top by default. To workaround this, I made it jump to the top when the ...

javascriptjqueryhtmlcss

AngularJS is throwing an error stating that the URL ID is undefined

I am developing an application that utilizes angularjs with codeigniter as the backend. Within my URL, I have http://localhost/submit/1234, with 1234 serving as the ID. Within my angularjs setup: var singlepost = angular.module('singlepost', [ ...

javascriptphpangularjscodeigniter

When the user initiates a fetch request, they will be directed to the POST page as a standard

Whenever I utilize fetch for a post request, I encounter an issue where the user is not redirected to the Post page as they would be with a regular form submission. My goal is to be able to direct the user to a specific location on the server side at app ...

javascriptnode.jsexpress

Preventing loss of context in jQuery ajax when mixing HTML/JS and opening a <script> tag

I've encountered a situation where I'm using ajax to communicate with the backend, which is responding with a mix of HTML and JavaScript code. To load this content into a div, I'm using the html() function like so: $("#mydiv").html(ajaxRespo ...

javascriptjquery

The communication hub in a Vue.js application

I'm currently developing a Vue single-page project and I have implemented an empty Vue instance as a central event bus. However, I've encountered an issue when trying to fire an event. eventbus.js import vue from 'Vue' export default ...

javascriptvue.jsevent-bus

Utilizing Node.js and Express alongside EJS, iterating through objects and displaying them in a table

Today I embarked on my journey to learn Node.js and I am currently attempting to iterate through an object and display it in a table format. Within my router file: var obj = JSON.parse(`[{ "Name": "ArrowTower", "Class" ...

javascriptnode.jsexpressejs

Node JS Client.query not returning expected results

Currently, I am developing a Web Application that interacts with my PostgreSQL database. However, when I navigate to the main page, it should display the first element from the 'actor' table, but unfortunately, nothing is being retrieved. Below i ...

javascriptsqlnode.jspostgresqlexpress

JavaScript dialog on top of a flash video

I have a unique system in place: Upon opening the main site, a flash image gallery appears. When a user clicks on an image, I utilize Flash's "ExternalInterface.call" function to invoke a JavaScript function that opens a Java dialog modal called NyroM ...

javascriptjqueryajaxflashdialog

Eliminable Chips feature in the Material UI Multiple Select component

The Material UI documentation showcases a multiple select example where the selected options are displayed using the Chip component and the renderValue prop on the Select. By default, clicking on the current value opens the list of available options. I am ...

javascriptreactjsformsevent-handlingmaterial-ui

Why isn't offsetTop working for a div within a table in HTML and Javascript?

When using the offsetTop property to get the absolute position of an object, it works fine when the objects are outside of tables. However, if the object is inside a table, it always returns 1. Why does this happen and how can it be avoided? To see an exa ...

javascripthtml

Locate records in MongoDB by leveraging the power of Mongoose

Managing two distinct databases, one for products and another for categories. The product schema is defined as follows: const productSchema = new mongoose.Schema({ name: { type: String, required: true }, description: { type: String, required: true }, ...

javascriptnode.jsmongodbexpressmongoose

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

Sliding divider across two div containers with full width

Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows: My objectives are twofold: Both slide1 and slide2 should occupy the full width of the page. Additionally, I am looking for ...

javascriptjqueryhtmlcssfullpage.js

Trigger the D3 component to re-render in React after a state change occurs in the parent component

My React project consists of two components written in TypeScript. The first component contains menus, and I am using conditional rendering to display different content based on user selection. <Menu.Item name="graph" active={activeItem ...

javascriptreactjstypescriptd3.js