Нужна помощь в привязке всплывающей подсказки и отображении значений из базы данных (обновлено) - PullRequest
Новая
       13

Нужна помощь в привязке всплывающей подсказки и отображении значений из базы данных (обновлено)

0 голосов
/ 03 апреля 2019

Мне нужно отобразить всплывающую подсказку для моей работы, которая должна быть сделана в эту пятницу, и я не понимаю, что не так с тем, как я кодировал вещи.

Сначала я хочу отобразить значок комментария и отобразить всплывающую подсказку, когда выбран комментарий, который извлечет последний комментарий из базы данных и отобразит его.

Это jquery. На другой странице он работает точно так же, как и кодированный, но я думаю, что переплет перепутан ( картинка здесь ). Он также не отображает значения в БД, что является моей другой проблемой.

Вот код: 

 $(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>

Желаемый результат заключается в том, что я хочу, чтобы комментарий отображался во всплывающем окне при наведении мыши на изображение. Однако с этим кодом ничего не появляется.

Пожалуйста, дайте мне знать, что я пропускаю или делаю неправильно, спасибо.

EDIT:

Я написал другой 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" />
...