Archive Note
Starting from version 2.0, you just need to mark any standard ASP.NET Panel control with the AjaxiumLoading attribute as described in the Implementing loading notification with Ajaxium v2.0 section, and the Panel will start indicating the application loading state.
This article is provided for those of our customers who continue using the previous versions of the component.
Implementing loading notification with Ajaxium
When the Ajaxium client-side code initiates a request to the server, it also performs a lookup for a special JavaScript function called Ajaxium_OnLoadingStateChange. If this function is implemented, it is called with one boolean parameter. "True" means that Ajaxium has launched the request - a loading notification must be displayed. "False" indicates that the update has been completed (either successfully or with an error), and the loading notification should become invisible. Below is the simplest way of implementing this function:
<script language="javascript">
function Ajaxium_OnLoadingStateChange(p_Show)
{
Ajaxium_ShowElement("imgLoading",
p_Show);
}
</script>
Ajaxium_ShowElement is a method which shows or hides a DHTML object with a given ID ("imgLoading" in our case). It is part of the Ajaxium client-side API created to save our customers from browser incompatibility troubles.
You also have to define "imgLoading" element - image with this ID - to use this function. Place the following image element somewhere, better at the bottom of your ASP.NET page:
<img id="imgLoading" width="305" height="64"
style="position:absolute;visibility:hidden;z-index:99;left:
0px;top:0px;" src="images/loading_image.gif"
/>
Note that the image has a "position:absolute" style and an exact location on the page defined. These styles are required to place a loading image as a layer above the page. If you need the image to be placed as part of a web page design, use only "visibility:hidden" style to make it hidden by default.
It works fine if the entire website is visible in the browser window. Since it's not always possible, let's see how the "Loading..." message can be made fixed on the visitor's browser screen to guarantee that the user does not miss the message. Assuming that the image size is 305x64, and we want it to be placed at the bottom center of the page, and fixed on most of browsers even when the page is scrolled by visitor during a hidden postback, we proceed as follows:
<script language="javascript">
var m_IntervalID
= -1;
var m_LastLeftPos
= -1;
var m_LastTopPos
= -1;
function Ajaxium_OnLoadingStateChange(p_Show)
{
if(p_Show)
{
Ajaxium_ShowElement("imgLoading", true);
MoveLoading();
MoveLoading();
m_IntervalID =
setInterval("MoveLoading();",
300);
} else
{
Ajaxium_ShowElement("imgLoading", false);
clearInterval(m_IntervalID);
}
}
function MoveLoading()
{
var l_Width
= 305;
var l_WindowWidth
= Ajaxium_GetWindowWidth();
var l_LeftPos
= Ajaxium_GetScrollLeft() +
l_WindowWidth/2 - l_Width/2;
var l_Height
= 64;
var l_WindowHeight
= Ajaxium_GetWindowHeight();
var l_TopPos
= Ajaxium_GetScrollTop() +
l_WindowHeight -
l_Height - 25;
if((m_LastLeftPos
!= l_LeftPos) || (m_LastTopPos
!= l_TopPos))
Ajaxium_MoveElement("imgLoading", l_LeftPos+'px', l_TopPos+'px');
m_LastLeftPos =
l_LeftPos; m_LastTopPos =
l_TopPos;
}
</script>
This example employs the following Ajaxium client-side functions:
Ajaxium_GetWindowWidth() and Ajaxium_GetWindowHeight() which return the size of the client area of the browser window.
Ajaxium_GetScrollLeft() and Ajaxium_GetScrollTop() which return the browser scroll position.
In order to accommodate AJAX-enabled browsers which do not understand "display:fixed" style, the MoveLoading() function is initiated with a 300 milliseconds interval to ensure the proper location of the element in the browser window after a page scroll. To move the element to the exact location, it uses the Ajaxium_MoveElement function which accepts the element's ID and desired coordinates.
The scope of using the Ajaxium_OnLoadingStateChange function is in no way limited to the above situation. You can use it whenever you need to detect whether the page update has been started or completed in order to perform additional operations.
Download full source code of the sample
ASP.NET 2.0 (C#)
ASP.NET 2.0 (Visual Basic .NET)
ASP.NET 1.1 (C#)
ASP.NET 1.1 (Visual Basic .NET)
Note: The source code is provided solely for education purposes. The code will
neither compile nor run unless at least an Evaluation Edition of the Ajaxium
server-side component is used.
Live demo
See this project in action
