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
javascript
jquery
jquery-ui
modal-dialog
jquery-ui-dialog
David Bonnici
quelle
quelle
dialog
Funktion zum Initialisieren, Zeigen und Verstecken dient, machte für mich Sinn. Vielen Dank.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' }); });
quelle
in der letzten Zeile, verwenden Sie keine
$(this).remove()
Verwendung$(this).hide()
statt.BEARBEITEN: Zur Verdeutlichung entfernen Sie beim Schließen-Klick-Ereignis das
#terms
Div aus dem DOM, weshalb es nicht zurückkommt. Sie müssen es nur verstecken.quelle
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.
quelle
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(); } });
quelle
<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>
quelle
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:
Das heißt, zerstören oder entfernen Sie nur, wenn Sie einen guten Grund dazu haben.
quelle
$(this).dialog('destroy');
funktioniert!
quelle
.close () ist allgemeiner und kann in Bezug auf weitere Objekte verwendet werden. .dialog ('close') kann nur mit Dialogen verwendet werden
quelle
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.
quelle
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
Ö.
quelle
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.
quelle