Ajax and html tooltips – part 2
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!.