Jquery Dialog - campos de diálogo agregados varias veces al DOM

Question

Estoy usando la interfaz de usuario de Jquery para mostrar pestañas. En una de las pestañas, tengo un cuadro de diálogo. Si navego a esa pestaña, abro el cuadro de diálogo, lo cierro, salgo de la pestaña y luego de nuevo hacia atrás y abro el cuadro de diálogo, termino con múltiples elementos HTML duplicados en el DOM.

En otras palabras ...

Tengo mi configuración principal de la página con pestañas:

<div id="groupTabs" style="width:600px; height:600px; display:none"> 
    <ul> 
     <li><a href="tab1.aspx"><span>Info</span></a></li> 
     <li><a href="tab2.aspx"><span>Associations</span></a></li> 
    </ul> 
</div> 

Tab # 2 contiene un cuadro de diálogo:

<div id="dgEvent"> 
    <input id="someId"> 
</div> 

... 

$("#dgEvent").dialog(); 

tengo descubrí que si abro el cuadro de diálogo, me desplazo (a otra pestaña) y viceversa, la próxima vez que abra el cuadro de diálogo terminaré con elementos duplicados denominados "alguna Id" en mi DOM. Esto causa problemas porque cuando trato de tomar el valor de algún ID (es decir, $ ("# alguna ID"). Val(), termino obteniendo el valor de la primera instancia del cuadro de diálogo.)

¿Hay algún problema? ¿Se corrige para asegurarse de que los campos se eliminan cuando se cierra el cuadro de diálogo? ¿O mejor aún, que se eliminan correctamente al navegar a otra pestaña?

EDITAR

Al final, creo que el problema está relacionado con el uso de aquí y de diálogo juntos. Cualquier campo que tengo en el formulario que está fuera del diálogo se elimina del DOM cuando navego fuera de la pestaña. Sin embargo, todo lo que estaba en el diálogo permanece en el DOM después de que me alejo. Por lo tanto, cuando navego hacia atrás, termino con duplicados.

Answer 1

En lugar de $("#dgEvent").dialog();, intente crear el diálogo de forma que no se auto-abierta, a continuación, utilizar abren y cierran para mostrar/ocultar el diálogo:

$("#dgEvent").dialog({ autoOpen: false }); 
$("#dgEvent").dialog('open'); 
$("#dgEvent").dialog('close'); 

Vea la sección de visión general del jQuery UI Dialog page, que referencias this blog post.

Answer 2

Tuve una experiencia similar.
Mi problema fue causado por tener una ventana emergente <div> dentro de updatepanel.
Después de una llamada ajax, se crea un nuevo duplicado.
Para resolver este problema, simplemente evite colocar la ventana emergente <div> dentro de updatepanel.
En su lugar, ponga updatepanel dentro de la ventana emergente <div>.
Espero que ayude.

Answer 3

Parece que el diálogo está siendo clonado por jQuery UI y se coloca al final de la DOM, antes de cerrar el cuadro de diálogo tratar de sacarlo del DOM

$("#dgEvent").remove(); 

que debe solucionar el problema.

Answer 4

Uso

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

Destruye el cuadro de diálogo y luego quitar el div con sus hijos desde el DOM con remove().

Atentamente.