Click here to Skip to main content
13,251,998 members (56,866 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked
Posted 8 Jul 2008

MagicAjax: Customising the "Loading..." Message

, 8 Jul 2008
Rate this:
Please Sign up or sign in to vote.
An article about how to customise the MagicAjax default "Loading..." message


I needed to do what I say in the title and Googling this subject was not of great help, so here we are... I agree it may be obvious what to do but sometimes... under pressure... such an article may be of a great help.


Basically, I see three most convenient ways to customise the MagicAjax library "Loading..." message:

  1. Hook into the library code... but better not only for such small customisation.
  2. Add in your page an HTML element having the name __AjaxCall_Wait that is expected by the library.
  3. Write an ASP.NET control that will render an HTML element having the name __AjaxCall_Wait (expected by the library).

Hook into the Library Code

I started with this because reading the library JavaScript is the way to understand what you need to do.

  • I used Lutz Roeder's Reflector to reverse the *.dll rather than downloading the opensource code because Reflector generates for you in one click all that you need to simply include the library project into a solution and play around with Visual Studio.

  • Reading the library JavaScript, I have seen the function:

    function CreateWaitElement() {
        var elem = document.getElementById('__AjaxCall_Wait');
        if (!elem) {
            elem = document.createElement("div");
   = '__AjaxCall_Wait';
   = 'absolute';
   = 17;
   = "3px";
   = "3px";
   = "11px";
   = 'Arial, Verdana, Tahoma';
   = "#000000 1px solid";
   = "DimGray";
   = "#ffffff";
            elem.innerHTML = 'Loading ...';
   = 'hidden';
            document.body.insertBefore(elem, document.body.firstChild);
        waitElement = elem;

    Of course you can hook into elem.innerHTML something like an img tag but it would not be such a great idea.

  • From now on it is clear that the library expects to find in the host page an HTML element called __AjaxCall_Wait, otherwise the element will be created automatically.

Add in your page an HTML element having the name __AjaxCall_Wait that is expected by the library.

Just hook an...

<asp:Image id="__AjaxCall_Wait" runat="server" ImageUrl="~/img/wait.gif"

style="position: absolute; visibility: hidden"></asp:Image> 

... between the body and the form.

Write an ASP.NET Control...

It would be a very simple control only to render the desired HTML element called __AjaxCall_Wait; place it again between page body and form tags. This approach is useful when you want to run some initialisation code in pages having all different base classes, etc. Just be aware that the HTML element rendered by the control will have the id as a concatenation between the ASP.NET control id in the page, an "_" and finally the id of the asp:Image inside the control.

So if the control is has id="__AjaxCall" on the page and the <asp:Image... has id="Wait" inside the control, you will finally get the right id="__AjaxCall_Wait" for the element rendered in the page HTML - as the library expects.

Hope this helps.


  • 5th July, 2008: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
New Zealand New Zealand

You may also be interested in...

Comments and Discussions

Generalvery useful information Pin
chenpengli26-Jun-09 9:26
memberchenpengli26-Jun-09 9:26 
Generalabout the asp:Image control Pin
ericpxz6-Nov-08 17:21
memberericpxz6-Nov-08 17:21 
GeneralRe: about the asp:Image control Pin
radumi29-Mar-10 2:20
memberradumi29-Mar-10 2:20 
GeneralSimple Alternative Solution Pin
Surendra Sambana8-Jul-08 5:05
memberSurendra Sambana8-Jul-08 5:05 
GeneralRe: Simple Alternative Solution Pin
Radu D.9-Jul-08 2:58
memberRadu D.9-Jul-08 2:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 8 Jul 2008
Article Copyright 2008 by radumi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid