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

79

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

javascript jquery jquery-ui modal-dialog jquery-ui-dialog David Bonnici
fuente

Respuestas:

110

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.

Shane Fulmer
fuente
1
Esto funciona perfectamente. Los documentos de jQuery UI no son muy claros aquí. Pero la idea de que la dialogfunción es para inicializar, mostrar y ocultar tenía sentido para mí. Gracias.
Steve Cooper
Si está cargando este cuadro de diálogo desde HTML que puede cambiar dinámicamente, es muy poco intuitivo por qué no funciona. ¿Alguien tiene alguna buena solución que pueda aplicarse genéricamente a estas situaciones?
Milimétrico
@Milimetric Siempre puede usar $ (this) .remove (); función al final de cada uno de los botones de su diálogo, de esta manera todo el diálogo se rehará completamente desde cero cuando lo vuelva a llamar. Tenga en cuenta que esta función actúa de manera diferente a $ (this) .dialog ("destroy"); ya que solo devuelve el diálogo a su estado previo al inicio, sin destruir el objeto.
Jeff Noel
14

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' });
});
David Bonnici
fuente
4
Destroy funcionará si usa ese método, pero para que close () funcione, primero cree una instancia del cuadro de diálogo, luego use dialog.show () para mostrarlo, luego dialog.close () para cerrarlo, y se volverá a abrir sin ningún problema .
RaeLehman
6
Casi. Tiene razón al iniciarlo primero, pero después es .dialog ("abrir") y .dialog ("cerrar")
rdworth
12

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.

Darko Z
fuente
9

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

26 diseño
fuente
3

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();
               }
});
Zilverdistel
fuente
3 
 <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>
Joanna Avalos
fuente
3

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.

crad
fuente
2 
$(this).dialog('destroy');

¡trabajos!

Benedikt
fuente
1

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

John
fuente
1

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.

edib
fuente
1

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.

Oleg Ivanov
fuente