Mam problem z jquery-ui dialog box
.
Problem polega na tym, że kiedy zamykam okno dialogowe, a następnie klikam łącze, które je uruchamia, nie wyskakuje ono ponownie, chyba że odświeży stronę.
Jak mogę ponownie wywołać okno dialogowe bez odświeżania aktualnej strony.
Poniżej mój kod:
$(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(); },
});
});
Dzięki
javascript
jquery
jquery-ui
modal-dialog
jquery-ui-dialog
David Bonnici
źródło
źródło
dialog
funkcja służy do inicjalizacji, pokazywania i ukrywania, miał dla mnie sens. Dzięki.Rozwiązałem to.
Użyłem funkcji Destroy zamiast Close (nie ma to sensu), ale zadziałało.
$(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' }); });
źródło
w ostatniej linii nie
$(this).remove()
używaj$(this).hide()
zamiast tego .EDYCJA: Aby wyjaśnić, w przypadku zamknięcia kliknięcia usuwasz element
#terms
div z DOM, dlatego nie wraca. Zamiast tego musisz to tylko ukryć.źródło
Uważam, że okno dialogowe można zainicjować tylko raz. W powyższym przykładzie próbowano zainicjować okno dialogowe za każdym razem, gdy kliknięto #terms. Spowoduje to problemy. Zamiast tego inicjalizacja powinna mieć miejsce poza zdarzeniem kliknięcia. Twój przykład powinien wyglądać mniej więcej tak:
$(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' }); });
Myślę, że kiedy już to wyjaśnisz, powinno rozwiązać opisany przez ciebie problem „otwórz z linku”.
źródło
U mnie to podejście działa:
Okno dialogowe można zamknąć, klikając X w oknie dialogowym lub klikając „Bewaren”. Dodaję (dowolny) identyfikator, ponieważ muszę mieć pewność, że każdy fragment kodu HTML dodany do domeny zostanie później usunięty.
$('<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(); } });
źródło
<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>
źródło
To jest bardzo stary wątek, ale ponieważ odpowiedź mówi nawet „To nie ma sensu”, pomyślałem, że dodam odpowiedź ...
Oryginalny post używał $ (this) .remove (); w module obsługi zamykania faktycznie usuwałoby to okno dialogowe div z DOM. Próba ponownego zainicjowania okna nie zadziała, ponieważ element div został usunięty.
Użycie $ (this) .dialog ('zniszcz') jest wywołaniem metody zniszcz zdefiniowanej w obiekcie dialogu, która nie usuwa go z DOM.
Z dokumentacji:
To powiedziawszy, niszcz lub usuwaj tylko wtedy, gdy masz ku temu dobry powód.
źródło
$(this).dialog('destroy');
Pracuje!
źródło
.close () jest bardziej ogólne i może być używane w odniesieniu do większej liczby obiektów. .dialog ('close') może być używane tylko z oknami dialogowymi
źródło
Używam okna dialogowego jako przeglądarki plików dialogowych i programu do przesyłania, a następnie przepisuję kod w ten sposób
var dialog1 = $("#dialog").dialog({ autoOpen: false, height: 480, width: 640 }); $('#tikla').click(function() { dialog1.load('./browser.php').dialog('open'); });
wszystko wydaje się działać świetnie.
źródło
Miałem ten sam problem z oknem dialogowym nakładki jquery-ui - działało ono tylko raz, a następnie zatrzymywało się, chyba że ponownie załadowałem stronę. Znalazłem odpowiedź w jednym z ich przykładów -
Wiele nakładek na tej samej stronie
flowplayer_tools_multiple_open_close
- kto by to zrobił, prawda? :-) -
wydawało się, że ważne miejsce jest
oneInstance: false
więc teraz mam to tak -
$(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); } }); } }
i wszystko działa dobrze
mam nadzieję, że to komuś pomoże
O.
źródło
Dokumentacja jQuery zawiera łącze do tego artykułu „ Podstawowe użycie okna dialogowego interfejsu użytkownika jQuery ”, który wyjaśnia tę sytuację i sposoby jej rozwiązania.
źródło