Question

当我把Kendo下拉列表信息Fancybox - Popup时出现问题。详情如下：我有页面A：此页面包含Kendo下拉列表（id = #myDropdown）。我有页面B：我把我的Fancybox调用者放在这里 - 我的意思是我使用Fancybox来加载页面A（通过ajax）

一切都很好看，但我遇到了一个问题：您知道，当我初始化下拉列表时，Kendo-UI将为UI效果创建一个“锚点”标记。例如： DropdownList有id = #myDropdown Kendo将再创建一个id为＃= myDropdown-list的标签。

关闭Fancybox-popup后，“#myDropdown”已从DOM中删除，但是“#myDropdown-list”。它仍然在DOM加时，并且在我再次调用弹出窗口后它愿意加倍（当然如果不刷新当前页面）。

和Kendo-DateTimePicker一样。

p / s：如果太糟糕的话，请用英语表示抱歉：D。我希望你能得到我的问题。

我要把我的“弹出窗口”放在iframe中。但我不知道在这种情况下使用iframe是否合适...

Answer 1

是否使用IFrame不是错误的原因。我尝试使用容器，没有它通过ajax加载fancybox，但它没有什么区别。

我发现的是一种黑客行为，但它解决了这个问题。假设我们有一个创建弹出窗口的代码，弹出窗口的内容位于href'popupFrame'中：

$.fancybox({
    'href': 'popupFrame',
    'type': 'ajax',
    beforeClose: removeKendoHelpers
});

另一部分是在关闭弹出窗口之前调用的函数：

function removeKendoHelpers() {
    $("#myDropdown-list").remove();
}

当然，您可以将removeKendoHelpers创建为内联函数，如果还有更多要删除的部分，则将该代码也放入removeKendoHelpers函数中。

一个有趣的评论：在fancybox API中，onCleanup和onClosed被列为选项，但它们不起作用，而是使用beforeClose或afterClose。

更新：

实际上，通过调用kendo小部件的destroy（）方法可以解决很多问题。它解决了小部件的删除问题，除了DateTimePicker的三个辅助div之一，所以close看起来像如下：

function removeKendoHelpers() {
    $("#myDropdown-list").data("kendoDropDownList").destroy();
    $("#datetimepicker").data("kendoDateTimePicker").destroy();
}

要解决日期时间选择器的实际问题，我认为kendop框架中存在一个错误（我将报告此情况并希望得到一些反馈），最后一个函数只需要扩展：

$(".k-widget.k-calendar").remove();

其他解决方案：

这个更粗糙，但对我来说就像一个魅力，即使页面有多个剑道控件，即使你从你的花式盒中打开另一个花式盒。

将fancybox创建包装在一个函数中，例如：

function openFancyBox() {
    $("body").append("<div class='fancybox-marker'></div>");

    $.fancybox({
        'href': 'popupFrame',
        'type': 'ajax',
        beforeClose: removeKendoHelpers
    });
}

这会在body标签的最后创建一个新div，而fancybox关闭时的功能会使用：

function removeKendoHelpers() {
    $(".fancybox-marker").last().nextAll().remove();
    $(".fancybox-marker").last().remove();
}

我希望这些能解决你所有的问题！

Kendo Dropdown置于fancybox popup =糟糕的做法？

1 个答案: