jQuery UI Dialog et formulaire

Salut,
je développe un formulaire un peu complexe, et donc par souci de clarté je voudrais déporter certains champ sur une fenêtre Dialog de jQuery.
Ma DIV est bien dans le formulaire, mais le code généré me déplace toute la div en dehors, tout en bas de ma page. Ainsi, lorsque le formulaire est validé, les champs ne sont pas pris en compte.

Je ne pense pas qu'il s'agisse d'un fonctionnement normal, mais je ne vois pas ce que je fais de spécial. Voici le code concerné :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$('#addPieceJointe').click(function() { $('#piecesjointesDialog').dialog('open'); return false; })   $("#piecesjointesDialog").dialog({ width: 320, maxWidth: 320, minWidth: 320, modal: true });

---

Code:

---

1 2 3 4 5 6 7 8 9

<div id="piecesjointesDialog" title="<bean:message key="demande.piecesjointes" />"> <ul id="piecesjointes"></ul> <div id="add_piecesjointes"><a href="#" onclick="addAttachment();"><html:img src="image/add.png"/><bean:message key="demande.ajouterpiecejointe" /></a></div> <p><bean:message key="demande.piecesjointes.maxsize" /></p> <p><input type="button" class="submit" onclick="$('#piecesjointesDialog').dialog('close');" value="<bean:message key="general.ok" />" /></p> </div>   <div class="icon" style="float:right;"><p><a href="#" id="addPieceJointe"><html:img src="image/pieces_jointes.png"/></p><p><bean:message key="demande.piecesjointes" /></p></a></div>

---

Bonjour,

Pour ce qui est des boutons sous JQuery UI, vas voir du côté de l'option "buttons" où tu définis tes boutons ainsi que les fonctions à exécuter au click.
Tu passes ensuite tes options au moment du

Citation:

---

"$("#maDiv").dialog(options)"

---

Bonsoir.

Je vois une erreur, pas :

Code:

---

1 2	<div id="piecesjointesDialog" title="<bean:message key="demande.piecesjointes" />">

---

mais :

Code:

---

1 2	<div id="piecesjointesDialog" title="<bean:message key='demande.piecesjointes' />">

---

Une autre erreur ici :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div class="icon" style="float:right;"> <p> <a href="#" id="addPieceJointe"> <html:img src="image/pieces_jointes.png"/> </p> <p> <bean:message key="demande.piecesjointes" /> </p> </a> </div>

---

Salut
Le pb est que jquery.dialog remanie le dom de ta page.
Une fois que la boite de dialogue est créée, celle-ci n'est plus entre les balises du form.
J'ai résolu ce pb en réinsérant en dhtml, le div dans le form avant le submit :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

$("#divOptionsAvancees").dialog({ height: 500, width: 340, autoOpen: false, modal: true, overlay: { opacity: 0.5, background: "black" }, buttons: { 'Valider': function() {   var node = document.getElementById("divOptionsAvancees"); document.formSyntheseMarches.appendChild(node); $(this).dialog('close'); $("form[name='myForm']").submit();   }, 'Annuler': function() { $(this).dialog('close'); } } });

---

Si qqun a une solution un poil plus élégante, je suis preneur.

Effectivement ce n'est pas très propre, mais je ne vois pas d'autre solution pour l'instant... Merci charlux 64 ;-)

En reprenant ton idée, je fais le déplacement au moment de la création.
Cependant je déplace le dialogue complet (dialogClass). C'est plus pratique.
Il y a qu'un truc qui fonctionne mal avec cette astuce c'est lorsque modal est actif (il passe devant le dialog car le zIndex est plus fort).

Code:

---

1 2 3 4 5 6 7

$("#form-edit .test").dialog({ dialogClass: 'test-dialog', create: function() { $("#form-edit").append($(".test-dialog")); } });

---

J'apporte une petite correction qui fonctionne mieux (je trouve) :

Code:

---

1 2 3 4 5 6 7 8 9 10

$("#delayReasonPanel").dialog({ autoOpen: false, modal: true, width: 400, resizable: false, create: function () { $("#delayReasonPanel").parent().appendTo($("#missionForm")); } });

---