Freitag, Juni 16, 2006

Building a AJAX enabled popup control

When fetching the extra information costs a lot of resources (cpu, memory or time) on the server or is more than just a few words it is better to not include it into the page all the time but get it from the server when the user requests for it. This scenario is perfect for using the AJAX technology.

Using the AJAX engine

To get the information from the server we need a web service with one method that gets a key string as parameter and returns the popup information. We can trust this method so far that we can rely that it is returning valid html code.

The timer object that we need to delay the popup a little bit can be completely replaced by using the delay option of the AJAX engine.

The onmouseover event code only needs to start the AJAX engine after checking for a valid html object.

ajax.Start(AJAXPopUpBehaviour.action, obj);

The action that describes the AJAX mechanism for the popUp keeps all the elements of the asynchronous execution together. It prepares the server call be fetching the url of the hyperlink, calls the GetDetails method on the server and then finishes the action by showing the popUp control.

action: {
  delay: 300,
  queueMultiple: false,
  prepare: function(obj) { return (obj.href); },
  call: "proxies.ServerInfo.GetDetails",
  finish: "",
  onException: proxies.alertException

Using a Web Control

But it still can be easier by using a web control:

<ajax:PopUp runat="server" id="ajaxpopup1" infomethod="proxies.ServerInfo.GetDetails" />

The method that returns the information to the client is made availale to the client by including the WebService and creating a JavaScript proxy:

<script type="text/javascript"

Implementing the sample web control

On the client a JavaScript Behavior is used that is included into the page by the web control that is executed on the server. Read more and see the sample live at:

Keine Kommentare: