Discussion :

[Invité]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Blowdi]

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

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

[danielhagnoul]

Bonsoir.

Je vois une erreur, pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

Une autre erreur ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[charlux 64]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Invité]

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

[citronbleu-v]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
	$("#form-edit .test").dialog({
		dialogClass: 'test-dialog',
	        create: function() {
			$("#form-edit").append($(".test-dialog"));
		}
	});

[xamage]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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