Classic ASP - Count down timer from 10 seconds to 0 with text changing

Manju
Manju used Ask the Experts™
on
Experts -

I need a countdown timer in classic asp from 10 seconds to 0. (Without page refresh)

Ex:
In a DIV  (<p>)- I will need to say "Kindly allow 10 seconds for Request creation..., " Here the 10 should count down to 0. and Once it becomes 0, it should change the <p> text to "Request created".

I understand there are alot of timers available in js/jquery but my ask is unique and peculiar and i dont want the page / body to refresh every 10 seconds or so.

Kindly help.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi Manju,

This counter has to be controlled from server? or it should actually wait for the actual request creation and then set the text to Request Created?

Regards,
Chinmay.
ManjuIT - Project Manager

Author

Commented:
no, just a 10 second wait is good enough. basically, below is what i need.

<div><p>Kindly allow 10 seconds for Request creation..., </p></div> ("Note: count down from 10 to 0 should show )
once it hits 0,
<div><p>Request created. </p></div>
Chief Technology Ninja
Distinguished Expert 2018
Commented:
Hi Manju,

It could be easily done in JS/Jquery without refreshing the page. I hope I am not missing something.

Please see the JSFiddle: http://jsfiddle.net/xpvt214o/660782/


HTML
<div id="banner">
  <p>Kindly allow <span id="counter">10</span> seconds for Request creation...</p>
</div>

Open in new window


JavaScript + Jquery
// find elements
var counter = $("#counter")
var banner = $("#banner")

var intervalTracker = setInterval(function(){
tracker = counter.text();

if(tracker > 1)
  counter.text(tracker - 1);
  else
  {
  banner.html("<p>Request created. </p>");
  clearInterval(intervalTracker);
  }
  
}, 1000);

Open in new window



Regards,
Chinmay.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
That can't be done in asp or any server side script.  you need to do it in javascript (or jquery other js framework).

I think what you want to do is an ajax call where you submit the form on page1.asp where the page does not refresh. The ajax call hits the processing.asp page. When the processing asp page is done, then page1.asp updates without the refresh.  You can have a timer or other moving something hit that div while the processing page is doing it's thing.

If you do use serverside scripting to do a count down, you are tying up the cpu.  Enough users doing that and you can take down the app pool.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
The js code for ajax using jquery is going to be


<div id="results"></div>
<form>
   <input id="field1">
   <input id="field2">
   <button id="button1">submit</button>
</form>

Open in new window

$(function(){  // START AT PAGE LOAD

   $('#button1').on('click',function(){ //LIST FOR BUTTON CLICK
    $('#results').html('we are working on it');  // OR USE A TIMER OR SPINNER PNG/GIF
    

     var field1 = $('#field1').val();
     var field2 = $('#field2').val();


       $.ajax({
       method: "POST",
       url: "processing.asp",
       data: { field1: field1, field2: field2 }
       })
      .done(function( data ) {  // data IS WHAT WILL BE RETURNED FROM THE PROCESSING.ASP PAGE
         $('#results').html(data); 
      });


   });


});

Open in new window

PROCESSING.ASP
field1=request.form("field1")
field2 = request.form("field2")

' simulate a resposne
response.write "Field 1 = "&field1&" Field 2 = "&field2

Open in new window

ManjuIT - Project Manager

Author

Commented:
Thank you
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
While the pure javascript timer does what you asked, counts down, I don't believe this is an optimal solution for what you are trying to achieve.

The reason is it appears you are waiting for a process to finish.  The solution selected can act like a jack-in-the-box. When the timer is up, you have no idea what you are getting.  It could be something good like the process is finished or it could be an error or the process is still going.  The optimal way to do wait for page to process is to use ajax. This allows the exact time to show a counter, spinner or anything that something is being processed.  When the page is done, you can capture the output of the process page and disseminate for your user.  If the process is taking too long, you can add something to your ajax to account for this as well such as offering a way to report an issue.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial