jQuery and AJAX Tooltips

nosey — Thu, 01 Jan 2009 19:38:58 +0000

So the day has dawned, very symbolic that this day happens to be the first of a new year… enough of that. The day has finally come where I post a JavaScript entry! Who would have thought that???

Over the last couple of months I have had a very passionate relationship with a new hottie I discovered. She is named jQuery and OMG can she do tricks… OK, stop this talk right now

Basically I have had my head in AJAX for ASP.NET doing what others before already realized probably wasn’t the best approach. Finally I got around to have a look at jQuery and I must admit that (especially for my ASP.NET MVC project(s)) I haven’t looked back!!!

Today I had a little feature I wanted to solve with some AJAX:

I have a list of objects displayed in a certain view. One property on these objects is calculated and involved some semi-heavy database and calculation stuff and therefore requires both time and system resources to get. This value is not in particular important to the current view, but is a nice-to-have information. This means that the value as such does not need to appear in the view after rendering. I therefore figured it could be nice to have in a dynamic tooltip, i.e. “on tooltip hover, calculate/retrieve the value and display it as a tooltip”.

Having used other of Jörn Zafferer jQuery plug-in’s previously (with great success) I turned my attention to his tooltip plugin.

Having read the documentation it is apparent that, while you can specify a callback function (namely the “bodyHandler” property) to determine which “value” to display in the tooltip, there is an issue with this: it is synchronous! And by definition AJAX is asynchronous. The problem here is that if you do a $.get() call you the return value of the bodyHandler callback is “out of scope”, since it is first available once the AJAX call is completed, i.e.:

$(".tooltip-element").tooltip({
    bodyHandler: function() {
        $.get("/MyController/MyAction", { id : "myid" }, function(data) { /* do what with "data"? */; }, "html");
    },
    showURL: false
});

My solution to this was the following:

$(".tooltip-element").tooltip({
    bodyHandler: function() {
        var result = $("").html("some loading indicator");
        $.get("/MyController/MyAction", { id: "myid" }, function(data) { result.html(data); }, "html");
        return result;
    },
    showURL: false
});

I think that is pretty nifty! Of course the “some loading indicator” can be tweaked (e.g. use a AJAX load indicator). And this is of course not specific to ASP.NET MVC!

UPDATE:

There is a problem with this approach! The jQuery tooltip plugin used seems to invoke the bodyHandler callback directly “on mouse over”, ie. not after the delay. This means that although the tooltip displays nicely after the specified delay, the Ajax call was performed at T=0. What this effectively means is that if you eg. have a table where all values in column 1 have this Ajax-tooltip-thingy. If you then move the mouse in over a couple of the values each time you the cursor is over the value an Ajax call is executed. Not so good unless you want to utilize all resources in your server

Back to the drawing board…

Veggerby : IBlog » jQuery

jQuery and AJAX Tooltips