Okno dialogowe jQuery UI - nie otwiera się po zamknięciu

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

Właściwie powinieneś użyć go $("#terms").dialog({ autoOpen: false });do zainicjowania. Następnie możesz użyć, $('#terms').dialog('open');aby otworzyć okno dialogowe i $('#terms').dialog('close');zamknąć je.

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

w ostatniej linii nie $(this).remove()używaj$(this).hide() zamiast tego .

EDYCJA: Aby wyjaśnić, w przypadku zamknięcia kliknięcia usuwasz element #termsdiv z DOM, dlatego nie wraca. Zamiast tego musisz to tylko ukryć.

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

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

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

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:

zniszczyć()

Całkowicie usuwa funkcję okna dialogowego. Spowoduje to przywrócenie elementu do jego >> stanu sprzed zainicjowania. Ta metoda nie przyjmuje żadnych argumentów.

To powiedziawszy, niszcz lub usuwaj tylko wtedy, gdy masz ku temu dobry powód.

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

Pracuje!

.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

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.

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.

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.