El uso del diálogo de jQuery UI ("destroy") pone el elemento en el lugar incorrecto?

Tengo una forma grande con muchas partes. Para cada parte, quiero agregar un pequeño botón "Popup as Dialog" que convertirá esa parte a un diálogo bajo demanda, y luego (al cerrar el diálogo) volver al formulario con las nuevas entradas.El uso del diálogo de jQuery UI ("destroy") pone el elemento en el lugar incorrecto?

Estoy usando la función dialog() de jQuery UI. Las partes emergentes funcionan bien: la subformulario se convierte en un cuadro de diálogo. Sin embargo, cuando diálogo ("destruir") la sub-forma, el elemento aparece de nuevo, pero al final del documento DOM en lugar de la ubicación original.

¿Es esta una "característica" de diálogo()? ¿Algo que hacer al respecto? ¿Hay una manera mejor de hacer esto sin usar el diálogo()?

Fuente

2009-11-18 Sleepster

Sí , esa es una 'característica' ... jaja ... me encontré con eso hace un tiempo. Aquí están algunos '' y luego gotchyas una manera realmente hackity de tratar con ellos (aunque eficaz si está planeando tener muchos subformularios):

Cuando se crea un cuadro de diálogo, jQuery lo recuerda, y lo almacena en un div separado, nunca lo vuelve a colocar (sí, la documentación se basa en el sentido de que el elemento nunca vuelve a estar donde estaba)
Mi experiencia ha sido que si te metes con los elementos ocultos demasiado después de eso, podría romper la funcionalidad de diálogo futuro. Es mejor simplemente crear un nuevo cuadro de diálogo a partir de nuevos contenidos (especialmente si su aplicación tiene muchos de estos ... codificar cada subformulario a mano se volverá tedioso muy rápidamente).
Si no se puede volver a utilizar los divs, que tendrá que clonar ellos & cambiar el nombre de ellos (que es lo que hago a continuación)

Al cerrar el cuadro de diálogo, el siguiente fragmento de código 'clones' el contenido del el diálogo, cambia el nombre de su atributo id, luego agrega los contenidos modificados a un 'sub_form_container', generando un nuevo diálogo/formulario cada vez que un usuario cierra el diálogo. ¡Espero que esto ayude!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <link type="text/css" href="ui.css" rel="stylesheet" /> 
    <script type="text/javascript" src="j.js"></script> 
    <script type="text/javascript" src='ui.js'></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
       newDialogs(2); 
    });  
    function newDialogs(idCounter) { 
     $('#d1').unbind().bind('click', function() { 
     $('#d'+ idCounter.toString()).dialog({close: function(event, ui){ 
      var newSubForm = $('#d'+idCounter.toString()).clone(); 
       idCounter += 1; 
       newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', ''); 
      $('#sub_form_container').append(newSubForm); 
      newDialogs(idCounter); 
      $('ui-dialog').remove() 
      } 
     }); 
     }); 
    } 

    </script> 

</head> 
    <body> 
    <h1>Element above</h1> 
    <div> 
     <div id='d1'>Activate dialog</div> 
     <div id='sub_form_container'> 
     <div id='d2'>Dialog content <input type='text' /></div> 
     </div> 
    </div> 
    <h1>Element below</h1> 
    </body> 
</html>

Fuente

2009-11-18 03:45:15 btelles

tal vez añadir algo de código cosa que es difícil saber dónde/por qué su código puede fallar

Se podía hacerlo así o similares

<input id="text" name="textname" type="text"> 
<input 
    type="button" 
    value="Pop me up" 
    onclick="$('#text').clone().dialog({ 
    modal:true, 
    close: function(event, ui) { 
     $('#text').val(this.value); 
    } 
    });" 
>

Compruebe si hay una muestra http://jsbin.com/ujema/

Fuente

2009-11-18 02:39:35 jitter

Esto funcionó para mí:

clonar el diálogo
inicializar el diálogo clonado (por lo que las estancias originales de la página)
Retire el diálogo clonado cuando he terminado con que

ejemplo de código:

$('a.popup-modal').click(function(e){ 
    var $modal = $(this).closest('form').find('.modal').clone(); 
    $modal.dialog({ 
     autoOpen: true, 
     close: function(event, ui){ 
      $(this).remove(); 
     } 
    }); 
});

Fuente

2011-08-09 21:54:54 Andrew

Esto es increíble. Es más fácil que el enfoque de la respuesta aceptada. Esta es una "característica" horrible, realmente deberían arreglar esta mierda. – Milimetric

Muy efectivo. Solo asegúrate de no cerrar 'div's con' id's. – geowa4

¿Cómo lidiarías con modales con identificadores? Todo funciona a menos que lo cierre sin activar la duplicación. – Mikhail

El uso del diálogo de jQuery UI ("destroy") pone el elemento en el lugar incorrecto?

Respuesta

Cuestiones relacionadas