jQuery modal window rimuove elementi dal mio modulo

Question

jQuery, quando lo uso per creare una finestra modale che contiene i moduli, elimina quegli elementi quando invio il modulo.

esempio della 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 di JS:

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

Quindi quello che nocited durante l'inspetion via Firebug, è che jQuery in realtà rimuove i miei elementi del modulo all'interno #add_photo e li mette al di fuori del modulo in DOM, quindi anche in html la finestra di dialogo modale è nella mia forma, in DOM non lo è ....

Questo è il motivo per cui sto avendo il problema!

Qualcuno ha riscontrato un problema simile?

Qualsiasi soluzione ?! Grazie mille!

Answer 1

Ho appena avuto lo stesso problema. Ho risolto con l'aggiunta di un altro

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

alla fine (ma dentro) del modulo e poi si deve aggiungere questo per jQuery:

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

Questo farà in modo che prima che il modulo è presentare il tuo dialog div sarà rimesso tra i tag del modulo. Grazie a arnorhs sono arrivato a questa soluzione.

Cheers!

Answer 2

Il modulo deve essere all'interno del div. Ecco com'è in tutti gli esempi di Dialog. Non sei sicuro di come lo farai con gli input del titolo e dell'URL che non sono nella finestra di dialogo. Non potresti metterli anche tu?

questo non sarebbe il 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

Non sono sicuro di quello che la finestra di dialogo plugin che si sta utilizzando, ma ho il sospetto che il plugin finestra di dialogo sta tirando il DIV fuori forma e posizionandolo nel corpo della pagina, in modo che possa portare la casella davanti alla pagina, al di fuori dell'elemento del modulo.

Quindi, per riformulare, affinché il plug-in della finestra di dialogo appaia davanti a tutti i contenuti della pagina, è necessario rimuoverlo da qualunque elemento si trovi, indipendentemente dal fatto che sia un modulo o qualunque altra cosa.

Answer 4

This article descritto come risolvere il problema:

Vedrai che il contenuto che abbiamo avuto a metà strada attraverso la nostra pagina è stata segnalata con classi aggiuntive e, cosa più importante, posta nella parte inferiore della la pagina immediatamente prima del tag di chiusura. Perché questo è importante? Perché significa anche che qualsiasi controllo ASP.Net posto all'interno di questa finestra di dialogo verrà visualizzato anche nella parte inferiore della pagina, al di fuori del tag della pagina. Ciò significa che non sarai in grado di ottenere un handle per loro sul postback.

Qual è la soluzione?Beh, ci sono due opzioni:

1. Spostare gli elementi posteriori alla forma, e manualmente presentare quando il pulsante viene premuto
2. Clone gli elementi quando si crea la finestra di dialogo, quindi clonare i valori indietro, grilletto cliccare su il pulsante originale (o, se hai solo uno o due valori da postare, assegna semplicemente i valori a un controllo di campo nascosto ASP.Net).

Answer 5

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

legarlo al modulo effettuando $("mydialog").parent().appendTo($("form:first")).

Nota che si deve a questa chiamata dopo aver già chiamato $("mydialog").dialog()

Answer 6

Come si vede nella risposta per this question, dialogo jQuery ha un campo appendTo, che può essere utilizzato per configurare dove mettere il vostro dialogo (div-saggio) sull'inizializzazione.

Questa sembra la versione meno dispendiosa per risolvere il problema.