Progress icon while POST request is processing

ajax, forms, html, post, request

Solution

Something like Prototype or JQuery might have a cleaner solution, but in plain old javascript it should be possible to control the visibility of a progress icon based on the form submission (or add a new progress icon to the DOM. Here's a quick example. You'd probably want to clean this up a bit in the real world to avoid ugly stuff like inline styles:

Parent.htm

<script language="javascript">
   function ShowProgress() {
       document.getElementById("progress").style.display = "inline";
   }

   function HideProgress() {
       document.getElementById("progress").style.display = "none";
   }
</script>

<img src="progress.gif" id="progress" style="display: none"/>
<iframe id="uploadFrame" name="uploadFrame"></iframe>
<form enctype="multipart/form-data" onSubmit="showProgress" method="post" target="uploadFrame" >
   ...
</form>

SubmitResponse.htm (the page your upload form submits to)

<script language="javascript">
  if (parent.HideProgress) {
     parent.HideProgress();
  }
</script>

Problem

There are next initial conditions: Backend: servlet for file uploading; UI: form, that submits servlet for file upload: ``` <iframe id="uploadFrame" name="uploadFrame"></iframe> <form enctype="multipart/form-data" method="post" target="uploadFrame" action="<%= request.getContextPath() %>/uploadFile? portletId=${portletId}&remoteFolder=${remoteFolder}"> ... </form> ``` When submit button for this form is clicked, that file uploading is in progress and POST request correspondingly is processing (may track in FireBug). Is it possible to draw progress icon dependently on this POST request is processing? I mean,that if POST is processing, that web page should show progress .gif icon. Perhaps,it's possible with Ajax.PeriodicalUpdater function of Prototype lib or some other solution? Anyway, looks like, it's impossible to do without ajax. Thanks fo any help.

Original source