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

79

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

David Bonnici
quelle

Antworten:

110

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.

Shane Fulmer
quelle
1
Das funktioniert perfekt. Die jQuery-UI-Dokumente sind hier nicht sehr klar. Aber die Idee, dass die dialogFunktion zum Initialisieren, Zeigen und Verstecken dient, machte für mich Sinn. Vielen Dank.
Steve Cooper
Wenn Sie diesen Dialog aus HTML laden, das sich dynamisch ändern kann, ist es nicht intuitiv, warum er nicht funktioniert. Hat jemand gute Lösungen, die generisch auf diese Situationen angewendet werden können?
Milimetric
@Milimetric Sie können immer $ (this) .remove () verwenden; Funktion am Ende jeder Schaltfläche Ihres Dialogfelds. Auf diese Weise wird das gesamte Dialogfeld beim erneuten Aufrufen von Grund auf neu erstellt. Beachten Sie, dass diese Funktion anders funktioniert als $ (this) .dialog ("destroy"); da es den Dialog nur auf seinen Pre-Init-Zustand zurücksetzt, ohne das Objekt zu zerstören.
Jeff Noel
14

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' });
});
David Bonnici
quelle
4
Destroy funktioniert, wenn Sie diese Methode verwenden. Damit close () funktioniert, instanziieren Sie zuerst den Dialog, zeigen Sie ihn dann mit dialog.show () an, schließen Sie ihn dann mit dialog.close (), und er wird problemlos wieder geöffnet .
RaeLehman
6
Fast. Sie haben Recht, es zuerst zu initiieren, aber danach sind es .dialog ("offen") und .dialog ("schließen")
rdworth
12

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.

Darko Z.
quelle
9

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.

26design
quelle
3

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();
               }
});
Zilverdistel
quelle
3
 <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>
Joanna Avalos
quelle
3

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.

crad
quelle
2
$(this).dialog('destroy');

funktioniert!

Benedikt
quelle
1

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

John
quelle
1

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.

edib
quelle
1

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

Ö.

Oleg Ivanov
quelle