MagicAjax: Customising the 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:

  JavaScript

  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

• 5^th July, 2008: Initial version