我创建了一个视图,该视图显示了一个带有可点击链接的数据表,该链接打开了一个jQuery UI对话框。用户希望在页面顶部有一个搜索选项(8个下拉菜单以缩小搜索范围),然后是包含100条可查看记录的数据表。
如果我向下滚动数据表到底部的可查看记录,请单击链接打开对话框。对话框相对于单击的链接打开,但焦点会回到页面顶部,这会导致用户向下滚动到对话框。
好的,我想我应该把焦点设置在对话框上。但是它被忽略了,这让我认为这是MVC领域中的东西。我甚至试图将焦点封装在一个现成的函数中,认为这将是最后一件事。
当我定义日志时,它是非常基本的。我甚至尝试设置位置属性,但这并没有改变问题。
有没有人遇到这个问题,可以把我送到正确的方向?
视图构建数据表:
<table id="navDatatables">
<tbody>
@foreach (var detailsVM in Model.DetailsVMs)
{
<tr>
<td class="standardTable">
<a href="#" onclick="return PVE_UseConfig.Options(@detailsVM.ConfigVersionId, @Model.UseConfigModeId);" class="smallLink">Options</a>
</td>
<td class="standardTable">
<a href="@Url.Content(@detailsVM.ViewerUrl)" target="_blank">@detailsVM.ConfigName</a>
</td>
<td class="standardTable">@detailsVM.ConfigType</td>
<td class="standardTable">@detailsVM.ConfigVersionState</td>
<td class="standardTable">@detailsVM.Organization</td>
<td class="standardTable">@detailsVM.ProcessSet</td>
<td class="standardTable">@detailsVM.ConfigVersionCaption</td>
<td class="standardTable">@detailsVM.ConfigId</td>
<td class="standardTable">@detailsVM.ConfigVersionId</td>
<td class="standardTable">@detailsVM.ConfigOwnerName</td>
<td class="standardTable">@detailsVM.ConfigVersionLastModified</td>
</tr>
}
</tbody>
</table>
对话框代码:
Options: function (configVersionId, useConfigModeId) {
var output = '#modalDialog1';
var postData = { configVersionId: configVersionId, useConfigModeId: useConfigModeId };
$('#modalDialog1').dialog("destroy");
$.ajax({
url: PVE_RootUrl + 'UseConfig/Options',
type: 'POST',
async: false,
data: postData,
success: function (result) {
$(output).html(result);
},
error: function (jqXHR, textStatus, errorThrown) {
var text = jqXHR.responseText;
var from = text.search("<body>") + 6;
var to = text.search("</body>") - 7;
$(output).html(text.substring(from, to));
}
});
$(output).dialog({
title: "Configuration Options",
modal: true,
height: 550,
width: 600,
resizable: false,
draggable: false
});
},
好的,我想出了一个解决问题的方法。我添加了以下代码。变量[output]是对话框的元素。变量[selector]是链接单击的对象。所以,我设置了一个延迟,让一切都结束,然后我设置焦点并创建对话框。
我的解决方案:
//Add this time out function to ensure that the window is loaded.
var fnTimeout = function () {
setTimeout(function () {
if (window.document.readyState == "complete") {
$(selector).focus();
var position = $(selector).position();
window.scrollTo(position.left, position.top);
$(output).dialog({
title: "Configuration Options",
modal: true,
height: 550,
width: 600,
resizable: false,
draggable: false
});
}
else {
fnTimeout();
}
}, 100);
};
fnTimeout();