Click here to Skip to main content
Click here to Skip to main content

MagicAjax: Customising the "Loading..." Message

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

Introduction

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.

Background

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");
            elem.id = '__AjaxCall_Wait';
            elem.style.position = 'absolute';
            elem.style.height = 17;
            elem.style.paddingLeft = "3px";
            elem.style.paddingRight = "3px";
            elem.style.fontSize = "11px";
            elem.style.fontFamily = 'Arial, Verdana, Tahoma';
            elem.style.border = "#000000 1px solid";
            elem.style.backgroundColor = "DimGray";
            elem.style.color = "#ffffff";
            elem.innerHTML = 'Loading ...';
            elem.style.visibility = '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.

History

  • 5th July, 2008: Initial version

License

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

Share

About the Author

radumi
Software Developer
New Zealand New Zealand
Coder

Comments and Discussions

 
Generalvery useful information Pinmemberchenpengli26-Jun-09 9:26 
Generalabout the asp:Image control Pinmemberericpxz6-Nov-08 17:21 
GeneralRe: about the asp:Image control Pinmemberradumi29-Mar-10 2:20 
GeneralSimple Alternative Solution PinmemberSurendra Sambana8-Jul-08 5:05 
GeneralRe: Simple Alternative Solution PinmemberRadu D.9-Jul-08 2:58 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 8 Jul 2008
Article Copyright 2008 by radumi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid