Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

jQuery tooltip with Ajax tooltip datasource with gridview

0.00/5 (No votes)
12 Oct 2011 2  
I have below suggestions:1) Why are you making call to webmethod are you fetching data from server and showing it in tool tip ? But in your example it seems that you are just returning the same data that you get from UI. If you are making some DB call and returning data to UI then its ok to...
I have below suggestions:
1) Why are you making call to webmethod are you fetching data from server and showing it in tool tip ? But in your example it seems that you are just returning the same data that you get from UI. If you are making some DB call and returning data to UI then its ok to call webmethod.

2) From your server you are returning HTML. I would suggest to return only the data. Because the HTML is constant and that you can make it in javascript code and cache it using jquery $.data command. Also keep the styles away from the div, create some css rules class for that. So that your bandwidth will be saved and it will make showing of tooltip more faster.

3) You could do like:
CSS
.toolStyle { width:300px; height:100px;background-color:gray;color:white }


JavaScript
bodyHandler: function() {
    var 
    VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text()
    ,ItemID = $(this).closest("tr").find("input[type=hidden][id*=itemID]").val();
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/getLastRequest",
        data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
        dataType: "json",
        success: function(msg) {
            //get tooltip DOM from cache
            var toolDom = $(this).data('tool');
            if(toolDom) {
                toolDom.html(msg.d);//put data on your div
                $("#loadingimage").parent().html(toolDom); //inject the message div on tooltip
            } else {
                //storing the tooltip div DOM in cache.
                $(this).data('tool',$("div />",{"class":"toolStyle"}));
            }                        
        }
    });
    return $("<img id="loadingimage" src="http://www.heathrowtosouthampton.co.uk/Web/images/gif/Processing1.gif" />");
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here