jQuery ventana modal elimina elementos de mi formulario

Question

jQuery, cuando lo uso para crear una ventana modal que contiene formularios elemets, elimina esos elementos cuando presento el formulario.

ejemplo de la forma:

<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> 

    <label for="article_title" class="required">Title:</label> 

    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">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"); 
      } 
     } 
    }); 
}); 

Así que lo que nocited durante la inspección más a través de Firebug, es que jQuery en realidad elimina mis elementos de formulario dentro de #add_photo y los pone fuera del formulario en DOM, por lo que incluso en formato html, el diálogo modal está dentro de mi formulario, en DOM no es ...

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

¿Alguien ha encontrado el problema similar?

¿Alguna solución ?! ¡Muchas gracias!

Answer 1

Acabo de tener el mismo problema. Lo resuelto por la adición de otro

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

al final (pero por dentro) de la forma y luego hay que añadir esto a jQuery:

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

Esto se asegurará de que antes de que la forma es presentar su diálogo div se colocará de nuevo entre las etiquetas de formulario. Gracias a arnorhs llegué a esta solución.

¡Salud!

Answer 2

El formulario debe estar dentro del div. Así es en todos los ejemplos de Dialog. No estoy seguro de cómo va a hacer eso con las entradas de título y url que no están en el diálogo. ¿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="required">Title:</label> 
    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">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> 

Answer 3

No estoy seguro de qué cuadro de diálogo plugin que está utilizando, pero yo sospecharía que el plugin cuadro de diálogo está tirando del DIV a cabo de la forma y colocarlo en el cuerpo de la página, por lo que puede traer la caja al frente de la página, fuera del elemento de formulario.

Por lo tanto, para reformular, para que el complemento del cuadro de diálogo haga que su cuadro de diálogo aparezca delante de todo el contenido de su página, debe eliminarlo del elemento en el que esté, sin importar si se trata de un formulario o Algo más.

Answer 4

This article se explica cómo solucionar su problema:

Usted verá que el contenido tuvimos vías mediados a través de nuestra página ha sido marcado con clases adicionales y, sobre todo, colocado en la parte inferior de la página inmediatamente antes de la etiqueta de cierre. ¿Porque es esto importante? Porque también significa que cualquier control ASP.Net que coloque dentro de este cuadro de diálogo también aparecerá en la parte inferior de la página, fuera de la etiqueta de la página. Esto significa que no podrá obtener un control para ellos en la devolución de datos.

¿Cuál es la solución?Bueno, hay dos opciones:

1. mover los elementos de nuevo a la forma, y ​​de forma manual presentar cuando se hace clic en el botón
2. Clon los elementos al crear el cuadro de diálogo, a continuación, clonar los valores de nuevo, el gatillo haga clic en el botón original (o, si solo tiene uno o dos valores para publicar, simplemente asigne los valores a un control de campo oculto ASP.Net).

Answer 5

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

lazo al formulario haciendo $("mydialog").parent().appendTo($("form:first")).

Tenga en cuenta que usted tiene que esta llamada después de que ya ha llamado $("mydialog").dialog()

Answer 6

Como se ve en la respuesta para this question, de diálogo jQuery tiene un campo appendTo, que se puede utilizar para configurar dónde colocar su diálogo (div-sabia) en la inicialización.

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