必须显示本周五要完成的工作的注释工具提示,并且我不了解我编写代码的方式出了什么问题。
首先,我要显示注释图标,并在选择了注释时显示工具提示,该注释将从数据库中提取最新注释并显示。
这是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" />