2011-08-17 12 views
5

jQuery UIダイアログが壁を押し上げます。jQuery UIダイアログが予期せず動作する

$('#myDialog').dialog({...})を実行すると、#myDialog要素がコピーされ、bodyタグの下部にあるこの奇妙なウィジェットの中に移動されます。狂ってる!これを行う際には、おそらくユニークなDOM要素(ID付き)を複製します。

私がしようとしているのは、元の要素(#myDialog)のHTMLをリフレッシュするときに予測可能な振る舞いにすることです。私は動的にこれを行う場合は、時々ダイアログは、それ以上を開きません:

http://jsfiddle.net/t67y7/3/

か(それはページの下部にそのようにキャッシュされているため)時々ダイアログが古いHTMLで開きます。これはどういうことですか?

答えて

1

:。

$("#dialogId").dialog({ 
    close: function() { 
     $(this).dialog("destroy"); 
     // you may want empty content after close if you use AJAX request to get content for dialog 
     $(this).html(''); 
    } 
} 

破壊する機能が飾られたコードを削除し、あなたのだろう次回ダイアログを表示するときにダイアログエレメントが重複しません。

jsfiddle.net exampleにサンプルコードを追加しました。

+0

js fiddleの例をこの作業に投稿できますか?私が最後に試したとき、破壊はダイアログを破壊し、私はそれを再現しなければなりませんでした。それはあまりにも悪かった。 – Milimetric

+0

私はjs fiddleの例で回答を更新しました – binhgreat

+0

うーん、私はsticklerであることは嫌いですが、その例では私がここに投稿した問題をかなりカバーしていません。 jsfiddleでは、echo ajaxリクエスト( '/ echo/html /')に投稿して、問題のあるものをさらに詳しくシミュレートすることができます。 – Milimetric

5

誰もこの獣のダイアログをいかに巧みに扱うか考えているようではないので、これまで私がこれまでに思いついた最善のことはここにあります。私は優れた選択肢を受け入れます。

var original = $('#dialogId')[0]; 
var clone = $(original).clone().attr('id', 'dialogIdClone'); 
var saveHtml = $(original).html(); 
$(original).html(''); 
$(clone).dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 
     $(clone).remove(); 
     $(original).html(saveHtml); 
    } 
}); 

この完全な狂気の目的は、元のダイアログのHTMLをページ内でユニークに保つことです。どうしてこれがダイアログのビルトインビヘイビアではないのか分かりません...実際、jQuery UIでHTMLをクローン化する必要があるのは分かりません。

+1

私は動的にHichartsを読み込み、2番目のモーダルトリガーにチャートが表示されないという問題がありました。私は他の潜在的な決断を検討しましたが、これが働いたのはこれだけです。ありがとう! –

+1

あなたは大歓迎です。私の醜いハッキングがデフォルトダイアログの動作よりも優れている今日は、私は信じられません。 – Milimetric

2

私は、これはしばらくの間掲載されているが、この問題を処理するための少ない広範囲な方法は以下のようになり知っている:

$('#your-dialog').dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 

    } 
}); 
$('#your-dialog').remove(); 

これは、ダイアログウィジェットによるものであるが、表示を制御できるようにしたいとラップします元の対話の内容が本体の一番下に新しいものを作成します。

このソリューションの欠点は、すべてのサードパーティライブラリウィジェットが正しく動作するようにダイアログを初期化する必要があることです。

あなただけの$(「#dialogId」)を呼び出すことはありません。なぜ、このような密接な機能上のダイアログ(「破壊する」)、
+1

これは悲しいことに、ページライフサイクルの始めにダイアログを作成する時間を費やしたくない場合には機能しません。私はこの質問を投稿して以来、非常に長い時間を過ごしました。私は長いことにもかかわらず、問題はまだ同じで、jQuery UIチームの兆候はありません。このフレームワークに関する最も奇妙なことの1つです。 – Milimetric

0

ダイアログを開く前に空にする必要があります。

$("#dialogId").html(''); 
$("#dialogId").dialog({ 
close: function() { 
    $(this).dialog("destroy"); 
} 
} 
関連する問題