asked on

Page preloader for an asp page

I'd like to add some sort of nice preloader to an asp page.The asp page can take up to 1-2 minutes to load as it retrieves a very large amount of data.I've seen some nice preloaders on the web for similar asp pages I am just wondering how I go about making one.

ASKER CERTIFIED SOLUTION

_Stilgar_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Latzi_Marian

ASKER

Unfortunately I am not familiar with AJAX.No ideea what it does and how to integrate it.

_Stilgar_

AJAX is your best shot, otherwise you'll have to "guess" when to redirect. Google for "AJAX ASP Classic" - it's not too complicated to learn.

Latzi_Marian

ASKER

I read in the last day about AJAX and I managed to understand roughly how it works.However I just can't believe that there is no clear example anywhere on the internet (I couldn't find any) how a preloader will work if I initiate a query from an asp page and the result page (different page) has a grid filled by a recordset generated by an SQL query.Now how can I show a .gif image (using ajax) until the result page is finished loading and then load that page I will need an example but by the looks of it there is none.I found one ( a bit messy) for a php page but the scenario shown there is very different and I am not familiar with php at all.So please direct me towards an example if you can.Thank you

_Stilgar_

Something like this will work:

<body>
<div id="container" style="display:none"></div>
<div id="preloader"><img src="..." alt="" /></div>
</body>

This will show the preloader script right away. Once this page has been loaded, it should submit a request to another page on your server using AJAX, with the specific parameters (onload event or similar). Once it will get the response it will do the following:

1. Insert the HTML response to the innerHTML of #container (hence, the response you send from the server should be HTML and not XML or plain text).
2. Add display:none to the #preloader element styles (to hide the preloader image / content)
3. Remove the display:none from #container, to display the content.

This way the page is being displayed with a loading indicator until the data has been processed and sent to the client.

AJAX is more javascript dependant than server code dependant, but you still need to know what exactly to return from the server and how. For this, see http://www.google.com/search?hl=en&q=asp+classic+ajax&aq=f&oq=. I recommend using jQuery for AJAX queries and JS manipulation.

Latzi_Marian

ASKER

Hi

I've got the following ajax code in the html <head> section :

<script src="Scripts/RoundedCornersPanel/RoundedCornersPanel.js" type="text/javascript"></script>
<script src="Scripts/Web20AJAXLoadingPanel/Scripts/Web20AJAXLoadingPanel.js" type="text/javascript"></script>
Both .js files are i the right location no issues with them.
then still under the <Head> section of the html part of the asp page I have this kode:

<script>
function ajaxRequest(Url,DivId)
{
var AJAX;
try
{
AJAX = new XMLHttpRequest();
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX.");
return false;
}
}
}
AJAX.onreadystatechange = function()
{
if(AJAX.readyState == 4)
{
if(AJAX.status == 200)
{
document.getElementById(DivId).innerHTML = AJAX.responseText;
}
else
{
alert("Error: "+ AJAX.statusText +" "+ AJAX.status);
}
hideLoadingPanel();
}
else
{
displayLoadingPanel();
}
}
AJAX.open("get", "Sub_Report_Packing_Lines.asp", true);
AJAX.send(null);
}
</script>

I have on the asp page a submit button.I call the function ajaxRequest() on the on click event of the button.When I click the button the preloader gif comes up but I get this :
error : 'document.getElementById( ).' is null or not an object.
When the popup comes up asking if I want to debug and I choose no the right page loads as soon as it's ready.This shows me that the above code works at some sort of level but what exactly that DivId in the code is and where I have to declare it I have no ideea.
I am very very close to get this sorted but not quite there.This Ajax stuff was a Nightmare to understand and still is as I have no ideea what to do with the DivId which is obviously not declared somewhere since is null.
Please help.

Latzi_Marian

ASKER

Hi,

I've got the code working by making line 46 from my code the same with line 50.So in other words I use only displayLoadingPanel().This is because the something strange happens when I call the asp page for the ajax code the state is ready when the grid from the result page comes up.But at that stage the grid is still empty.No data in it just the frame of the grid.so the empty grid shows up in the div but the panel is gone so the page shows an empty grid untill the data comes up but at that stage the stae changes again I suppose so I fixed this by using the dispalyLodingPanel() twice and I did hide the div as well by saying document.getElementById(DivId).style.display = "none"; .It works perfectly with Firefox and Opera but with IE and Safari the Ajax loading panel loads ok but the GIF ANIMATION DOESN'T PLAY!!!
This I knew from the very start that it won't be an easy job.I just don't know why IE doesn't play the .gif from the Ajax panel.
Firefox is perfect.I did upgrade ie to v 8 to v7 and still the same problem.
Have you got any ideea what to do next.Should I try to somehow "force" the gif to refresh or something with a Java fucntion?What do you think.I can leave it as it is as it's working but the Ajax panel shows a static image.It would be nicer to show the playing Gif.

This is the code I use.I actually have another question opened with basically the same topic.My appologiesfor that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Start_Report</title>
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.5)">
<script src="Scripts/RoundedCornersPanel/RoundedCornersPanel.js" type="text/javascript"></script>
<script src="Scripts/Web20AJAXLoadingPanel/Scripts/Web20AJAXLoadingPanel.js" type="text/javascript"></script>
<meta content="CodeCharge Studio 3.2.0.4" name="GENERATOR">
<script language="JavaScript" type="text/javascript">

//Begin CCS script
//Include Common JSFunctions @1-5C08C693
</script>
<script language="JavaScript" src="ClientI18N.asp?file=Functions.js&locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" src="ClientI18N.asp?file=DatePicker.js&locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
//End Include Common JSFunctions

//Include User Scripts @1-5EED8E1E
</script>
<script language="JavaScript" src="js/menu/ADxMenu.js" type="text/javascript"></script>
<link href="Styles/adx.css" type="text/css" rel="stylesheet">
<link href="Styles/Flamenco1/Menu.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/javascript">
//End Include User Scripts

//Date Picker Object Definitions @1-179FCDD0

var Grid2_DatePicker_s_Start_Start1 = new Object();
Grid2_DatePicker_s_Start_Start1.format = "yyyy/mm/dd hh:nn:ss";
Grid2_DatePicker_s_Start_Start1.style = "Styles/Flamenco1/Style.css";
Grid2_DatePicker_s_Start_Start1.relativePathPart = "";
Grid2_DatePicker_s_Start_Start1.themeVersion = "3.0";

var Grid2_DatePicker_s_Start_Stop1 = new Object();
Grid2_DatePicker_s_Start_Stop1.format = "yyyy/mm/dd hh:nn:ss";
Grid2_DatePicker_s_Start_Stop1.style = "Styles/Flamenco1/Style.css";
Grid2_DatePicker_s_Start_Stop1.relativePathPart = "";
Grid2_DatePicker_s_Start_Stop1.themeVersion = "3.0";

//End Date Picker Object Definitions

//_OnLoad @1-2F43613D

function _OnLoad()
{
var result;
//End _OnLoad

//Close _OnLoad @1-BC33A33A
return result;
}
//End Close _OnLoad

//bind_events @1-C6C5CA6C
function bind_events() {
addEventHandler("Menu1Container", "load", load_ADxMenu);
addEventHandler("", "load", _OnLoad);
}
//End bind_events

window.onload = bind_events; //Assign bind_events @1-19F7B649

//End CCS script
</script>


<link media="screen, tv, projection" href="Styles/adx.css" type="text/css" rel="stylesheet">
<script src="js/menu/ADxMenu.js" type="text/javascript"></script>
<link media="screen, tv, projection" href="Styles/Flamenco1/Menu.css" type="text/css" rel="stylesheet">
<link href="Styles/Flamenco1/Style_doctype.css" type="text/css" rel="stylesheet">
</head>
<body>
   
<div id="DivId">
<script>
function ajaxRequest(url,DivId)
{
var AJAX;
try
{
AJAX = new XMLHttpRequest();
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX.");
return false;
}
}
}
AJAX.onreadystatechange = function()
{
if(AJAX.readyState == 4)
{
if(AJAX.status == 200)
{
document.getElementById("DivId").style.display="none";
}
else
{
alert("Error: "+ AJAX.statusText +" "+ AJAX.status);
}
//hideLoadingPanel()
displayLoadingPanel();
}
else
{
//hideLoadingPanel();
displayLoadingPanel();
}
}
AJAX.open("get", "http://localhost/GF_Data_Reporting/Sub_Report_Packing_Lines.asp", true);
AJAX.send(null);
}
</script>
</div>
<table align="left" border="0">
<tr>
<td>

<div class="MenuStyle" id="Menu1Container">
<ul class="adxm {Menu1:MenuType} level1">


<ul class="level{Menu1:Item_Level}">

<li {Menu1:DefaultItem}><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a>
</li>


</ul>
</li>

</ul>

</div>
</td>
</tr>
</table>
<p> </p>
<p>
<hr style="COLOR: #ff6600" size="2">
<p></p>
<table align="center" border="0">
<tr>
<td> </td>
<td>

<form name="{HTMLFormName}" action="{Action}" method="post">
<h2>Generate Report All Lines</h2>

<table>

<tr>
<td colspan="2">{Error}</td>
</tr>

<tr>
<td><label for="Grid2s_Start_Start">StartDate:</label></td>
<td><input id="Grid2s_Start_Start" style="WIDTH: 168px; HEIGHT: 22px" maxlength="100" size="18" value="{s_Start_Start}" name="{s_Start_Start_Name}">
<a href="javascript:showDatePicker('{Name}','{FormName}','{DateControl}');" id="Grid2DatePicker_s_Start_Start1"><img id="Grid2DatePicker_s_Start_Start1_Image" alt="Show Date Picker" src="Styles/Flamenco1/Images/DatePicker.gif" border="0"></a>  </td>
</tr>

<tr>
<td>Stop Date:</td>
<td><input id="Grid2s_Start_Stop" style="WIDTH: 168px; HEIGHT: 22px" size="22" value="{s_Start_Stop}" name="{s_Start_Stop_Name}">
<a href="javascript:showDatePicker('{Name}','{FormName}','{DateControl}');" id="Grid2DatePicker_s_Start_Stop1"><img id="Grid2DatePicker_s_Start_Stop1_Image" alt="Show Date Picker" src="Styles/Flamenco1/Images/DatePicker.gif" border="0"></a>  </td>
</tr>

<tr>
<td><label for="Grid2Grid2Order">Sort by</label></td>
<td>
<select id="Grid2Grid2Order" name="Grid2Order">
{Grid2Order_Options}
</select>
<label for="Grid2Grid2Dir" style="display: none;">{res:CCS_SortDir}</label>
<select id="Grid2Grid2Dir" name="Grid2Dir">
{Grid2Dir_Options}
</select>
</td>
</tr>

<tr>
<td><label for="Grid2Grid2PageSize">Records per page</label></td>
<td>
<select id="Grid2Grid2PageSize" name="{Grid2PageSize_Name}">
{Grid2PageSize_Options}
</select>
</td>
</tr>

<tr>
<td align="right" colspan="2">
<input id="Grid2Button_DoSearch" onclick="ajaxRequest()" type="submit" alt="Search" value="Search" name="{Button_Name}"></td>
</tr>
</table>
</form>
    </td>
</tr>
</table>
<br>
<hr style="COLOR: #ff6600" size="2">
</body>
</html>

_Stilgar_

This looks like an issue with the GIF image. Try taking one from http://www.ajaxload.info/.

Latzi_Marian

ASKER

I did .Still exactly the same.It look another IE bug to me as I found that on earlier versions of ie it does show the animation.Is there any way to force a gif to "play" ? I coud try to do that.Looks like when IE is waiting data to be loaded from the server ceases all activity.Which is strange.

_Stilgar_

By "earlier" you probably mean 5 or 4... IE6 and up definately support animated GIFs.

Your markup seems a little bloated, not sure about the purpose of more than half the things there. Just try what I proposed above - have HTML like:

<body>
<div id="container" style="display:none"></div>
<div id="preloader"><img src="animated.gif" alt="Loading..." /></div>
</body>

This way the image will play right away, for granted. Now, add onload event to request the other page using AJAX, and on the event it has completed the request, hide the preloader and place the HTML you recieved in #container. Very simple - just follow these instructions.

For this stage, remove everything else (Datepicker stuff, grids etc).

Latzi_Marian

ASKER

As I said before the HTML I receive is exactly what I don't want to show.I receive an html with an empty grid.If I show it the users will see an empty grid the preloader is gone so it's no good.The page ready status changes twice.First time when I receive the empty grid and the second time when I receive the data in that grid.This is the real page ready.This is the event I have to use tomake the preloader dissapear.That is why I commented out the //hideLoadingPanel() method.If I put the response to the container that is ok but if I do the:
<div id="preloader"><img src="animated.gif" alt="Loading..." /></div>
</body>
then I will have the gif playing all the time as the preloader div is not controlled is it?

SOLUTION

_Stilgar_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Latzi_Marian

ASKER

Conclusion is after extensive testing that my original code is quite ok .It works with IE previous to version 7 and all other major browsers.Version 7 and 8 of IE is bugged and doesn't see the gif as a gif if you are using ajax panels.Which is cool I just removed the gif and I am using static images for now until one day one Microsoft update will fix it.THANK YOU FOR YOUR HELP ANYWAY

Latzi_Marian

ASKER

Send me to the right path in solving the p[roblem.Thank you.