Ajax, éditer le contenu d'une division

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:

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:

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:

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