web-dev-qa-db-ja.com

jQuery UIダイアログボックス-閉じた後に開かない

jquery-ui dialog box に問題があります。

問題は、ダイアログボックスを閉じてから、それをトリガーするリンクをクリックすると、ページを更新しない限りポップアップしないことです

実際のページを更新せずにダイアログボックスを呼び出す方法はありますか。

以下は私のコードです：

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

ありがとう

javascriptjqueryjquery-uimodal-dialogjquery-ui-dialog
79
David Bonnici

こんにちはみんな私はそれを解決することができた。

代わりに、関数destroyを使用しました（意味がありません）が、機能しました！

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
14
David Bonnici

実際には、$("#terms").dialog({ autoOpen: false });を使用して初期化することになっています。次に、$('#terms').dialog('open');を使用してダイアログを開き、$('#terms').dialog('close');を使用してダイアログを閉じます。

110
Shane Fulmer

最後の行では、$(this).remove()を使用しないでください。代わりに$(this).hide()を使用してください。

編集：明確にするために、閉じるクリックイベントでDOMから#terms divを削除しているので、戻ってこないのはそのためです。代わりに非表示にするだけです。

12
Darko Z

ダイアログを一度だけ初期化できると思います。上記の例は、＃termsがクリックされるたびにダイアログを初期化しようとしています。これにより問題が発生します。代わりに、クリックイベントの外部で初期化を行う必要があります。あなたの例はおそらく次のようになります：

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons: { "Close": function() { $(this).dialog('close'); } },
        close: function(ev, ui) { $(this).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

それをクリアしたら、説明した「リンクから開く」問題を修正する必要があると思います。

9
26design
 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>
3
Joanna Avalos

これは非常に古いスレッドですが、答えが「意味をなさない」とさえ言うので、私は答えを追加すると思いました...

元の投稿は$（this）.remove（）;を使用しましたcloseハンドラーでは、これは実際にDOMからダイアログdivを削除します。 divが削除されたため、ダイアログを再度初期化しようとしても機能しませんでした。

$（this）.dialog（ 'destroy'）を使用すると、DOMから削除されないダイアログオブジェクトで定義されたdestroyメソッドが呼び出されます。

ドキュメントから：

破壊する（）

ダイアログ機能を完全に削除します。これにより、要素は>> pre-init状態に戻ります。このメソッドは引数を受け入れません。

とはいえ、正当な理由がある場合にのみ、破棄または破棄してください。

3
crad

私にとってこのアプローチはうまくいきます：

ダイアログを閉じるには、ダイアログのXをクリックするか、「注意」をクリックします。 domに追加されたhtmlのすべてのビットが後で削除されることを確認する必要があるため、（任意の）idを追加しています。

$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
        title: 'Opdracht wijzigen',
        show: 'clip',
        hide: 'clip',
        minWidth: 520,
        width: 520,
        modal: true,
        buttons: { 'Bewaren': dossier_edit_form_opslaan },
        close: function(event, ui){ 
                                  $(this).dialog('destroy'); 
                                  $('#dossier_edit_form_tmp_id').remove();
               }
});
3
Zilverdistel
$(this).dialog('destroy');

動作します！

2
Benedikt

.close（）は一般的であり、より多くのオブジェクトを参照して使用できます。 .dialog（ 'close'）はダイアログでのみ使用できます

1
John

ダイアログをダイアログファイルブラウザーおよびアップローダーとして使用し、次のようにコードを書き換えます

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});

すべてがうまくいくようです。

1
edib

Jquery-uiオーバーレイダイアログボックスでも同じ問題が発生しました。1回だけ機能し、ページをリロードしない限り停止します。私は彼らの例の一つで答えを見つけました-
同じページ上の複数のオーバーレイ
flowplayer_tools_multiple_open_close
-だれが持っているでしょう?? :-)-

重要な設定は

oneInstance: false

だから、今私はそれをこのようにしています-

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'Apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

そしてすべてがうまく動作します

これが誰かを助けることを願って

O.

1
Oleg Ivanov

JQueryのドキュメントには、この記事へのリンク「 jQuery UIダイアログの基本的な使用法 」があり、この状況とその解決方法について説明しています。

0
Barka