Discussion :

[Hugo_O]

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 )


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 !

[Hugo_O]

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

Voici un extrait de ma page principale :

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
	<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 :

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

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 :

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
<?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 :

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
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 !

[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/

[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

[NoSmoking]

Code :

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

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

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

Code :

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

1
2
3
4
5
$(':submit').click(function(){
}
// ou encore
$('#Confirmer').click(function(){
}

d'autre erreur vu dans le code

Code :

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

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

...

[Hugo_O]

Bonjour !

J'ai un peu (beaucoup ) 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 !