UI Dialog. Formulaire et traitement des données dans un dialogue

Version imprimable

17/05/2010, 15h09
bellouk

UI Dialog. Formulaire et traitement des données dans un dialogue

Bonjour,

je souhaiterais ouvrir un formulaire dans un "dialog", comme dans la démo de jQuery UI modal form http://jqueryui.com/demos/dialog/#modal-form, mais je voudrais traiter les informations (ajout dans une bdd) à la place de les entrer dans un tableau. Je n'arrive pas à trouver d'exemple de ce genre de formulaire, si vous pouviez m'indiquer où je peux trouver un exemple de ce type ou m'en concocter un petit... =)
Merci d'avance,

Luca.

Si t'as arrivé à afficher le formulaire dans le dialogue, c'est déjà pas mal. Pense à envoyer tes données avec ajax.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('element_selectionne').dialog({
  ...........,
  buttons: [
         'Ajouter' : function(){
                 $.ajax({
                      url: .....,
                      data: ........,
                      type: 'POST', .....
                 });
}
],
});

Ok pour la fonction ajax, j'ai réussi à afficher le formulaire, mais je ne suis pas vraiment convaincu du résultat, les selectbox sont très rapprochées, la checkbox est centrée et n'est pas sur la même ligne que son label...

Est-ce qu'il y a un endroit ou je pourrais voir à quoi ressemble un formulaire jQuery UI ou un exemple, ça fait quand même un bon moment que je cherche et je trouve vraiment rien de rien.

Une dernière chose : mon code est le suivant, je ne l'ai pas encore testé mais j'aimerai savoir si le résultat final doit ressembler plus ou moins à ça.

Merci.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<div class="test">
 
 
	<div id="dialog-form" title="Ajouter une tache">
		<form>
		<fieldset>
			<label for="libelle">Libelle</label>
			<input type="text" name="libelle" id="libelle" class="text ui-widget-content ui-corner-all" />
 
			<label for="Type">Type de RDV</label>
			<select name="type" id="type" class="text ui-widget-content ui-corner-all" />
				<option value="Entretien">Entretien</option>
				<option value="Dépannage">Dépannage</option>
				<option value="Congés">Congés</option>
			</select>
 
			<label for="employe">Employe</label>
			<select name="id_empl" id="id_empl" class="selectbox ui-widget-content ui-corner-all" />
				<option value="Entretien">Entretien</option>
				<option value="Dépannage">Dépannage</option>
				<option value="Congés">Congés</option>
			</select>
 
			<label for="date">Date</label>
			<input type="text" name="date" id="date" class="text datepicker ui-widget-content ui-corner-all" />
 
 
			<label for="client">Client</label>
			<input type="text" name="client" id="client" class="text ui-widget-content ui-corner-all" />	
 
			<label for="camion">Réservation Camion</label>
			<input type="checkbox" name="camion" id="camion" class="text ui-widget-content ui-corner-all" />
 
			<label for="commentaire">Commentaire</label>
			<textarea name="commentaire" cols="30" rows="5" class="text ui-widget-content ui-corner-all"></textarea>
		</fieldset>
		</form>
	</div>
 
	<button id="create-user">Ajouter une tache</button>
 
</div>

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$(function() {
		$("#dialog").dialog("destroy");
 
		var libelle = $("#libelle"),
			type = $("#type"),
			employe = $("#employe"),
			date = $("#date"),
			client = $("#client"),
			camion = $("#camion"),
			commentaire = $("#commentaire"),
			allFields = $([]).add(libelle).add(type).add(employe).add(date).add(client).add(camion).add(commentaire);
 
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 450,
			width: 250,
			modal: false,
			buttons: {
				'Ajouter une tache': function() {
					$(".ajax").submit( function(e) {
						var datas = $(this).serialize();          
						$.ajax({
							type: 'POST',      // envoi des données en POST
							url: traitement.php,    
							data: datas,     // sélection des champs à envoyer
							success: function(data) {  
								// callback en cas de succès
 
								//affiche un message de succès
							}
						});
					});
					$(this).dialog('close');
				},
				Retour: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
 
 
 
		$('#create-user')
			.button()
			.click(function() {
				$('#dialog-form').dialog('open');
			});
 
	});

Pour la mise en forme, essaie avec une largeur 'width' plus importante.

Pour le script, j'ai une remarque :

Mets cette partie à part

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".ajax").submit( function(e) {
						var datas = $(this).serialize();          
						$.ajax({
							type: 'POST',      // envoi des données en POST
							url: traitement.php,    
							data: datas,     // sélection des champs à envoyer
							success: function(data) {  
								// callback en cas de succès
 
								//affiche un message de succès
							}
						});
                                        return false; // Pour empêcher le submit vers la page 'action'
					});

Et pour le bouton ajouter tu mets

Code:

$(".ajax").trigger('submit');

Reste à signaler que la fermeture du dialogue doit se faire normalement au niveau du success

Suite à la précieuse aide de php.dev, j'obtiens ce que je cherche. Merci à lui.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(function() {
	$("#dialog").dialog("destroy");
 
	var libelle = $("#libelle"),
		type = $("#type"),
		employe = $("#employe"),
		date = $("#date"),
		client = $("#client"),
		camion = $("#camion"),
		commentaire = $("#commentaire"),
		allFields = $([]).add(libelle).add(type).add(employe).add(date).add(client).add(camion).add(commentaire);
 
	$("#dialog-form").dialog({
		autoOpen: false,
		height: 450,
		width: 300,
		modal: false,
		buttons: {
			'Ajouter une tache': function() {
				$(".ajax").trigger('submit');
			},
			Retour: function() {
				$("#dialog-form").dialog('close');
			}
		},
		close: function() {
			allFields.val('').removeClass('ui-state-error');
		}
	});
 
	$(".ajax").submit(
		function(e) {
		var datas = $(this).serialize();          
		$.ajax({
			type: 'POST',      // envoi des données en POST
			url: 'test2.php',    
			data: datas,     // sélection des champs à envoyer
			success: function() { 
				$("#dialog-form").dialog('close');
				alert('gagne');
			}
		});
		return false; // Pour empêcher le submit vers la page 'action'
	});
 
 
	$('#create-user')
		.button()
		.click(function() {
		$('#client').val('Hello!!!!!!!!!!!!!!!');
		$('#dialog-form').dialog('open');
	});
});

et l'ajout de la classe ajax au formulaire

Code:

<form class="ajax">

04/06/2013, 14h38
alvine18

j'aimerais savoir s'il vous plais comment intégrer le css par exemple sur les boutons comme retour , ou sur la boite de dialogue