The first version of the popup control had the ability of displaying additional information for words or other HTML elements. That information had to be already delivered to the client together with the HTML markup elements when the page was loaded and is stored by using for example by using a new HTML attribute.
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.
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: "AJAXPopUpBehaviour.show",
onException: proxies.alertException
}
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 available to the client by including the WebService and creating a JavaScript proxy:
<script type="text/javascript" src="/ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S03_AJAXControls/ServerInfo.asmx"> </script>
On the client a JavaScript Behavior (view source) is used that is included into the page by the web control (view source) that is executed on the server.
Because the action object and the finish function are both declared inside the AJAXPopUpBehaviour element the finish method cannot declared/referenced directly because the outer JavaScript object is not known at this time. The AJAX engine now has a workaround for this case. Now you can use a string instead of a function pointer for the prepare and finish properties too. These strings are evaluated and will be replaced by the function reference when the action is started for the first time.
Instead of declaring finish: AJAXPopUpBehaviour.show you just add some quotes and write finish: "AJAXPopUpBehaviour.show". This trick works also with the pointer to the proxy method of the webservice since some months: call: "proxies.ServerInfo.GetDetails"
The prior implementation, that doesn't use AJAX and is available here attaches itself directly to the document element. In this case passing parameters from the server-side web control declaration to the client side behaviour implementation doesn't work as expected because there is no HTML object that can carry these attributes. This advanced implementation now needs a parameter named infomethod for specifying the WebMethod that should be used for the retrieval of the popup information. When using the ajax:PopUp web control an invisible <div> element is used that holds these parameters and the onmouseover and onmouseout methods are attached manually to the document object.
The sample that comes with this implementation is using a method that takes valid urls as a parameter and returns some more information about the server: icon, ip and the country where it is hosted.
The country information comes from a interesting source: This AJAX sample uses the IP-to-Country Database provided by WebHosting.Info (http://www.webhosting.info/), available from http://ip-to-country.webhosting.info/. If you are interested in that part of the code that uses this list then have a look at the source of the webservice (view source).
To avoid long downloads I do not include thus database into the download archives. You should get your own up-to-date list there.
Here some AJAX / Web 2.0 links with a favicon available to see the popup in action:
This page is part of the http://www.mathertel.de/ web site.