MVC数据表对话框未停留在对话框打开的位置



我创建了一个视图,该视图显示了一个带有可点击链接的数据表,该链接打开了一个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();

最新更新