Gif won't run while processing is taking place

[Frinavale]

Hi there,

I'm developing a web application system and at times the processing takes a while to finish. In order to keep the users from closing the browser before my site is finished working, I thought I'd display an animated .gif that would indicate my system was doing something.

The problem I'm having is that the gif doesn't do its animated thing when my site is processing. A progress bar is displayed and shows some progress at the bottom of the browser but the gif won't do its thing.

Does anyone know how I can get around this problem?

Thanks in advance
-Frin

[b1randon]

Frin, I work on an application that does exactly this. You might want to think about using ajax. Ajax will allow you to check on the server's progress on your task intermittently. Also, since your page will no longer be loading it may clear up the problem with the animated gif (our project uses on too without issue).

[Frinavale]

Frin, I work on an application that does exactly this. You might want to think about using ajax. Ajax will allow you to check on the server's progress on your task intermittently. Also, since your page will no longer be loading it may clear up the problem with the animated gif (our project uses on too without issue).

I have absolutely no experience with Ajax. I hadn't even heard of it 'til the other month when I started posting on this forum.

Is it easy to learn?
Is it easily incorporated into a .NET application?
Is it anything like JavaScript?

Thanks for the suggestion

-Frinny

[AricC]

Hey Frin, how much data are you processing? Is this in ASP? You could use Application.Lock while your processing ( performance may be an issue )

(Moved thread to Javascript/Ajax)

[Frinavale]

Hey Frin, how much data are you processing? Is this in ASP? You could use Application.Lock while your processing ( performance may be an issue )

(Moved thread to Javascript/Ajax)

I'm using VB .Net (which uses asp of course)

I'm doing a bunch of validation requests that run against a database. Its quite a bit of processing and for the database to timeout its sometimes taking something like 30seconds...

I've never heard of Application.Lock before.
I'm going to look into it now to see if it could help me.

I just looked up Ajax stuff and even though it looks like something I'd want to implement in the future...I can't really learn this right now and write the server side functions since my project is going to be launched within the next couple of days.

I didn't think it would take much to get an animated .gif to run while sever processing was happening. I guess I was wrong.

Thanks for all your help
-Frinny

[AricC]

I don't think it is that difficult, in fact I'm moving this to the .Net forum and copy the ASP forum as this is more of an ASP.Net issue. As a work around for the time being maybe this solution would work. While the user is in the process if in your Try/Catch you hit an excError ( what I call mine ) throw the error to a log file on your server. Then just check the log file for errors daily or write a script to get it emailed to you. I have a great example of a VB.Net error file writer if you need one. I will just need to dig it up. Let me know.


HTH,
Aric

[gyung]

I had some trouble with this before. Here's an example of an AJAX script I found and love to use. I use this for both PHP and ASP, and works in FF and IE.

In HTML/ASP/whatever page use:

<div id="busy_cage">&nbsp;</div>
<div id="item_cage">&nbsp;</div>
 

JS include below

/* The following function creates an XMLHttpRequest object... */
 
function createRequestObject(){
    var request_o; //declare the variable to hold the object.
    var browser = navigator.appName; //find the browser name
    if(browser == "Microsoft Internet Explorer"){
        /* Create the object using MSIE's method */
        request_o = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        /* Create the object using other browser's method */
        request_o = new XMLHttpRequest();
    }
    return request_o; //return the object
}
 
/* You can get more specific with version information by using 
    parseInt(navigator.appVersion)
    Which will extract an integer value containing the version 
    of the browser being used.
*/
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject(); 
 
/* Function called to get the product categories list */
 
function getDBList(ID){
    /* Create the request. The first argument to the open function is the method (POST/GET),
        and the second argument is the url... 
        document contains references to all items on the page
        We can reference document.form_category_select.select_category_select and we will         
        be referencing the dropdown list. The selectedIndex property will give us the 
        index of the selected item. 
    */
 
    http.open('get', '../includes/productList.asp?ID=' + ID);
    /* Define a function to call once a response has been received. This will be our
        handleProductCategories function that we define below. */
    http.onreadystatechange = handleProducts; 
    /* Send the data. We use something other than null when we are sending using the POST
        method. */
    http.send(null);
}
function handleProducts(){
    /* Make sure that the transaction has finished. The XMLHttpRequest object 
        has a property called readyState with several states:
        0: Uninitialized
        1: Loading
        2: Loaded
        3: Interactive
        4: Finished */
    if(http.readyState == 1){
 
        document.getElementById('busy_cage').innerHTML = '<br /><img src="../img/busy.gif">';
        document.getElementById('item_cage').innerHTML = '<br />Loading...';
    }
    if(http.readyState == 4){ //Finished loading the response
        /* We have got the response from the server-side script,
            let's see just what it was. using the responseText property of 
            the XMLHttpRequest object. */
        var response = http.responseText;
        /* And now we want to change the product_categories <div> content.
            we do this using an ability to get/change the content of a page element 
            that we can find: innerHTML. */
        getDBList2(0);
        document.getElementById('busy_cage').innerHTML = '<br />&nbsp;';
 
        document.getElementById('item_cage').innerHTML = response;
    }
}

You also need a seperate page to process the request. I used, for example: productList.asp?ID=ID

Then you pass in the value with this. I used a select statement with multiple cages:

<select name="series" id="series" class="comboBox" onchange="getDBList(document.productSelect.series.options[document.productSelect.series.selectedIndex].value);">whatever</select>

Hope this kinda helps. Sorry it's so messy.

[Frinavale]

I had some trouble with this before. Here's an example of an AJAX script I found and love to use. I use this for both PHP and ASP, and works in FF and IE.
...
Hope this kinda helps. Sorry it's so messy.

Thank you for the suggestion it was a great help.

I ended up creating a web page that uses a variation on what you supplied and called an asp that simply loops for 20 seconds to test that it works.

I haven't tested it in my main project yet because I'm still not confident enough with it to do so since I have a slight problem.

My test page will display the gif (and have it run perfectly in all browsers) and a "loading..." message while the page is waiting for the server to finish its loop (for 20seconds)...when the server's done the image is deleted and a "finished loading" message is inserted.

My problem is that it will only do this the first time I click the button.

Could someone please explain to me what I'm doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax learning</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<body>
 
<script type="text/javascript">
 
  function ajaxFunction()
  {
   try
   {
     // Firefox, Opera 8.0+, Safari
     return new XMLHttpRequest();
   }
   catch (e)
   {
   // Internet Explorer
   try
     {
       return new ActiveXObject("Msxml2.XMLHTTP");
     }
   catch (e)
     {
     try
       {
         return new ActiveXObject("Microsoft.XMLHTTP");
       }
     catch (e)
       {
         alert("Your browser does not support AJAX!");
         return null;
       }
     }
   }
 }
 var xmlHttp=ajaxFunction();
 function go()
 {    
    xmlHttp.open('get','http://myTestServer/AjaxTest/AjaxTest.asp');
    xmlHttp.send(null);
 }
 xmlHttp.onreadystatechange=function()
 {    
    if(xmlHttp.readyState == 1)
    {    document.getElementById('busy_cage').innerHTML = '<br /><img src="Email.gif" />';
        document.getElementById('item_cage').innerHTML = '<br />Loading...';
    }
    if(xmlHttp.readyState == 4)
    { //Finished loading the response
        document.getElementById('busy_cage').innerHTML = '<br />&nbsp;';
        document.getElementById('item_cage').innerHTML = '<br />Finished Loading';
    }
   }
</script>
    <form name="form1" method="post" action="http://myTestServer/AjaxTest/AjaxTest.asp" id="form1">
        <div id='busy_cage' name='busy_cage'></div>
        <div id='item_cage' name='item_cage'></div>
        <input type="button" value="Test" id="Button1" onclick="go();"/>
    </form>
 
</body>
</html>
 

The asp I'm using is:

<%  Response.Buffer = true 
 
Function WaitFor(SecDelay) 
    timeStart = Timer() 
    timeEnd = timeStart + SecDelay 
    i = SecDelay 
    Do While timeStart < timeEnd 
        If i = Int(timeEnd) - Int(timeStart) Then 
        Msg = Msg & i 
        If i <> 0 Then Msg = Msg & ", " 
        If ShowMsg = 1 Then Response.Write Msg 
         Response.Flush() 
       Msg = "" 
        i = i - 1 
        End if 
        timeStart = Timer() 
    Loop 
 
 
End Function 
 
Call WaitFor(20) 
%>
 

Thanks again for the help!

-Frinny

P.S I'm hoping someone will move this tread to the Ajax/JavaScript section.

[Frinavale]

Hey there,

I forgot to add in the last post that this doesn't work in Firefox either.
Is there a setting or something that I need to enable for Ajax to work with it?

Thanks
-Frinny

[gyung]

Mine works fine in FF. Anyway did you try adding "no-cache" to the headers? I had a similar problem before, which I posted about.

Response.Expires = -1
    Response.AddHeader "Cache-Control", "no-cache"
    Response.AddHeader "Cache-Control", "private"
    Response.AddHeader "Cache-Control", "no-store"
    Response.AddHeader "Cache-Control", "must-revalidate"
    Response.AddHeader "Cache-Control", "max-stale=0"
    Response.AddHeader "Cache-Control", "post-check=0"
    Response.AddHeader "Cache-Control", "pre-check=0"
    Response.AddHeader "Pragma", "no-cache"
    Response.AddHeader "Keep-Alive", "timeout=3, max=993"
    Response.AddHeader "Expires", "Sun, 08 May 1983 05:00:00 GMT"

Btw you might also need to call the function first inside the <div></div>. I forgot to mention that. I had trouble with it before too =X

If that doesn't work, I'm not sure, i just guess and check myself usually, or google =P

[Frinavale]

Mine works fine in FF. Anyway did you try adding "no-cache" to the headers? I had a similar problem before, which I posted about.
...
Btw you might also need to call the function first inside the <div></div>. I forgot to mention that. I had trouble with it before too =X

If that doesn't work, I'm not sure, i just guess and check myself usually, or google =P

Thanks for your help Gyung!

I actually just found out about the no-cache header doing more research into Ajax.

I ended up changing my whole script to try and get things to work in Firefox. I'm getting an exception: "Permission denied to call method XMLHttpRequest.open"

I've made sure that I have my permissions set properly for the asp...and I'm able to call it from both IE and Opera. I've also made sure that I've used the exact domain name in the call.

I'm not sure what else to try.

My new and improved test web page is:

<HTML>
<HEAD>
    <TITLE></TITLE>
    <META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
    <script language="javascript">
        function makeRequest(url) 
        {   var http_request = false;
            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                http_request = new XMLHttpRequest();
                if (http_request.overrideMimeType) {
                    http_request.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) { // IE
                try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
 
            if (!http_request) {
                alert('Cannot create an XMLHTTP instance');
                return false;
            }
 
            http_request.onreadystatechange = function() { alertContents(http_request); };
            try
            {
                http_request.open('GET', url, true);
                http_request.send(null);
            }
            catch(e)
            {
                alert("An excetption has occurred: "+e);
            }
        }
        function alertContents(http_request)
        {    if(http_request.readyState == 1)
            {    document.getElementById('busy_cage').innerHTML = "<img src='Email.gif' >";
                document.getElementById('item_cage').innerHTML = '<br />Loading...';
            }
            else if (http_request.readyState == 4) {
                document.getElementById('busy_cage').innerHTML = '<br />&nbsp;';
                document.getElementById('item_cage').innerHTML = '<br />Finished Loading';
                try
                {   if (http_request.status == 200) {
                        alert(http_request.responseText);
                    } else {
                        alert('There was a problem with the request.');
                    }
                    btn.disabled=false;
                }catch(e)
                {    btn.disabled=false;
                    alert("An error occrred:"+e.description);
                }
            }
         }      
    </script>
 
    <div id='busy_cage'><img src="BlankEmail.jpg" ></div>
    <div id='item_cage'><br></div>
    <input type='button'  id="btn" onclick="makeRequest('http://DevelopmentServer/AjaxTest/AjaxTest.asp');btn.disabled=true;" value ='Make a request' >
</BODY>
</HTML>
 

And my new and improved asp page is:

<%  Response.Buffer = true 
    Response.Expires=-1
    response.CacheControl="no-cache"
 
 
    Function WaitFor(SecDelay) 
        timeStart = Timer() 
        timeEnd = timeStart + SecDelay 
        i = SecDelay 
        Do While timeStart < timeEnd 
            If i = Int(timeEnd) - Int(timeStart) Then 
                Msg = Msg & i 
                If i <> 0 Then Msg = Msg & ", " 
                If ShowMsg = 1 Then Response.Write Msg 
                i = i - 1 
            End if 
            timeStart = Timer() 
        Loop 
        Response.Write("The time delay has finished")
    End Function 
 Call WaitFor(10) 
%>
 

Does anyone know why I might be getting a permissions error?

Thanks for all the help! I would never have thought of using Ajax if it weren't for you.

-Frinny

[gyung]

I did some research and borrowed some more code. I read that you shouldn't request the browser name b/c it can be faked, so I followed W3Schools' example which is similar to yours, and modified my code to this for the script I was using:

function createRequestObject()
  {  var xmlHttp;
  try
    {    // Firefox, Opera 8.0+, Safari    
        xmlHttp = new XMLHttpRequest();    }
  catch (e)
    {    // Internet Explorer    
    try
      {      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");      }
    catch (e)
      {      try
        {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");        }
      catch (e)
        {        alert("Your browser does not support AJAX!");        return false;        }      
        }   
    }
        return xmlHttp;
    }

Sorry I'm not good at JS. I tend to look at code at modify it so it works for me, so this is how it did it this time. You may consider posting in the JS/AJAX section if you haven't, maybe someone more familiar with it can help you there. Good luck :D

[gyung]

Oh...right, the moderators apparently moved the thread, but it's still in ASP for me.

And I remembered something about cross-site security. Maybe you are doing it by accident somewhere, but that won't work. Just fyi

[Frinavale]

I did some research and borrowed some more code. I read that you shouldn't request the browser name b/c it can be faked, so I followed W3Schools' example which is similar to yours, and modified my code to this for the script I was using:
...

Sorry I'm not good at JS. I tend to look at code at modify it so it works for me, so this is how it did it this time. You may consider posting in the JS/AJAX section if you haven't, maybe someone more familiar with it can help you there. Good luck :D

Thanks alot for the tip. I didn't know that and will have to watch for it in the future!

And I remembered something about cross-site security. Maybe you are doing it by accident somewhere, but that won't work. Just fyi

Yeah I read about it and it fixed the problem.
I finally got it work earlier today.

Thanks a lot for your help.

I just downloaded ASP.NET Ajax stuff today and can't wait to try it out. I haven't been this excited since my first "hello world" program!


:):):)

-Frinny

[iam_clint]

Hey guys i just had a similar problems i wanted to do on one of my sites



I figured out my own solution to it without AJAX using strictly Javascript...


If you set the source after the page is trying to load to the next screen

aka a window.setTimeout after they click the button the image will then run through its animation


so basicly i have a button

onclick="pleasewait(0, 1, 'black'); window.location='blah.asp';"

this calls my pleasewait function which sets a timeout to display my hidden div with the img -- at this point the image becomes visible but no animation now all you have todo is reset the SRC attribute of the image and wam you have animated gif while page transition.

[Frinavale]

Hey guys i just had a similar problems i wanted to do on one of my sites

I figured out my own solution to it without AJAX using strictly Javascript...
If you set the source after the page is trying to load to the next screen
aka a window.setTimeout after they click the button the image will then run through its animation
so basicly i have a button

onclick="pleasewait(0, 1, 'black'); window.location='blah.asp';"

this calls my pleasewait function which sets a timeout to display my hidden div with the img -- at this point the image becomes visible but no animation now all you have todo is reset the SRC attribute of the image and wam you have animated gif while page transition.

I'm not sure what you mean by the timeout thing?
My function resets the src of the image but doesn't use a timeout....

Right now I'm not using Ajax in my project because I'm still learning how to use ASP.NET Ajax....

The javascript functions I'm currently using are:

<script type='text/javascript' language='JavaScript'>
 
<!--
     function processingMessageOff() {
       document.img_processing.src='Images/BlankProcessing.JPG';
     }
 // -->
 
</script>
 
<script type='text/javascript' language='JavaScript'>
 
<!--
     function processingMessageOn() {
       document.img_processing.src='Images/Processing.gif';
     }
 // -->
 
</script>
 

So basically the processingMessageOff() is called to simply show a blank picture and when the button is clicked the processingMessageOn() function is called which changes the src of the image to be that of the Processing.Gif.

This solution doesn't work in IE6...

Is this what you mean by changing the src?
How does the timeout effect anything?

I'm just not quite clear on what you're trying to say. Maybe post the code you used for the pleaseWait() function you were describing?

Thanks for your help though!

-Frinny

[iam_clint]

the timeout affects it by waiting till the other page starts to load before changing the SRC of the image by giving it alittle bit of delay this method worked for both IE and FF.

[iam_clint]

The Javascript I use

<script>
function pwait(count, co, color) {
 if (count == 1) { document.getElementById("pwimg").src = "images/pwait.gif"; }
 //border-top: solid 2px black; border-bottom: solid 2px black; border-right: solid 2px black; border-left: solid 2px black;
 var ftable = document.getElementById("pwtable");
 if (co == 1) {
  ftable.style.borderTop = "solid 2px "+color;
  ftable.style.borderBottom = "solid 2px black";
  ftable.style.borderLeft = "solid 2px black";
  ftable.style.borderRight = "solid 2px black";
 }
 if (co == 2) {
  ftable.style.borderTop = "solid 2px black";
  ftable.style.borderBottom = "solid 2px black";
  ftable.style.borderLeft = "solid 2px "+color;
  ftable.style.borderRight = "solid 2px black";
 }
 if (co == 3) {
  ftable.style.borderTop = "solid 2px black";
  ftable.style.borderBottom = "solid 2px "+color;
  ftable.style.borderLeft = "solid 2px black";
  ftable.style.borderRight = "solid 2px black";
 }
 if (co == 4) { 
  ftable.style.borderTop = "solid 2px black";
  ftable.style.borderBottom = "solid 2px black";
  ftable.style.borderLeft = "solid 2px black";
  ftable.style.borderRight = "solid 2px "+color;
  co = 0; 
 }
 document.getElementById("pleasewait").style.visibility = "visible";
    document.getElementById("pleasewait").style.top = document.body.scrollTop+document.documentElement.scrollTop+200;
    document.getElementById("pleasewait").style.left = document.body.scrollLeft+document.documentElement.scrollLeft+500;
 tmp = document.getElementById("pwait").innerHTML;
 if (tmp == "&nbsp;") {
  document.getElementById("pwait").innerHTML = ".";
 }
 if (tmp == ".") {
  document.getElementById("pwait").innerHTML = "..";
 }
 if (tmp == "..") {
  document.getElementById("pwait").innerHTML = "...";
 }
 if (tmp == "...") {
  document.getElementById("pwait").innerHTML = "&nbsp;";
 }
 co = co + 1;
 count = count + 1;
 var pwaitint = window.setTimeout("pwait("+count+", "+co+", '"+color+"')", 200);
}  
</script>
 

The Div I Use.

<div id="pleasewait" style="position: absolute; top: 200; left: 400; width: 180; height: 60; visibility: hidden;"><table width="100%" height="100%" bgcolor="white" style="border-top: solid 2px black; border-bottom: solid 2px black; border-right: solid 2px black; border-left: solid 2px black;" id="pwtable"><tr><td><img src="/images/pwait.gif" id="pwimg"><td width="70%" align="right" style="font-weight: 800;">Please Wait<td id="pwait" width="30%" align="left" style="font-weight: 800;">&nbsp;</table></div>
 

When I call it

<script>
function addcart() {
var parts = document.getElementsByName("nparts");
var mfgs = document.getElementsByName("suplier");
var options = document.getElementsByName("option");
var qstring = ""
for (i=0; i<=options.length-1; i++) {
if (options[i].checked) {
qstring = qstring+"&nparts="+parts[i].value+"&suplier="+mfgs[i].value+"&qty=1"
}
}
if (qstring!="") {
pwait(0, 1, 'black');
document.getElementById("favadd").disabled = true;
window.location = "cart_add.asp?val=1"+qstring
} else {
alert("You didn't mark anything to be added!");
}
}
</script>
 

Cart add redirects you to cart_view, cart_view takes awhile to load due to it using ajax to query a database located on someone elses server to check stock levels and things like that.

[Frinavale]

...
Cart add redirects you to cart_view, cart_view takes awhile to load due to it using ajax to query a database located on someone elses server to check stock levels and things like that.

Hmm...it didn't seem to work....
Maybe because its not waiting for the "next" page to load...its waiting for this one to get back to itself?

[iam_clint]

have you tried to call my pwait(0, 1, 'black');

function

[Frinavale]

have you tried to call my pwait(0, 1, 'black');

function

Update: your pwait works fine. The Gif is kept running because it is reloaded in the loop.

Thanks iam_clint!