65.9K
CodeProject is changing. Read more.
Home

jQuery tooltip with Ajax tooltip datasource with gridview

starIconstarIconstarIconstarIconstarIcon

5.00/5 (2 votes)

Oct 12, 2011

CPOL
viewsIcon

14280

downloadIcon

66

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:
 .toolStyle { width:300px; height:100px;background-color:gray;color:white }
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" />");
}