[AJAX] Le point sur AJAX (jQuery) & les formulaires

Version imprimable

11/05/2012, 09h54
Hugo_O

[AJAX] Le point sur AJAX (jQuery) & les formulaires

Bonjour !

Depuis quelques semaines je travaille sur le développement d'un site Web.

Parmi les utilisation que l'on peut en faire, il y a de nombreux types de formulaires à remplir.

Etant donné que l'interface graphique est assez simple (exemple : mon menu de navigation a gauche et mon footer sont strictement les mêmes quelques soient les actions de l'utilisateur), vous comprendrez qu'utiliser Ajax & jQuery pour éviter des rechargements de toute la page m'intéressent fortement !

Le seul soucis, c'est que, malgré les nombreux exemples qui pullulent sur le Web, j'ai du mal à saisir la bonne méthode.

Pour le moment, mon site fonctionne de manière triviale : Un menu, des liens derrières lesquels se cachent des actions (php), et des if + GET pour charger le bon contenu en fonction de l'action (mes phrases commencent à être longues :aie: )

Ce que j'aimerais faire (comprendre surtout) c'est la chose suivante :

Pour chaque formulaire, je voudrais, à l'envoi, rafrîchir uniquement la div contenant le formulaire.

-> Le soucis : entre les xhr et les $.ajax, je me perds ! (si j'ai bien compris, $.ajax c'est du jQuery et c'est ce que j'aimerais faire !)

Je suis aussi confronté à un petit problème de conceptualisation : Actuellement, ma page contient à la fois les formulaires html mais aussi tous les scripts PHP qui font appels à ma base...

Alors que, si j'ai bien compris, pour chaque formulaire je dois créer un nouveau script.js ainsi qu'un script.php ?

je suis contraint à faire cela pour chaque formulaire ?

De plus, comment faire appel proprement au bon script javascript (qui ne sont pas déclarés dans ma page web mais dans un dossier a côté), début de page, fin page, partout ?! :(

Je ne cherche pas à avoir du code tout fait mais plutôt une bonne méthode & organisation alors je fais une fois de plus appel à vos lumières...

Merci d'avance pour votre aide !

Mes excuses pour ce double post mais je vais tenter de préciser un peu mieux :

Voici un extrait de ma page principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<div class = "form">
		<br/><form name = "AjoutUtilisateur" method = "post" action = "process.php" onSubmit="return verifFormUtil(this)">
		<div class = "element">
			<label>Identifiant :</label><input type = "text" name = "identifiant" class = "text" maxlength = "15" onBlur="verifNom(this)"/>
		</div><br/>
		<div class = "element">
			<label>Mot de passe :</label><input type = "password" name = "mdpuser" class = "text"maxlength = "15" onBlur="verifMDP(this)"/>
		</div>
		<br/>
		<div class = "element">
			<label>Niveau de s&eacute;curit&eacute; :</label><input type = "text" name = "nivsecu" class = "text" maxlength = "1" onBlur="verifNivSecu(this)"/>
		</div>
		<br/>
		<div class = "element">
		<input type = "submit" id = "Confirmer" value = "Confirmer"/>
		<div class = "loading"></div>
		</div>
		</form>
	</div>

Remarque : l'action de mon formulaire, ici process.php était initialement sur la même page que le code ci-dessus, et s'exécutait simplement en faisant

Code:

1
2
3
4
if($_GET['action'] == blablabla.php?action=ajouterutilisateurok)
{
ici mon code
}

et tout fonctionne de la même manière sur ma page, pour les suppressions, les modifications etc...

Ici placé mon php dans un fichier a part, process.php que voici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
session_start();
include("fonctions.php");
connexionsql();
 
        //récupération des variables
        $user = $_POST['identifiant'];
        $mdp = $_POST['mdpuser'];
        $nivsecu = $_POST['nivsecu'];
                                                
        //préparation de la requête sql
        $sql = 'INSERT INTO utilisateur VALUES("","'.$user.'","'.$mdp.'","'.$nivsecu.'")';
                                
        //transmission de la requête   
        mysql_query($sql) or die ('Erreur sql !' .$sql. ' <br/> '.mysql_error());
                                                
        //confirmation
        return 1;
?>

Enfin, voici mon script qui s'occupe de l'AJAX :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
$(document).ready(function()
	{
		//Si l'utilisateur a cliqué sur submit
		$('#submit').click(function() 
			{
				//on récupère les données de tous les champs
				var ident = $('input[name=identifiant]');
				var mdp = $('input[name=mdpuser]');
				var nivsecu = $('input[name=nivsecu]');
 
				//On passe a une simple vérification que les champs sont correctement remplis
				if(ident.val() == '')
					{
						id.addClass('highlight');
						return false;
					}
				else name.removeClasse('highlight');
 
				if(mdp.val() == '')
					{
						mdp.addClass('highlight');
						return false;
					}
				else mdp.removeClass('highlight');
 
				if(nivsecu.val() == '')
					{
						nivsecu.addClass('highlight');
						return false;
					}
				else nivsecu.removeClass('highlight');
 
				//on organise les données correctement
				var data = 'ident=' +ident.val() + '&mdp=' +mdp.val() + '&nivsecu=' +nivsecu.val();
 
				//désactivation des champs de texte
				$('.text').attr('disabled','true');
 
				//on affiche le symbole de chargement
				$('.loading').show();
 
				//on lance l'AJAX !
				$.ajax({
					   //le script php qui s'occupe du traitement avec la BDD
					   url: "process.php",
 
					   //méthode POST
					   type: "POST",
 
					   //les données
					   data: data,
 
					   //ne pas mettre en cache
					   cache: false,
 
					   //success
					   success: function(html)
					   	{
							//si le script php a réussi (il faudra lui faire renvoyer 1 ou true !)
							if(html == 1)
								{
									//on cache le formulaire
									$('.form').fadeOut('slow');
 
									//on affiche le message de réussite
									$('.done').fadeIn('slow');
 
								}
							else alert('Une erreur est survenue, essayez plus tard');
						}
					   });
 
				//annuler le comportement par défaut du submit qui aurait envoyé le formulaire seul
				return false;
			});
	});

J'espère que ce code fonctionne, mais ce qui m'embête le plus, c'est que je ne sais pas ou/quand/comment appeler ce script sans que je me retrouve sur une page blanche (process.php en fait).

ou mettre mes balises scripts pour appeler l'ajax qui se trouve dans un fichier à part (js/monjavascript.js) ?

Merci de votre aide !

13/05/2012, 19h03
NoSmoking

Bonjour,
ceci devrait t'aider dans la compréhension de la techno
Les meilleurs cours et tutoriels AJAX
avec en particulier
Comprendre les mécanismes d'AJAX

...après le fait de passer par jQuery te simplifiera simplement l'écriture mais ne t'exemptera pas de la compréhension.

Pour finir de t'aider il existe la documentation officielle http://api.jquery.com/category/ajax/
15/05/2012, 09h56
Hugo_O

Bonjour,

après lecture et relecture de ces sites, il y a toutefois un comportement du programme que je ne m'explique pas.

j'ai corrigé quelques fautes de syntaxes dans les codes que j'ai posté ci-dessus.

Lorsque je clique sur submit sans rien renseigner, le champ identifiant s'entoure en rouge, donc la, ça fonctionne comme prévu.

Cependant, du moment que je complète un champ, au moment du clic, je me retrouve sur mon process.php (qui ne devrait pas s'afficher :( )

J'ai remarqué qu'en mettant des alert('dutexte') après la vérification que le champ identifiant n'est pas vide, rien ne s'affiche.

Cela signifierait que le return false quitte complètement le script, alors que je voudrais qu'il soit testé a chaque tentative de soumission.

Est-ce du au fait que la lien vers la source de mon script est dans un header que j'inclue à ma page, ou rien a voir ?

Merci de votre aide

Code:

$('#submit').click(function()

:koi: il n'y a pas d'ID submit dans ton code
Code:

1 2 3 4 5 $(':submit').click(function(){ } // ou encore $('#Confirmer').click(function(){ }
d'autre erreur vu dans le code
Code:

1 2 3 4 if (ident.val() == '') { id.addClass('highlight'); // ERREUR sur id return false; } else name.removeClasse('highlight'); // ERREUR sur name
...

16/05/2012, 08h59
Hugo_O

Bonjour !

J'ai un peu (beaucoup :oops: ) honte pour le name.machin :/

Le reste je l'ai corrigé mais je vais virer le .click() puisque j'en ai entendu du mal, je pense passer par l'id du form avec submit pour que le script soit exécuté dans tous les cas !

Merci du coup de main !
16/05/2012, 09h10
Hugo_O

Désolé du double post.

Lorsque j'utilise la fonction jQuery : $.ajax({});

pour le paramètre url, si j'ai bien compris, je place le script.php qui va récupérer les infos du formulaire et les inscrire dans ma base de données.

Première question : Cela voudrait-il dire que spécifier action="script.php" dans mon formulaire serait une erreur ?

En effet, mon but est d'exécuter ce script en arrière plan, et en cas de réussite, faire apparaitre un message de réussite à l'utilisateur.

Deuxième question : Les données de mon formulaire sont en "POST". Le paramètre 'data' est donc inutile si je ne me trompe pas ?

Il permet de mettre en forme les données pour que la requête soit intelligible par "$_GET[]" mais c'est tout ?

Merci de prendre le temps de me lire et bonne journée !
16/05/2012, 15h13
Hugo_O

Un un triple post pour la route, au point où j'en suis...

Je suis reparti sur un code un peu plus standard et j'ai revu les fautes ~~d'inatention~~ de frappe.

Sujet résolu donc