Oct 20 2006

Ajax and html tooltips - part 2

Posted by admin under Ajax

This is continuted from  Part 1

Lets start off by this demo. Put your mouse pointer over the someones LastName column and you'll see a really nice looking tooltip popping up - containing info for the current row.  That data is retrieved from the server by Ajax. The cool thing is that I have also implemented a caching scheme - i.e move to another row and go back to first one. No Ajax call is now needed - the tooltip is saved locally.

 When you download the attached solution you get EXACT my demo page - however on my live server I have removed the "long time simulation feature" - you can however test it yourself by just changing EmployeeServer.cs and uncomment the line

// System.Threading.Thread.Sleep(SleepTimeSimulation * 1000);

Anyway, it's looking really slick, doesn't it? And the cool part: this sample code is fetching data from the (localhost) sql server - and it virtually takes no time at all - therefore you never get to see it - but if it was a long running operation it would show a "Working" animation, just like I do here

So, lets briefly describe what I do:

I have used Ajax.NET which has become my no 1 choice when it comes to Ajax and ASP.NET. I have a method


[AjaxPro.AjaxMethod]

public Employee GetEmployeeExtra(string sId, string sDivId) 


which gets called whenever I need to get new data into the client side buffer (see code in table1.aspx)

EmployeeServer.GetEmployeeExtra( sUniqueDataId.toString(), sDivId.toString(), updateCallback );

Take a look at updateCallback where I handle the result and update the tooltip div element:s innerHTML.

I have used the base GUI from my table and css article

So, download and have a go. I will soon update this very project with some more cool things so stay tuned!.

Attachments

Domains or hosting - 10% off