it-swarm.com.de

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

Ich habe ein Problem mit dem jquery-ui dialog box

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

Wie kann ich das Dialogfeld zurückrufen, ohne die aktuelle 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

79
David Bonnici

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

Ich benutzte die Funktion destroy statt close (es macht 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' });
});
14
David Bonnici

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

110
Shane Fulmer

verwenden Sie in der letzten Zeile nicht $(this).remove(), sondern $(this).hide().

BEARBEITEN: Um zu klären, entfernen Sie beim Schließen-Ereignis das #terms -div aus dem DOM, weshalb es nicht zurückkommt. Sie müssen es nur verstecken.

12
Darko Z

Ich glaube, Sie können den Dialog nur einmal initialisieren. Das obige Beispiel versucht, das Dialogfeld jedes Mal zu initialisieren, wenn auf #terms geklickt wird. Dies wird zu Problemen führen. Stattdessen sollte die Initialisierung außerhalb des Klickereignisses erfolgen. Ihr Beispiel sollte wahrscheinlich 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, wenn Sie das geklärt haben, sollte es das von Ihnen beschriebene Problem beheben.

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

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

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

Mit $ (this) .dialog ('destroy') wird die im Dialogobjekt definierte Zerstörung aufgerufen, die sie nicht aus dem DOM entfernt.

Aus der Dokumentation:

zerstören()

Entfernt die Dialogfunktion vollständig. Dadurch wird das Element in den Zustand >> pre-init .. .. zurückgesetzt. Diese Methode akzeptiert keine Argumente.

Das heißt, zerstören oder entfernen Sie es nur, wenn Sie einen guten Grund dafür haben.

3
crad

Für mich funktioniert dieser Ansatz: 

Das Dialogfeld kann durch Klicken auf das X im Dialogfeld oder durch Klicken auf "Bewaren" geschlossen werden. Ich füge eine (beliebige) ID hinzu, da ich sichergehen muss, dass jedes zum Dom hinzugefügte HTML-Element danach 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();
               }
});
3
Zilverdistel
$(this).dialog('destroy');

funktioniert!

2
Benedikt

.close () ist mehr allgemein und kann in Bezug auf mehrere Objekte verwendet werden. .dialog ('close') kann nur mit Dialogen verwendet werden

1
John

Ich benutze den Dialog als Browser und Uploader für Dialogdateien und schreibe 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.

1
edib

Ich hatte das gleiche Problem mit dem Jquery-ui-Overlay-Dialogfeld - es würde nur einmal funktionieren und dann stoppen, wenn ich die Seite nicht neu lade. Ich habe die Antwort in einem ihrer Beispiele gefunden -
Mehrere Overlays auf derselben Seite
flowplayer_tools_multiple_open_close
- Wer hätte das wohl, oder? :-) - 

die wichtige einstellung schien zu sein 

oneInstance: false

so 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

O.

1
Oleg Ivanov

Die jQuery-Dokumentation enthält einen Link zu diesem Artikel ' Grundlegende Verwendung des Dialogfelds für die jQuery-Benutzeroberfläche '.

0
Barka