实现页面的定时刷新功能:jquery使用的是jquery-1.8.3.min.js
1:定时刷新
A界面的一段代码如下:
<script type="text/javascript">
$(document).ready(function () {
fresh();
});
function fresh() {
var id = $("#main").attr("rackId");
$("#main").load("/RackLocations/kczt_refresh/" + id);
setTimeout("fresh()", 1000 * 20);
}
</script>
在界面中,需要刷新的DIV的ID是main。
2:加载内容
使用JQUERY的LOAD方法,加载新内容。这里的KCZT_REFRESH.cshtml由一个DIV构成及需要刷新的DIV内容。
这里采用MVC模式(C#),kczt_refresh.cshtml的内容如下:
@model IEnumerable<Wms.RackLocation>
@{
Layout = null;
}
<table id="table5" border="0" cellpadding="0" cellspacing="0" onselectstart="return false;">
@foreach (var gp in Model.GroupBy(x => x.Level).OrderByDescending(x => x.Key))
{
<tr>
@foreach (var loc in gp.OrderBy(x => x.Column))
{
<td href="#details" class="loc fancybox fancybox.ajax @status(loc.kczt) @(loc.IsLoaded ? "IsLoaded" : "")" userCode="@loc.UserCode" title="@title(loc)" pz-gg-xs="@loc.pz@loc.gg@loc.xs">
<div style="width:22.8px;height:32px;"></div>
</td>
}
</tr>
}
</table>
@helper status(string kczt)
{
if (string.IsNullOrWhiteSpace(kczt))
{
return;
}
<text>kczt</text>@(((Wms.EnumKczt)Enum.Parse(typeof(Wms.EnumKczt), kczt)).ToString("D"))
}
@helper title(Wms.RackLocation loc)
{
@loc.Column<text>列</text>@loc.Level<text>层</text>
@loc.kczt<text> </text>
if (loc.kczt == "包装后成品")
{
@loc.pz <text> </text>
@loc.gg <text> </text>
@loc.xs
}
}
当前面的LOAD方法加载时,这个VIEW返回给前面的界面是一个HTML的字符。由前面的界面执行,但是这个字符又不是普通的。前面的JQUERY并不能直接取到里面的元素。
A界面需要对kczt_refresh.cshtml中的一些元素操作时,不能简单的使用$,需要使用(例如) $(".loc").live("click",function(){})
下面是一具体的代码:
$(document).ready(function () {
$(".loc").live("dblclick", function () {
var title = $(this).attr("title");
$.ajax({
type: "POST",
cache: false,
url: "/racklocations/details",
data: {
userCode: $(this).attr('userCode')
},
success: function (data) {
}
});
});