La window modal de jQuery elimina elementos de mi formulario

jQuery, cuando lo uso para crear una window modal que contiene elemets de formulario, elimina esos elementos cuando envío el formulario.

ejemplo de la forma:

<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> <label for="article_title" class="requinetworking">Title:</label> <input class="formfield" id="article_title" name="article_title" value="" type="text"> <label for="url" class="requinetworking">Url:</label> <input class="formfield" id="url" name="url" value="" type="text"> <div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo"> <label for="photo_title" class="optional">Photo title:</label> <input class="formfield" id="photo_title" name="photo_title" value="" type="text"> <label for="photot" class="optional">Photo thumb:</label> <input type="file" name="photot" id="photot" class="formfield"> <label for="photo_checkbox" class="optional">Include lighbox?</label> <input name="photo_checkbox" value="0" type="hidden"> <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> <label for="photo_big" class="optional">Photo:</label> <input type="file" name="photo_big" id="photo_big" class="formfield"> </div> </form> 

exaple de JS:

 <script> $(document).ready(function(){ $("#add_photo").dialog({ autoOpen: false, buttons: { "Ok": function() { $(this).dialog("close"); } } }); }); 

Entonces, lo que noté durante la inspección a través de Firebug es que jquery realmente elimina mis elementos de formulario dentro de #add_photo y los pone fuera del formulario en DOM, por lo que incluso en formatting html el dialog modal está dentro de mi formulario, en DOM no lo es. …

¡Y esta es la razón por la que estoy teniendo el problema!

¿Alguien ha encontrado un problema similar?

¡¿Alguna solución?! ¡Muchas gracias!

Acabo de tener el mismo problema. Lo resolví agregando otro

 <div id="beforesubmit" style="display:none"></div> 

al final (pero adentro) del formulario y luego debes agregar esto a jQuery:

 $("form").submit(function() { $("#add_photo").prependTo("#beforesubmit"); }); 

Esto se asegurará de que antes de enviar el formulario, su dialog div se vuelva a colocar entre las tags de formulario. Gracias a arnorhs llegué a esta solución.

¡Aclamaciones!

No estoy seguro de qué complemento de cuadro de dialog está usando, pero sospecho que el complemento del cuadro de dialog está sacando el DIV del formulario y colocándolo en el cuerpo de la página, para que pueda poner el cuadro al frente de la página, fuera del elemento de formulario.

Por lo tanto, para reformular, para que el complemento del cuadro de dialog haga que su cuadro de dialog aparezca delante de todo el contenido de su página, debe eliminarlo de cualquier elemento en el que esté, sin importar si se trata de una forma o cualquier otra cosa.

La forma debe estar dentro de div. Así es en todos los ejemplos de Dialog. No estoy seguro de cómo va a hacer eso con las inputs de título y url que no están en el dialog. ¿No podrías ponerlos también?

Esto no tendría el problema:

 <div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo"> <form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> <label for="article_title" class="requinetworking">Title:</label> <input class="formfield" id="article_title" name="article_title" value="" type="text"> <label for="url" class="requinetworking">Url:</label> <input class="formfield" id="url" name="url" value="" type="text"> <label for="photo_title" class="optional">Photo title:</label> <input class="formfield" id="photo_title" name="photo_title" value="" type="text"> <label for="photot" class="optional">Photo thumb:</label> <input type="file" name="photot" id="photot" class="formfield"> <label for="photo_checkbox" class="optional">Include lighbox?</label> <input name="photo_checkbox" value="0" type="hidden"> <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> <label for="photo_big" class="optional">Photo:</label> <input type="file" name="photo_big" id="photo_big" class="formfield"> </form> </div> 

Este artículo describe cómo resolver su problema:

Verá que el contenido que teníamos a mitad de path en nuestra página se marcó con classs adicionales y, lo más importante, se colocó en la parte inferior de la página inmediatamente antes de la label de cierre. ¿Porque es esto importante? Porque también significa que cualquier control ASP.Net que coloque dentro de este cuadro de dialog también aparecerá en la parte inferior de la página, fuera de la label de la página. Esto significa que no podrá get un control para ellos en la devolución de datos.

¿Cual es la solución? Bueno, hay dos opciones:

  1. Mueva los elementos de vuelta al formulario y envíe manualmente cuando se click el button
  2. Clone los elementos cuando crea el dialog, luego clone los valores, click el button original (o, si solo tiene uno o dos valores para publicar, simplemente asigne los valores a un control de campo oculto de ASP.Net).

Como se ve en la respuesta a esta pregunta , el cuadro de dialog de jQuery tiene un campo appendTo , que se puede utilizar para configurar dónde colocar su dialog (div-wise) en la initialization.

Esta parece ser la versión less ninja para solucionar el problema.

Desde http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/

$("mydialog").parent().appendTo($("form:first")) en el formulario haciendo $("mydialog").parent().appendTo($("form:first")) .

Tenga en count que debe hacer esta llamada después de que ya haya llamado a $("mydialog").dialog()