需要帮助绑定工具提示并显示数据库中的值(已更新)

时间:2019-04-03 18:46:50

标签: c# jquery ajax asp.net-mvc tooltip

必须显示本周五要完成的工作的注释工具提示,并且我不了解我编写代码的方式出了什么问题。

首先,我要显示注释图标,并在选择了注释时显示工具提示,该注释将从数据库中提取最新注释并显示。

这是jquery。它可以完全按编码在另一页上工作,但是我认为绑定已搞砸了(picture here)。它还不显示db值,这是我的另一个问题。

代码如下:

 $(document).ready(function () {
        bind();
        $('#table').dataTable(
        {
            "bSort": true,
            "sScrollY": "550px",
            "iDisplayLength": 25,
            "bFilter": false,
            "fnDrawCallback": function (oSettings) {
                bind();
            }
        });

    function bind() {
        var validOpen = true;

        $(document).mousemove(function (e) {
            var xPos = e.pageX + 10;
            var yPos = e.pageY - $(window).scrollTop() + 10;
            $("#commentDialog").dialog("option", { position: [xPos, yPos] });
        });

        $("#commentDialog").dialog({
            autoOpen: false,
            width: 350
        });

        $(".comment").bind("mouseover", function () {
            validOpen = true;
            $.ajax({
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                url: "/PersonFamily/GetInformationByID",
                data: JSON.stringify({
                    Comment: $(this).data("Comment"),
                    dtaID: $(this).data("InformationID"),
                }),
                success: function (data) {
                    $("#commentParagraph").text(data.Comment);
                    if (validOpen) {
                        $("#commentDialog").dialog('open'); // open
                    }
                }
            });
        });

        $(".comment").bind("mouseleave", function () {
            validOpen = false;
            $("#commentDialog").dialog('close'); // close
        });
    }
    });

我想在同一视图中显示它的地方:

<td class="comment">
    @Html.DisplayFor(x => x.Referrals[i].Comment)
    @if (Model.Referrals.Exists(x => x.Comment != null || x.Comment != "") == true)
    {
       <img class="comment" id="comment" data-id="comment" src="~/Images/Comment.png" />
    }
</td>

理想的结果是,当我将鼠标悬停在图像上时,我希望注释显示在弹出窗口中。但是,此代码没有显示任何内容。

谢谢,让我知道我的缺失或做错了什么。

编辑:

我写了不同的jquery,并且能够显示它(尽管看起来不太好),但仍然无法获取数据库值。我尝试显示它的方式有问题,我们将不胜感激。

$(document).ready(function () {
        $('.comment').tooltip({
            track: true
        });

        var title = $(this).attr('title');
        var elem = $(this);

        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            url: "/PersonFamily/GetInformationByID",
            data: JSON.stringify({
                text: dataRow["Comment"],
                ID: dataRow["InformationID"]
            }),
            success: function (data) {
                elem.attr('data-toggle', 'tooltip');
                elem.attr('title', text);
                elem.tooltip().tooltip("show");
            },
            error: function (data) {
                console.log(data);
            }
        });
    });

查看:

<img class="comment" data-id="data" src="~/Images/Comment.png" />

0 个答案:

没有答案