Click here to Skip to main content
Click here to Skip to main content
Alternative Tip/Trick

jQuery tooltip with Ajax tooltip datasource with gridview

, 12 Oct 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
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" />");
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rupesh Kumar Tiwari
Software Developer (Senior)
United States United States

I am a Senior Software Developer working since 2005 in Microsoft ASP.Net and related Technologies.

I work on C#, Asp.Net, MVC, RAZOR, Entity Framework, JavaScript, jQuery, HTML5, CSS3, WCF, Silverlight, WPF, MVVM, SQL, SSIS, etc. Did Function Point Analysis, WBS to estimate projects and worked on Agile Scrum team.

I enjoy on exploring new technologies by implementing and writing about them, great interest in learning Design Patterns and their implementations. I love learning, writing JavaScript; now my favorite JavaScript library is jQuery. I enjoy writing jQuery Plugins and core JavaScript. I also write Technical blogs here. You can find me on LinkedIn.

I wrote an article on Swami Vivekananda posted his audio speeches by reading them.

Follow on   Twitter   Google+

Comments and Discussions

 
GeneralTo answer to your first question, yes this article is meant ... PinmemberAnup Das Gupta (asteranup)20-Oct-11 22:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141216.1 | Last Updated 12 Oct 2011
Article Copyright 2011 by Rupesh Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid