jQuery UI cuadro de diálogo - no se abre después de ser cerrado

Question

Tengo un problema con el jquery-ui dialog box.

El problema es que cuando cierro el cuadro de diálogo y luego hago clic en el enlace que lo desencadena, 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 actual?

A continuación es 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

Answer 1

Hola chicos logré resolverlo.

Utilicé destroy en lugar de cerrar la función (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' }); 
}); 

Answer 2

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

EDITAR: Para aclarar, en el evento click cerrar está eliminando el #terms div del DOM, por lo que no regresa. Solo necesitas esconderlo.

Answer 3

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

obras!

Answer 4

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'); para cerrarlo.

Answer 5

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

$(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 aclarar eso, se debe solucionar el problema 'abierto de enlace' que usted describe.

Answer 6

.close() es más general y se puede utilizar en referencia a más objetos. .dialog ('cerca') sólo puede ser utilizado con diálogos

Answer 7

La documentación de jQuery tiene un enlace a este artículo 'Basic usage of the jQuery UI dialog' que explica esta situación y cómo resolverlo.

Answer 8

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 'bewaren'. Estoy agregando un ID (arbitrario) porque necesito estar seguro de que cada bit de html agregado al dom se eliminará 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(); 
       } 
}); 

Answer 9

que utilizar el diálogo como un explorador de archivos de diálogo y cargador luego volver a escribir el código como este

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

todo parece funcionar muy bien.

Answer 10

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

el ajuste importante parecía ser

oneInstance: false 

es así, ahora lo tengo como este -

$(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 muy bien esperanza

esto ayuda a alguien

O.

Answer 11

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

Answer 12

Este es un hilo muy antiguo, pero ya que la respuesta llega a decir "No tiene ningún sentido", pensé que me gustaría añadir la respuesta ...

El post original utiliza $ (this) .retirar(); en el controlador cercano, esto realmente eliminaría el diálogo div del DOM. Intentar inicializar un diálogo nuevamente no funcionaría porque se eliminó el div.

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

De la documentación:

destroy()

Elimina la funcionalidad de diálogo completo. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta ningún argumento.

Dicho esto, solamente destruir o eliminar en una estrecha si tiene una buena razón para hacerlo.