Classic ASP Processing Wheel

I have a classic asp page that I want to display a "processing wheel" or similar gif while it is processing.  I would like it to start when the user clicks a button and stop when the submission has completed and the page is fully loaded.  Any help would be much appreciated.
Bob SchneiderCo-OwnerAsked:
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.

Ryan ChongCommented:
I would like it to start when the user clicks a button and stop when the submission has completed and the page is fully loaded.
In general, you can put a pre-loaded gif file into a Div, and when the button is clicked, show that DIV and when the submission is done, close that DIV (when necessary).

OR you can try many examples online, for instances:

jQuery ajaxComplete() Method
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete

Show Loading (Busy) Indicator (Spinner) with Overlay with jQuery AJAX example
https://www.aspsnippets.com/Articles/Show-Loading-Busy-Indicator-Spinner-with-Overlay-with-jQuery-AJAX-example.aspx

18 CSS3 and jQuery Loading Animations Solutions
https://designmodo.com/css3-jquery-loading-animations/
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
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Typically, you will have a form like this

FormPage.asp
<form method="post" action="processing.asp">
<input type="text" name="id">
<button type="submit">Submit</button>
</form>

Open in new window

processing.asp
<%
' simulate long processing
if request.form("id")<>"" then
     delay()
     response.write "You entered "&request.form("id")
end if


function delay()
   
     For x = 1 To 700
               ' do nothing
     Next

end function

Open in new window


What happens in this case is you submit the form, then get transferred to the processing page and eventually will see some output. From there you may select to response.redirect to another page or perhaps you have this code on the same page as your form page for processing.  For this example, we need to keep these pages separate.

Now the question is how do we submit the form and display the output on the form page and while the processing page is doing it's thing show some type of spinner.  This is where an ajax request comes in. I like to do this using jquery and that will be the example. You can read up on the ajax request here http://api.jquery.com/jquery.ajax/ and if you are not up on javascript, you can copy and paste this but I suggest a primer over at https://www.codecademy.com/catalog/subject/web-development  Check out the intro to javascript first, then intro to jquery.


Going back to our form page

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>testing</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){// run when the page loads
     
     // hide the loader image until we need it
     $('img#loader').hide();

  $('#btnSubmit').on('click',function(){ // listen for the click

          //start the loader image
          $('img#loader').show();

         // get the value of the form field with id field_id
          var field_id=$('#field_id').val();

          $.ajax({   // sends data via post to our processing page
               method: "POST",
               url: "processing.asp",
               data: { id: field_id }
         })
        .done(function( data) {
            //the text from the processing page is returned in the variable called data. You can name "data" anything you want
             
            // hide the spinner
             $('img#loader').hide();

             // place the returned data in the results div
             $('div#results).html(data);
         });


    });


});
</script>
</head>
<body>
<form method="post" action="processing.asp">
<input id="field_id" type="text" name="id">

<!-- change button to the default type button rather than submit and give it an id -->
<button id="btnSubmit">Submit</button>
</form>
  <div id="results"><img id="loader" src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif"></div>

</body>
</html>

Open in new window


Give this a try and let us know if you run into any issues.  This is just the beginning and an ajax request can get more complex.
0
Bob SchneiderCo-OwnerAuthor Commented:
Thanks Scott.  I guess I kind of jumped the gun on this but I really appreciate the response.  My initial thought was that I could show the div containing the gif onsubmit and hide it (if that is even necessary) on page load.

Is there a way to show a hidden div on submit?  If not, I will look at the ajax approach...
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
> Is there a way to show a hidden div on submit?

The way to do what you are describing is to use an ajax request.

With the ajax request, you are removing the typical "submit" function which transfers to the other page and then any results remain on the current page.

Let's look what happens though.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
$(function(){// run when the page loads
     
     // hide the loader image until we need it
     $('img#loader').hide();

  $('#btnSubmit').on('click',function(){ // listen for the click
     event.preventDefault(e);

          //start the loader image
          $('img#loader').show();
          //submit the form
          $( "#myForm" ).submit();

   

    });


});
</script>
</head>
<body>

<form id="myForm" method="post" action="processing.asp">
<input id="field_id" type="text" name="id">

<!-- change button to the default type button rather than submit and give it an id -->
<button type="submit" id="btnSubmit">Submit</button>

</form>
    <img id="loader" src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif">

  </body>
</html>

Open in new window

You are going to go to the processing page right away.

Stick with using ajax for this.


Fyi, I noticed my original code is wrong. Line 34 missing a closing quote,  $('div#results).html(data); should be  $('div#results').html(data);

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>testing</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){// run when the page loads
     
     // hide the loader image until we need it
     $('img#loader').hide();

  $('#btnSubmit').on('click',function(){ // listen for the click

          //start the loader image
          $('img#loader').show();

         // get the value of the form field with id field_id
          var field_id=$('#field_id').val();

          $.ajax({   // sends data via post to our processing page
               method: "POST",
               url: "processing.asp",
               data: { id: field_id }
         })
        .done(function( data) {
            //the text from the processing page is returned in the variable called data. You can name "data" anything you want
             
            // hide the spinner
             $('img#loader').hide();

             // place the returned data in the results div
             $('div#results').html(data);
         });


    });


});
</script>
</head>
<body>
<form method="post" action="processing.asp">
<input id="field_id" type="text" name="id">

<!-- change button to the default type button rather than submit and give it an id -->
<button id="btnSubmit">Submit</button>
</form>
  <div id="results"><img id="loader" src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif"></div>

</body>
</html>

Open in new window

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
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.