jQuery UI El diálogo se comporta de manera impredecible

Question

El diálogo de la interfaz de usuario jQuery me lleva por las paredes. Según mi entender, así es cómo funciona:

Cuando lo hace $('#myDialog').dialog({...}), copia el elemento #myDialog y lo mueve dentro de este extraño elemento del widget en la parte inferior de la etiqueta de su cuerpo. ¡Esto es Loco! Duplicará elementos DOM posiblemente únicos (con ids) cuando lo haga.

Lo que intento hacer es hacer que se comporte de manera predecible cuando actualizo el HTML del elemento original (# myDialog). Si hago esto de forma dinámica, a veces el diálogo no se abre más:

http://jsfiddle.net/t67y7/3/

O a veces el diálogo se abre con el viejo HTML (porque se almacenan en caché en la parte inferior de la página de esa manera). ¿Qué pasa con esto?

Answer 1

¿Por qué no llamas a $ ("# dialogId") de diálogo ("destruir") en función de cierre, así:.

$("#dialogId").dialog({ 
    close: function() { 
     $(this).dialog("destroy"); 
     // you may want empty content after close if you use AJAX request to get content for dialog 
     $(this).html(''); 
    } 
} 

La destruir la función eliminará el código decorado, y su el elemento de diálogo no se duplicará la próxima vez que muestre el diálogo.

He añadido un código de muestra a jsfiddle.net example.

Answer 2

Dado que nadie parece tener idea de cómo dominar este diálogo bestial, aquí está lo mejor que he encontrado hasta la fecha. Aceptaré cualquier alternativa superior.

var original = $('#dialogId')[0]; 
var clone = $(original).clone().attr('id', 'dialogIdClone'); 
var saveHtml = $(original).html(); 
$(original).html(''); 
$(clone).dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 
     $(clone).remove(); 
     $(original).html(saveHtml); 
    } 
}); 

El propósito de esta locura es mantener el HTML del diálogo original único en la página. No estoy seguro de por qué no puede ser el comportamiento integrado del diálogo ... En realidad, no entiendo por qué jQuery UI necesita clonar el HTML para empezar.

Answer 3

Sé que esto ha sido publicado por un tiempo, pero una menos extensa manera de manejar este problema sería:

$('#your-dialog').dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 

    } 
}); 
$('#your-dialog').remove(); 

Esto se debe al widget de diálogo quiere ser capaz de controlar la pantalla y se envolverá el contenido interno del diálogo original luego crea uno nuevo en la parte inferior del cuerpo.

El inconveniente de esta solución es que los diálogos deben ser los primeros en inicializarse para garantizar que todo el widget de la biblioteca de terceros funcione correctamente.

Answer 4

Debe vaciar el cuadro de diálogo antes de abrirlo.

$("#dialogId").html(''); 
$("#dialogId").dialog({ 
close: function() { 
    $(this).dialog("destroy"); 
} 
}