Solved

Page preloader for an asp page

Posted on 2009-05-11
14
1,114 Views
Last Modified: 2012-05-07
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.
0
Comment
Question by:Latzi_Marian
  • 8
  • 6
14 Comments
 
LVL 14

Accepted Solution

by:
_Stilgar_ earned 500 total points
Comment Utility
I would use a same-page AJAX preloader. Just put a nice animated image (e.g. http://www.ajaxload.info/), and postback every 30 seconds or so to the server and check if it has done loading. Once it has done, either cause a page redirect or load the results through AJAX (as a complete HTML for display, for example).
0
 

Author Comment

by:Latzi_Marian
Comment Utility
Unfortunately I am not familiar with AJAX.No ideea what it does and how to integrate it.
0
 
LVL 14

Expert Comment

by:_Stilgar_
Comment Utility
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.
0
 

Author Comment

by:Latzi_Marian
Comment Utility
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
0
 
LVL 14

Expert Comment

by:_Stilgar_
Comment Utility
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.
0
 

Author Comment

by:Latzi_Marian
Comment Utility
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.
0
 

Author Comment

by:Latzi_Marian
Comment Utility
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&amp;locale={res:CCS_LocaleID}" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" src="ClientI18N.asp?file=DatePicker.js&amp;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>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_ie6.css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="Styles/{CCS_Style}/Style_Components_ie6.css"><![endif]-->
<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>
&nbsp;&nbsp;&nbsp;
<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>
      <!-- BEGIN Menu Menu1 -->
      <div class="MenuStyle" id="Menu1Container">
        <ul class="adxm {Menu1:MenuType} level1">
          <!-- BEGIN Item -->
          <!-- BEGIN OpenLevel -->
          <ul class="level{Menu1:Item_Level}">
            <!-- END OpenLevel -->
            <li {Menu1:DefaultItem}><a href="{ItemLink_Src}" class="{Menu1:Submenu}" target="{Menu1:Target}" title="{Menu1:Title}">{ItemLink}</a>
            <!-- BEGIN CloseItem --></li>
 <!-- END CloseItem -->
            <!-- BEGIN CloseLevel -->
          </ul>
 </li>
 <!-- END CloseLevel --><!-- END Item -->
        </ul>
 
      </div>
      <!-- END Menu Menu1 --></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>
<hr style="COLOR: #ff6600" size="2">
<p></p>
<table align="center" border="0">
  <tr>
    <td>&nbsp;</td>
    <td>
      <!-- BEGIN Record Grid2 -->
      <form name="{HTMLFormName}" action="{Action}" method="post">
        <h2>Generate Report&nbsp;All Lines</h2>
 
        <table>
          <!-- BEGIN Error -->
          <tr>
            <td colspan="2">{Error}</td>
          </tr>
          <!-- END Error -->
          <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}">
              <!-- BEGIN DatePicker DatePicker_s_Start_Start1 --><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>&nbsp;&nbsp;<!-- END DatePicker DatePicker_s_Start_Start1 --></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}">
              <!-- BEGIN DatePicker DatePicker_s_Start_Stop1 --><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>&nbsp;&nbsp;<!-- END DatePicker DatePicker_s_Start_Stop1 --></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">
              <!-- BEGIN Button Button_DoSearch --><input id="Grid2Button_DoSearch" onclick="ajaxRequest()" type="submit" alt="Search" value="Search" name="{Button_Name}"><!-- END Button Button_DoSearch --></td>
          </tr>
        </table>
      </form>
      &nbsp;&nbsp;<!-- END Record Grid2 -->&nbsp;&nbsp;</td>
  </tr>
</table>
<br>
<hr style="COLOR: #ff6600" size="2">
</body>
</html>
 
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 14

Expert Comment

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

Author Comment

by:Latzi_Marian
Comment Utility
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.
0
 
LVL 14

Expert Comment

by:_Stilgar_
Comment Utility
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).
0
 

Author Comment

by:Latzi_Marian
Comment Utility
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?
0
 
LVL 14

Assisted Solution

by:_Stilgar_
_Stilgar_ earned 500 total points
Comment Utility
Then either change your postback code to retrieve it all in once, or tweak the preloader logic a bit. But follow my idea of doing it, and you're set.
0
 

Author Comment

by:Latzi_Marian
Comment Utility
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
0
 

Author Closing Comment

by:Latzi_Marian
Comment Utility
Send me to the right path in solving the p[roblem.Thank you.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now