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

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.
LVL 7
ManjuIT - Project ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
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.
0
ManjuIT - Project ManagerAuthor 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>
0
Chinmay PatelChief Technical NinjaCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

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

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
ManjuIT - Project ManagerAuthor Commented:
Thank you
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.