[英]Jquery ui Dialog in an MVC listing table
I have a listing table displaying some information from the database. 我有一个列表表,显示来自数据库的一些信息。
What i am trying to do is to check if the item status is 1 and if comments exists to display a little icon where the user will click on it and see the specific comment for that item. 我正在尝试做的是检查项目状态是否为1,以及是否存在注释以显示一个小图标,用户将在其中单击并查看该项目的特定注释。
So in the listing table it seems to display fine that icon according to the above criteria but when i click on a specific listing it opens all dialogs with comments for all other listings with the same item status instead of the one i have chosen. 因此,在清单表中,似乎可以根据上述标准很好地显示该图标,但是当我单击特定的清单时,它会打开所有对话框,并带有所有其他具有相同项目状态的清单的注释,而不是我选择的状态。
Can you please help me on what am i doing wrong ? 您能帮我解决我做错了什么吗?
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.BookingId)
</td>
<td>
<a href="@Url.Action("ItemDetails", new {id=item.ItemId })" title="@item.Item.ItemDescription">
@Html.DisplayFor(modelItem => item.Item.ItemName)
</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.RequestDate)
</td>
@if (item.StatusCodeId == 1)
{
<td style="color:#DD7500">
@Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)
@if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> @item.Comments</p>
</div>
}
</td>
}
}
</tr>
}
</table>
<script> $(function ()
{
$(" .orangedialog").dialog({
autoOpen: false,
show: { effect: "blind", duration: 1000 },
hide: { effect: "explode", duration: 1000 },
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
$('.orangeclicker').live("click", function () {
$(".orangedialog").dialog("open");
});
});
</script>
They all have the same id
or class
( because they are render in a foreach
statement ) 它们都具有相同的
id
或class
(因为它们在foreach
语句中呈现)
You can add a difference by combining the class or the id with the index
from your list
您可以通过将类或id与
list
的index
相结合来增加差异
I don't have the code in front of me, but I also think something like this would work. 我前面没有代码,但我也认为类似的方法会起作用。
UPDATE: 更新:
$('.orangeclicker').live("click", function (e) {
alert("check"); // if this fires at click, the problem is somewhere else
var target= $(e.currentTarget);
target.next().dialog("open");
});
You should try this: 您应该尝试这样:
first;you have to create links in each row of table having same class. 首先;您必须在具有相同类的表的每一行中创建链接。
<a class="comments">Comments</a>
second; 第二; update your page as:
将页面更新为:
<div id="dialog-details" style="display: none">
<p>
@if (item.Comments != null)
{
<img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" />
<div class="orangedialog" title="Tutor Comments">
<p> @item.Comments</p>
</div>
}
</p>
</div>
third update your script as: 第三次将您的脚本更新为:
$('.comments').click(function () {
$("#dialog-details").dialog('open');
return false;
});
$("#dialog-details").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
</script>
You should Use $(this).next().next().find(".orangedialog")
to find relevent element. 您应该使用
$(this).next().next().find(".orangedialog")
查找相关元素。
$('.orangeclicker').on("click", function (e) {
$element = $(this).next().next().find(".orangedialog");
$element.dialog("open");
});
Update 更新资料
Use on()
instead of live()
使用
on()
代替live()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.