Ajax, éditer le contenu d'une division

Galithiel · 24/01/2011, 20h15

Bonjour,

Je réalise actuellement un système où les membres peuvent s'inscrire à une newsletter. J'ai pour cela 3 pages. Le système fonctionne avec jQuery et Ajax.

Voila mes 3 pages :

index.php, où le membre s'inscrit à la newsletter etc... :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Sacre et damnation</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/tabs.js"></script>
	<script type="text/javascript" src="js/newsletter.js"></script>
</head>
 
<body>
<div id="contenu">
	<div id="coming-soon">
		<div id="tab-1">
			<div id="logo" style="padding-top: 10px;"><img src="images/logo.png" alt="Jeu en ligne gratuit" /></div>
			<div id="texte-bloc">
				<p>
					Sacre et Damnation vous intéresse et vous souhaitez être tenu au courant des dernières avancées et de la sortie de la version jouable de celui-ci ? N'hésitez pas à vous inscrire à la newsletter !
				</p>				
				<div id="newsletterForm">
					<form method="post" action="#">		
						<table>
						<tr>
							<td>
								<label for="pseudo">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" />
								<br />
								<label for="mail">Mail :</label> <input type="text" name="mail" id="mail" />
								<input type="hidden" name="ip" id="ip" value="<?php echo $_SERVER["REMOTE_ADDR"]; ?>" />
								<br />
							</td>
							<td>
								<input type="submit" value="Inscription" />
							</td>
						</tr>
						</table>
					</form>
				</div>
				<div id="messageNewsletter" style="height: 20px;">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Le script js/newsletter.js qui appelle dynamiquement la page d'insertion dans la base de donnée :

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
 
var url="newsletter.php";
 
$(function(){
    $("#newsletterForm form").submit(function(){
        var pseudo = $("#pseudo").val();
        var mail = $("#mail").val();
        var ip = $("#ip").val();
 
        $.post(url,{action:"enregistrer",pseudo:pseudo,mail:mail,ip:ip},function(enregistrer){
			$("#messageNewsletter").empty().append(enregistrer.message);
		});
 
        return false;
    })
});

Et newsletter.php qui ajoute les champs dans la base de donnée et génère les messages de succès ou d'erreur :

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
<?php
function newsletter($pseudo, $mail, $ip) {
	$bdd = new PDO('mysql:host=localhost;dbname=sd_coming', 'root', '');
 
	$bdd->exec("set names 'utf8'");
	$bdd ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
	if(filter_var($mail, FILTER_VALIDATE_EMAIL) == TRUE) {
		$retour = $bdd->prepare('SELECT COUNT(*) AS nb FROM newsletter WHERE mail_mail = :mail');
		$retour->execute(array('mail' => $mail));
		$donnees = $retour->fetch();
 
		if($donnees['nb'] != 0) { // Le mail existe déjà
			$reponse['message'] = '<span style="color: red;">Le mail existe déjà dans notre base de donnée.</span>';
		}
		else {
			$enregistrer = $bdd->prepare('INSERT INTO newsletter VALUES("", :mail, :ip)');
			$enregistrer->execute(array("mail" => $mail, "ip" => $ip));
 
			$reponse['message'] = '<span style="color: green;">Le mail a été ajouté à base de donnée.</span>';
		}
	}
	else {
		$reponse['message'] = '<span style="color: red;">Vous devez entrer un mail valide.</span>';
	}
 
	return $reponse;
}
 
if($_POST['action'] == "enregistrer") {
	$enregistrer = newsletter($_POST['pseudo'], $_POST['mail'], $_POST['ip']);
}
?>

L'insertion des emails dans la base de donnée marche sans problème, mais je n'arrive pas à afficher les messages d'erreur ou de succès dans le div "messageNewsletter" sur la page index.php :/

Je fais donc appel à vous en espérant obtenir une solution

Merci d'avance.

PS : Notez que j'sais pas trop ce que j'fais avec la page newsletter.js, j'm'y connais que peu en JavaScript et c'est la 1ere fois que j'utilise Ajax :p

gwinyam · 26/01/2011, 17h25

Essaie de tracer ce que tu récupères déjà avec ton appel Ajax (au passage Ajax, c'est une méthode propre à Javascript, pas un langage séparé

). En utilisant, par exemple Firebug pour Firefox, Webkit Inspector pour Chrome et Safari ou encore la debugBar pour IE.

Ensuite, pour le cas où, je te mets la doc de $.post() : http://api.jquery.com/jQuery.post/

A partir de là, je ne comprends pas pourquoi tu fais un return à la fin de ta fonction newsletter. A ta place, je mettrais un echo plutôt. Et surtout, je n'afficherai pas un tableau direct, mais je renverrai un contenu JSON (ne pas oublier de modifier les headers de la réponse).

Puis après quand tu veux utiliser la partie "message" de ton paramètre "enregistrer", vu que c'est un tableau, fais plutôt l'appel enregistrer['message'], plutôt que enregistrer.message

Ensuite, tiens nous au courant de la situation

26/01/2011, 17h25	#2
gwinyam Membre Expert Mathieu ROBIN Développeur Web Inscription : mai 2006 Messages : 1 116 Détails du profil Informations personnelles : Nom : Mathieu ROBIN Âge : 25 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : mai 2006 Messages : 1 116 Points : 2 142 Points : 2 142	Essaie de tracer ce que tu récupères déjà avec ton appel Ajax (au passage Ajax, c'est une méthode propre à Javascript, pas un langage séparé ). En utilisant, par exemple Firebug pour Firefox, Webkit Inspector pour Chrome et Safari ou encore la debugBar pour IE. Ensuite, pour le cas où, je te mets la doc de $.post() : http://api.jquery.com/jQuery.post/ A partir de là, je ne comprends pas pourquoi tu fais un return à la fin de ta fonction newsletter. A ta place, je mettrais un echo plutôt. Et surtout, je n'afficherai pas un tableau direct, mais je renverrai un contenu JSON (ne pas oublier de modifier les headers de la réponse). Puis après quand tu veux utiliser la partie "message" de ton paramètre "enregistrer", vu que c'est un tableau, fais plutôt l'appel enregistrer['message'], plutôt que enregistrer.message Ensuite, tiens nous au courant de la situation __________________ Mon blog techno et son billet hebdomadaire sur l'actualité jQuery. Et mon blog cuisine pour une personne. Le bouton ne masse pas les pieds, mais ça aide la communauté.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email