閉じるときにダイアログを完全に削除する方法


133

ajax操作が失敗した場合、エラーのある新しいdivを作成し、それをダイアログとして表示します。ダイアログが閉じたら、divを完全に破棄して削除します。これどうやってするの?私のコードは現時点では次のようになります。

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).destroy().remove();
        }
    });

これを実行すると、ダイアログボックスは正しく表示されますが、ダイアログボックスを閉じると、ダイアログはまだHTMLに表示されています(FireBugを使用)。ここで何が欠けていますか?忘れてしまったことは?

更新:コードがfirebugコンソールでエラーになることに気づきました。

$(this).destroyは関数ではありません

私を手伝ってくれる人はいますか?

更新:$(this).remove()代わりに行うと、アイテムはHTMLから削除されます。しかし、それはDOMから完全に削除されているのでしょうか?または、どういうわけか、最初にその破壊関数も呼び出す必要がありますか?

回答:


262
$(this).dialog('destroy').remove()

これはダイアログを破棄し、ダイアログを「ホスト」していたdivをDOMから完全に削除します


3
FFとFirebugを開いた状態でこれを使用する場合は注意してください。クラッシュします。 code.google.com/p/fbug/issues/detail?id=6290何時間も費やして、コードのどこが悪いのかを理解しました。
Hendry H. 2013

5
DOMのdivを使用していて、動的に作成されていない場合は、を使用してください.empty()。その後、コースの内容を再度入力すれば、それを再利用できます。
KoalaBear 2013

2
@ HendryH。、Firefox 23.0とFirebug 1.11.4では問題にならないようです。
cjm 2013

2
であるdestroy必要?要素を削除するとダイアログも破壊されませんか?
ドルスカ2014


10

なぜそれを削除したいのですか?

複数のインスタンスが作成されないようにする場合は、次の方法を使用してください...

$('#myDialog') 
    .dialog( 
    { 
        title: 'Error', 
        close: function(event, ui) 
        { 
            $(this).dialog('close');
        } 
    }); 

そしてエラーが発生したら、あなたはそうするでしょう...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');

ajax呼び出しから返される内容に応じて異なるコンテンツが含まれるため、私はそれがより簡単になると思っていました。また、divは例で示したように静的ではありませんが、github.com / nje / jquery-tmplプラグインによってレンダリングされます。ダイアログの内容を交換する良い方法があれば、それを見てみたいと思います:)
Svish

まあ、私の例では、ダイアログdivを使用して文字列をダンプするという非常に単純なオプションを使用しました。$( '#myDialog')。html( "Ooops。"); これを変更して、ダイアログdiv内のサブコントロールのコンテンツを変更することもできます。
フィオナ-myaccessible.website 2010年

特にオーバーライドしない限り、すべてのdialogOptionsは#myDialogに残るため、これは優れたアプローチではありません。2番目のダイアログは、(常に)最初のダイアログと同じボタン、高さなどを持つべきではありません。
Michiel Cornille、2016年

8
$(dialogElement).empty();

$(dialogElement).remove();

これは実際にそれを修正します


3

これは私のために働いています

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).dialog("close");
            $(this).remove();
        }
    });

乾杯!

PS:私はやや似たような問題があり、上記のアプローチで解決しました。


2
closeコールバック内からcloseメソッドを呼び出しています!jQuery UIは、これによって示唆される無限ループを防ぐのに十分スマートですが、それでも冗長であり、私は間違いなくエレガントだとは思いません。
Elezar

回答を書いている時点では、がなければ$(this).dialog("close");、ダイアログは消えません。jQueryは時々非常に奇妙です。
deb_

2

私にとって魅力的なように機能する醜い解決策:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});

4
ちょっと奇妙なことです。ダイアログを開いてすぐに削除します...
認知症

1

あなたは使うことができます

$(dialogElement).empty();    
$(dialogElement).remove();

0

私はすべてのjsプロジェクトでこの関数を使用しています

あなたはそれを呼び出します:hideAndResetModals( "#IdModalDialog")

以下を定義します。

function hideAndResetModals(modalID)
{
    $(modalID).modal('hide');
    clearValidation(modalID); //You implement it if you need it. If not, you can remote this line
    $(modalID).on('hidden.bs.modal', function () 
    {
        $(modalID).find('form').trigger('reset');  
    });
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.