jQuery fenêtre modale supprime des éléments de mon formulaire

Question

jQuery, lorsque je l'utilise pour créer une fenêtre modale qui contient des éléments de forme, il supprime ces éléments lorsque je soumets le formulaire.

exemple de la forme:

<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"); 
      } 
     } 
    }); 
}); 

Alors ce que je nocited pendant la Inspetion via Firebug, est que jquery supprime effectivement mes éléments de formulaire dans #add_photo et les met en dehors de la forme dans DOM, donc même difficile en html le dialogue modal est dans ma forme, dans DOM ce n'est pas ....

C'est la raison pour laquelle j'ai un problème!

Quelqu'un at-il rencontré un problème simmilar?

Une solution ?! Merci beaucoup!

Answer 1

J'ai juste eu le même problème. Je l'ai résolu en ajoutant un autre

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

à la fin (mais à l'intérieur) de la forme et vous devez ajouter à jQuery:

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

Cela fera en sorte que avant que le formulaire est soumis votre div de dialogue sera remis entre les balises de formulaire. Merci à arnorhs Je suis venu à cette solution.

À la votre!

Answer 2

Le formulaire doit être à l'intérieur du div. C'est comme ça dans tous les exemples de Dialog. Je ne sais pas comment vous allez faire cela avec le titre et les entrées d'url ne pas être sur la boîte de dialogue. Ne pourriez-vous pas les mettre aussi?

Ce ne serait pas le problème:

<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

Je ne suis pas sûr de ce que la boîte de dialogue plugin vous utilisez, mais je soupçonne que le plug-in de la boîte de dialogue tire la DIV de la forme et en le plaçant dans le corps de la page, de sorte qu'il peut apporter la boîte en face de la page, en dehors de l'élément de formulaire. Donc pour reformuler, pour que le dialogue de boîte de dialogue fasse apparaître votre boîte de dialogue devant tout le contenu de votre page, il faut l'enlever de l'élément dans lequel il est assis, qu'il s'agisse d'un formulaire ou rien d'autre.

Answer 4

This article décrit comment résoudre votre problème:

Vous verrez que le contenu que nous avons eu à mi-chemin à travers notre page a été marquée avec des classes supplémentaires et, surtout, placé au fond de la page immédiatement avant la balise de fermeture. Pourquoi est-ce important? Parce que cela signifie également que tous les contrôles ASP.Net que vous placez dans cette boîte de dialogue apparaîtront également au bas de la page, en dehors de l'étiquette de la page. Cela signifie que vous ne serez pas en mesure d'obtenir un traitement à leur publication.

Quelle est la solution?Eh bien, il y a deux options:

1. Déplacer les éléments de retour à la forme, et soumettre manuellement lorsque le bouton est cliqué
2. Clone les éléments lorsque vous créez la boîte de dialogue, puis cloner les valeurs de retour, déclencheur cliquez sur le bouton d'origine (ou, si vous n'avez qu'une ou deux valeurs à afficher, attribuez simplement les valeurs à un contrôle de champ masqué ASP.Net).

Answer 5

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

Tie à la forme en faisant $("mydialog").parent().appendTo($("form:first")).

Notez que vous avez à cet appel après que vous avez déjà appelé $("mydialog").dialog()

Answer 6

Comme on le voit dans la réponse pour this question, dialogue jQuery a un champ appendTo, qui peut être utilisé pour configurer où mettre votre boîte de dialogue (div-sage) à l'initialisation.

Cela semble être la version la moins ninja-solution de contournement pour résoudre le problème.