Cuadro de diálogo jQuery UI: no se abre después de cerrarse

Tengo un problema con jquery-ui dialog box.

El problema es que cuando cierro el cuadro de diálogo y luego hago clic en el enlace que lo activa, no vuelve a aparecer a menos que actualice la página.

¿Cómo puedo recuperar el cuadro de diálogo sin actualizar la página real?

A continuación se muestra mi código:

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

Gracias

En realidad, se supone que debes usar $("#terms").dialog({ autoOpen: false });para inicializarlo. Luego, puede usar $('#terms').dialog('open');para abrir el cuadro de diálogo y $('#terms').dialog('close');cerrarlo.

Lo resolví.

Usé la función de destruir en lugar de cerrar (no tiene ningún sentido), pero funcionó.

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

en la última línea, no use $(this).remove()use $(this).hide()en su lugar.

EDITAR: Para aclarar, en el evento de clic de cierre, está eliminando el #termsdiv del DOM, por lo que no regresa. En su lugar, solo necesitas ocultarlo.

Creo que solo puede inicializar el diálogo una vez. El ejemplo anterior intenta inicializar el cuadro de diálogo cada vez que se hace clic en #terms. Esto causará problemas. En cambio, la inicialización debe ocurrir fuera del evento de clic. Su ejemplo probablemente debería verse así:

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

Estoy pensando que una vez que lo aclare, debería solucionar el problema de 'abrir desde enlace' que describió.

Para mí, este enfoque funciona:

El cuadro de diálogo se puede cerrar haciendo clic en la X en el cuadro de diálogo o haciendo clic en 'Bewaren'. Estoy agregando una identificación (arbitraria) porque necesito asegurarme de que cada bit de html agregado al dom se elimine después.

$('<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>

Este es un hilo súper antiguo, pero como la respuesta incluso dice "No tiene ningún sentido", pensé en agregar la respuesta ...

La publicación original usó $ (this) .remove (); en el controlador cercano, esto en realidad eliminaría el div de diálogo del DOM. Intentar inicializar un diálogo nuevamente no funcionaría porque se eliminó el div.

El uso de $ (this) .dialog ('destroy') es llamar al método destroy definido en el objeto de diálogo que no lo elimina del DOM.

De la documentación:

destruir()

Elimina la funcionalidad de diálogo por completo. Esto devolverá el elemento a su >> estado previo a la inicialización. Este método no acepta argumentos.

Dicho esto, solo destruya o elimine al cerrar si tiene una buena razón para hacerlo.

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

¡trabajos!

.close () es más general y se puede usar en referencia a más objetos. .dialog ('cerrar') solo se puede usar con diálogos

Utilizo el cuadro de diálogo como un buscador y cargador de archivos de diálogo, luego reescribo el código de esta manera

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});   

todo parece funcionar muy bien.

Tuve el mismo problema con el cuadro de diálogo de superposición de jquery-ui: funcionaría solo una vez y luego se detendría a menos que vuelva a cargar la página. Encontré la respuesta en uno de sus ejemplos:
varias superposiciones en una misma página
flowplayer_tools_multiple_open_close
, ¿quién lo habría hecho, verdad? :-) -

el escenario importante parecía ser

oneInstance: false

entonces, ahora lo tengo así -

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

  }

}

y todo funciona bien

espero que esto ayude a alguien

O.

La documentación de jQuery tiene un enlace a este artículo ' Uso básico del diálogo de la interfaz de usuario de jQuery ' que explica esta situación y cómo resolverla.