我的项目在首页上有一个“HUD”,列出了正在转换课程计划的学生。它通过对单独的 .ascx 页面执行 AJAX 调用来实现此目的,该页面在 C# 中运行一些 SQL 语句并呈现 HTML。然后它将它传递回首页以放入名为“动态”的 div 中。这是首页上调用它的代码:
function loadDynamic() {
var ControlName = "utilities/HUD.ascx";
$.ajax({
type: "POST",
url: "Default.aspx/Result",
data: "{controlName:'" + ControlName + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#dynamic').html(response.d);
},
failure: function (msg) {
$('#dynamic').html(msg);
}
});
}
这样做是为了方便多人在系统上工作并能够获得实时更新(还有另一个脚本每 10 秒重新调用一次 loadDynamic() 函数,但这与这个问题无关)。
但是,可能会有很多学生同时尝试更改课程计划,因此为了节省页面空间,我们决定尝试放入“...和#更多记录”链接(在 href 中带有 javascript 调用的 <a> 标记)将激活另一个 javascript 函数以显示包含所有学生的单独列表并隐藏仅包含少数学生的列表(此 javascript 函数位于 HUD.ascx页)。
<script type="text/javascript">
function loadMorePending() {
this.document.getElementById(<% =pnlMorePending.ClientID %>).style.visibility = 'visible';
this.document.getElementById(<% =pnlPending.ClientID %>).style.visibility = 'hidden';
}
</script>
有了背景,问题来了:
上面显示的第二个代码块包含对两个 asp:Panel 的引用,其中包含位于 HUD.ascx 页面上的列表。当有人单击“...和更多”链接时,它应该简单地隐藏一个 asp:Panel 并显示另一个。但是,当它调用该函数时,会引发“Microsoft JScript 运行时错误:'ctl01_pnlMorePending' 未定义”。经过进一步调查(在浏览器中呈现后查看 html 源代码时),即使“动态”div 填充了来自 HUD.ascx 页面的数据,它仍然是空的!
<div id="dynamic"></div>
虽然这可以解释为什么找不到 pnlMorePending,但它并没有给我任何关于如何纠正这个问题的线索。我应该如何引用页面上不存在的内容?我试过用面板代替 div,但它仍然不起作用。我认为,问题在于脚本可以很好地转移到首页,但它没有在需要的 HUD.ascx 页面上运行。有没有办法在没有 2 个不同的 HUD.ascx 页面和 2 个不同的“loadDynamic()”函数的情况下做到这一点(当按下“...和更多”按钮时,第二个被调用并填充到“动态”div 中) ?
抱歉,如果有点难以理解。第一次发帖,问题很深。