J'ai suivi un tuto à la lettre, il fonctionne mais pas comme je l'avais imaginé :
Le problème c'est qu'il n'affiche pas la notification dès qu'on reçois un message, on est obligé de recharger la page.
Donc ce n'est pas vraiment de l'ajax.
C'est seulement quand je recharge la page, que la notification affiche un "1" que l'ajax marche.
Vous pouvez tester, voici les codes entier pour mieux comprendre :
Merci pour votre aide
La base de donnée à entrée manuellement :
id INT(11) Auto incre
contenu TEXT latin1_swedish_ci
lu TINYINT(1)
date TIMESTAMP CURRENT_TIMESTAMP
$bdd = new PDO('mysql:host=localhost;dbname=tuto','root','root');
$bdd->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
$bdd->exec('SET NAMES utf8');
<?php
require('connect.php');
$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));
$data = $req->fetch(PDO::FETCH_OBJ);
$count = $data->row;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<head>
<title></title>
</head>
<body>
<div id="content">
<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Compte</a></li>
<li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>
</ul>
</div>
</div>
</body>
</html>
<?php
if(empty($_GET['id'])){exit;} else{$id = $_GET['id'];}
require('connect.php');
$req = $bdd->prepare('UPDATE notifications SET lu=:lu WHERE id=:id');
$req->execute(array(':lu'=>true, ':id'=>$id));
$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));
$data = $req->fetch(PDO::FETCH_OBJ);
$count = $data->row;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<head>
<title></title>
</head>
<body>
<div id="content">
<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Compte</a></li>
<li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>
</ul>
</div>
<div id="messages">
<?php
$req = $bdd->prepare('SELECT * FROM notifications WHERE id=:id');
$req->execute(array(':id'=>$id));
$data = $req->fetch(PDO::FETCH_OBJ);
?>
<div class="message">
<?php echo $data->contenu;?>
</div>
</div>
</div>
</body>
</html>
<?php
require('connect.php');
$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));
$data = $req->fetch(PDO::FETCH_OBJ);
$count = $data->row;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<head>
<title></title>
</head>
<body>
<div id="content">
<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Compte</a></li>
<li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>
</ul>
</div>
<div id="messages">
<?php $req = $bdd->prepare('SELECT * FROM notifications ORDER BY lu,id DESC');
$req->execute();
while($data = $req->fetch(PDO::FETCH_OBJ)):?>
<div class="message" <?php if(!$data->lu):?> style="background:#e4f4fe;" <?php endif;?>>
<div class="read"><a href="message.php?id=<?php echo $data->id;?>">Voir</a></div>
<?php echo $data->contenu;?>
</div>
<?php endwhile;?>
</div>
</div>
</body>
</html>
<?php
require('connect.php');
$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));
$data = $req->fetch(PDO::FETCH_OBJ);
echo $data->row;
?>
[javascript]
function getNotifications()
{
$.ajax({
type: 'POST',
url: 'notifications.php',
success: function(data){
if(data>0){
$('.notification').attr('data-notification', data);
}
}
});
setTimeout('getNotifications()', 5000);
}
$(document).ready(function(){
getNotifications();
});
[/javascript]
Le fichier CSS, c'est plus joli pour tester :
body{
background:#f0f0f0;
}
.notification:after{
content:attr(data-notification);
background:#bc0000;
color:white;
padding:0 5px;
margin-left:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#menu{
margin:20px;
width:500px;
}
#menu ul{
background:#3B5998;
padding:10px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
}
#menu ul li{
display:inline;
list-style-type:none;
padding:5px;
margin:10px;
font-size:1.1em;
}
#menu ul li a{
text-decoration:none;
color:#f7f7f7;
}
#messages{
margin:20px 0;
}
.message{
border-bottom:solid 1px #a7a7a7;
width:500px;
margin-left:20px;
margin-bottom:20px;
}
