jQuery UI Dialogfeld - wird nach dem Schließen nicht geöffnet

Ich habe ein Problem mit dem jquery-ui dialog box.

Das Problem ist, dass wenn ich das Dialogfeld schließe und dann auf den Link klicke, der es auslöst, es nicht wieder angezeigt wird, es sei denn, ich aktualisiere die Seite.

Wie kann ich das Dialogfeld zurückrufen, ohne die eigentliche Seite zu aktualisieren?

Unten ist mein Code:

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

Vielen Dank

Sie sollten es eigentlich verwenden $("#terms").dialog({ autoOpen: false });, um es zu initialisieren. Anschließend können Sie $('#terms').dialog('open');den Dialog öffnen und $('#terms').dialog('close');schließen.

Hallo Leute, ich habe es geschafft, es zu lösen.

Ich habe die Funktion "Zerstören" anstelle der Funktion "Schließen" verwendet (das ergibt keinen Sinn), aber es hat funktioniert!

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

in der letzten Zeile, verwenden Sie keine $(this).remove()Verwendung $(this).hide()statt.

BEARBEITEN: Zur Verdeutlichung entfernen Sie beim Schließen-Klick-Ereignis das #termsDiv aus dem DOM, weshalb es nicht zurückkommt. Sie müssen es nur verstecken.

Ich glaube, Sie können den Dialog nur einmal initialisieren. Im obigen Beispiel wird versucht, den Dialog jedes Mal zu initialisieren, wenn auf #terms geklickt wird. Dies wird Probleme verursachen. Stattdessen sollte die Initialisierung außerhalb des Klickereignisses erfolgen. Ihr Beispiel sollte wahrscheinlich ungefähr so ​​aussehen:

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

Ich denke, sobald Sie das geklärt haben, sollte es das von Ihnen beschriebene Problem "Öffnen von Link" beheben.

Für mich funktioniert dieser Ansatz:

Der Dialog kann durch Klicken auf das X im Dialog oder durch Klicken auf "Bewaren" geschlossen werden. Ich füge eine (willkürliche) ID hinzu, weil ich sicher sein muss, dass jedes dem Dom hinzugefügte HTML-Bit anschließend entfernt wird.

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

 <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>

Dies ist ein super alter Thread, aber da die Antwort sogar "Es macht keinen Sinn" sagt, dachte ich, ich würde die Antwort hinzufügen ...

Der ursprüngliche Beitrag verwendete $ (this) .remove (); Im Close-Handler würde dies tatsächlich das Dialogfeld div aus dem DOM entfernen. Der Versuch, ein Dialogfeld erneut zu initialisieren, würde nicht funktionieren, da das div entfernt wurde.

Mit $ (this) .dialog ('destroy') wird die im dialog-Objekt definierte Methode destroy aufgerufen, die es nicht aus dem DOM entfernt.

Aus der Dokumentation:

zerstören()

Entfernt die Dialogfunktionalität vollständig. Dadurch wird das Element wieder in den >> Pre-Init-Status versetzt. Diese Methode akzeptiert keine Argumente.

Das heißt, zerstören oder entfernen Sie nur, wenn Sie einen guten Grund dazu haben.

$(this).dialog('destroy');

funktioniert!

.close () ist allgemeiner und kann in Bezug auf weitere Objekte verwendet werden. .dialog ('close') kann nur mit Dialogen verwendet werden

Ich benutze den Dialog als Dialogdateibrowser und Uploader, dann schreibe ich den Code so um

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

alles scheint super zu funktionieren.

Ich hatte das gleiche Problem mit dem jquery-ui-Overlay-Dialogfeld - es würde nur einmal funktionieren und dann aufhören, es sei denn, ich lade die Seite neu. Ich fand die Antwort in einem ihrer Beispiele -
Mehrere Überlagerungen auf derselben Seite
flowplayer_tools_multiple_open_close
- wer hätte das schon, oder? :-) -

die wichtige Einstellung schien zu sein

oneInstance: false

Also, jetzt habe ich es so -

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

  }

}

und alles funktioniert gut

hoffe das hilft jemandem

Ö.

Die jQuery-Dokumentation enthält einen Link zu diesem Artikel ' Grundlegende Verwendung des jQuery-UI-Dialogfelds ', in dem diese Situation und ihre Lösung erläutert werden.