0

剣道のドロップダウンリスト情報Fancybox-Popupを置くと問題が発生します。詳細：ページAがあります：このページにはKendoドロップダウンリスト（id = #myDropdown）が含まれています。ページBがあります：Fancyboxの呼び出し元をここに配置します-つまり、Fancyboxを使用してページAをロードします（ajaxによる）

すべてがうまく見えますが、ここで問題が発生しました。ドロップダウンリストを初期化すると、Kendo-UIはUI効果の目的で「アンカー」タグを作成します。例：DropdownListのid = #myDropdown Kendoは、id =＃myDropdown-listのタグをもう1つ作成します。

Fancybox-popupを閉じた後、「＃myDropdown」はDOMから削除されましたが、「＃myDropdown-list」です。それはまだDOMの残業であり、ポップアップを再度呼び出した後は2倍になります（もちろん、現在のページを更新しない場合）。

そして剣道-DateTimePickerも同じです。

p / s：そしてそれがあまりにも悪かったら英語で申し訳ありません：D。私の質問をいただければ幸いです。

私の「ポップアップ」をiframeに配置します。しかし、この場合にiframeを使用するときにそれが適切かどうかはわかりません...

4

1 に答える 1

1

IFrame の使用の有無はエラーの原因ではありません。コンテナーを使用して、それを使用せずに ajax 経由で fancybox をロードしようとしましたが、違いはありませんでした。

私が見つけたのは一種のハックですが、問題は解決します。ポップアップを作成するコードがあり、ポップアップのコンテンツが href 'popupFrame' にあるとします。

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

もう 1 つの部分は、ポップアップを閉じる前に呼び出される関数です。

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

もちろん、removeKendoHelpers をインライン関数として作成し、さらに削除する部分がある場合は、そのコードを removeKendoHelpers 関数に入れることもできます。

興味深い点として、fancybox API では onCleanup と onClosed がオプションとしてリストされていますが、機能しません。代わりに beforeClose または afterClose を使用してください。

アップデート：

実際、剣道ウィジェットの destroy() メソッドを呼び出すことで、多くの問題が解決されます。DateTimePicker の 3 つのヘルパー div の 1 つを除いて、ウィジェットの削除の問題が解決されるため、クローズは次のようになります。

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();
}

これらがあなたの問題をすべて解決することを願っています！

于 2013-01-29T20:39:21.010 に答える