1

我看过类似的问题，但似乎没有一个包含我想要完成的事情。

基本上，我只想在有人将鼠标悬停在链接上时使用 ajax 调用获取工具提示文本。我已经连接了所有部分，但是，从 onBeforeShow 事件调用 ajax 调用会在 ajax 调用完成之前返回工具提示。我尝试更改 preDelay 选项，这确实会在加载之前导致延迟，但直到延迟之后才会触发 onBeforeShow 事件（因此具有相同的效果）。我基本上只需要工具提示等待显示，直到 ajax 调用完成。

我对其进行了修改以将 ajax 值粘贴在类 var 中。因此，您会看到它在第一次调用之后使用上一次调用的返回值进行更新。

这是代码的精简版本（应该运行）：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [WebMethod]
    public static List<string> GetDescription(string inputId)
    {
        List<string> status = new List<string>();
        //going to do more here to get real data
        status.Add("New Updated Content");
        return status;
    }

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #tooltipmedium
        {
            display: none;
            position: absolute;
            background-color: gray;
            height: 310px;
            padding: 40px 30px 10px 60px;
            margin-top: -40px;
            margin-left: -80px;
            width: 616px;
            font-size: 11px;
            color: #fff;
            z-index: 99999 !important;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js "></script>
     <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

    <script type="text/javascript">
        var description;
        $(document).ready(function () {

            $("a[id*=linkButton]").tooltip({
                offset: [330, 40],
                position: "center right",
                predelay: 500,
                onBeforeShow: tooltipBeforeShow

            });


            function tooltipBeforeShow() {
                getDescription();

                this.getTip().html(description);
            }
            function getDescription() {
                $.ajax({
                    type: "POST",
                    url: "WebForm1.aspx/GetDescription",
                    data: "{inputId:'111'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus + ":" + errorThrown);
                    },
                    success: function (data) {
                        description = data.d[0];

                    }


                });

            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton ID="linkButton" runat="server" Text='Hover Over This' Style="text-decoration: none;
            color: #000000;"></asp:LinkButton>
        <div id="tooltipmedium">
            Blah.. Old Text
        </div>
        <br />
    </div>
    </form>
</body>
</html>
4

1 回答 1

0

How about using the .mouseover() event for the element to call your ajax and then wiring up the .tooltip() in the success function? You'll have to call .tooltip().show() since mouse will already be over the element which would normally cause the tooltip to display.

于 2012-09-10T22:26:05.840 回答