jQuery UI Cómo abrir un diálogo, anexe a un div no el cuerpo

Question

estoy usando este sencillo ejemplo de diálogo modal aquí: http://jqueryui.com/demos/dialog/modal-form.html

Cuando se carga la página, jQuery elimina div del diálogo desde el DOM. Cuando se hace clic en el botón para abrir el diálogo, jQuery agrega el div del diálogo al final del elemento del cuerpo.

Quiero adjuntarlo a cierto div, no al cuerpo. La razón es que tengo un formulario grande en la página, y en el cuadro de diálogo hay una sola entrada de archivo (sin forma separada). Quiero mantener mi entrada de archivo en el cuadro de diálogo, en la misma forma que el resto de los campos en la página (que no están en el cuadro de diálogo).

¿Es posible agregar el diálogo a un div o elemento dado?

Answer 1

Acabo de abordar esto ayer mismo. La forma en que lo resolví fue insertar un div vacío en la parte inferior del formulario (<div id="bottomOfForm"></div>) y luego, al cerrar el diálogo, mover su contenido a ese div. En mi caso, el código fue algo como esto:

 // Setup up dialogue box that contains some form fields:  
     $j("#myDialogue").dialog({ 
      autoOpen: false, 
      height: 300, 
      width: 350, 
      modal: true, 
      buttons: { 
       "Submit": function() { 
        // Move to main form so fields get included: 
        $j(this).parent().prependTo($j("#bottomOfForm")); 
        // Submit the main form: 
        $j('#mainForm').submit(); 
       }, 
       Cancel: function() { 
        $j(this).dialog("close"); 
       } 
      } 
     }); 

Answer 2

Tales ModalDialogs están diseñados para no interferir en el DOM existente, por lo que solo se anexan en el body en lugar de configurar dónde agregarlos.

Para su uso específico, sugiero encontrar el form inputs de Dialog cuando esté cerrado, clonarlos y anexarlos a su formulario. Es posible que desee convertir type=text en type=hidden cuando los inserta en su formulario. De esta forma, puede obtener los datos enviados con el envío normal de formularios.

Happy Coding.

Answer 3

Es un hilo viejo, pero en caso de que alguien (como yo) se encuentra con ella en el futuro, creo que vale la pena señalar que a partir de 1.10.0 en jQuery interfaz de usuario ofrece la opción appendTo:

$("#myDialogue").dialog({ 
    appendTo: "#DesiredDivID" 
}); 

link to API docs