Peux tu m'expliquer le fonctionnement de l'ajax, pour faire passer un id ou autre à une autre page via Js ou Jquery?
Merci
Cordialement
la communauté d'entraide francophone dédiée au PHP
[RESOLU] Affichage de la suite des news en acordéon et ajax
Sur le principe tu peux créer un attribut data dans ton html qui sera alimenté en php et dont tu récupérera la valeur en js :
var id = $(this).attr("data-id")
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "destination_fichier.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})[/javascript]
J'ai pas testé mais c'est le principe. Ensuite tu peux optimiser pour que la requête ajax ne soit faite que si elle n'a pas déjà été faite en testant le contenu de "suite" par exemple :
[javascript]if($.trim(suite) == '')
{
// requête ajax + code accordéon
}
else
{
// uniquement code accordéon
}[/javascript]
Evidemment cette condition suppose qu'au départ "suite" soit vide
<div class="suite"></div>
Dans tous les cas attention à ce que tes pages (html + php) soient encodées en utf-8
<div class="click_suite" data-id = "<?php echo $id_news?>" >lire la suite1</div>var id = $(this).attr("data-id")
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "destination_fichier.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})[/javascript]
J'ai pas testé mais c'est le principe. Ensuite tu peux optimiser pour que la requête ajax ne soit faite que si elle n'a pas déjà été faite en testant le contenu de "suite" par exemple :
[javascript]if($.trim(suite) == '')
{
// requête ajax + code accordéon
}
else
{
// uniquement code accordéon
}[/javascript]
Evidemment cette condition suppose qu'au départ "suite" soit vide
<div class="suite"></div>
Dans tous les cas attention à ce que tes pages (html + php) soient encodées en utf-8
Bah et tes news tu les fait afficher comment actuellement ?
Quand tu fais ta requête pour afficher tes news, en même temps tu prend l'id ou tout au moins le champ unique qui caractérise la news et tu le fait afficher dans le data-id.
Quand tu fais ta requête pour afficher tes news, en même temps tu prend l'id ou tout au moins le champ unique qui caractérise la news et tu le fait afficher dans le data-id.
Non en fait je sais pas comment gérer la page qui reçoit les données.
Voila où j'en suis (guère plus avancé ^^)
Effet.js
[javascript]
$(document).ready(function() {
var id = $(this).attr("data-id")
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
});
[/javascript]
newsz.php
Merci de ton aide, désolé si je parait lent à la détente, mais j’apprends vraiment l'ajax, du moins son fonctionnement.
Cordialement
Voila où j'en suis (guère plus avancé ^^)
Effet.js
[javascript]
$(document).ready(function() {
var id = $(this).attr("data-id")
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
});
[/javascript]
newsz.php
<?php
// if($.trim(suite) == '')
// {
// requête ajax + code accordéon
// }
// else
// {
// uniquement code accordéon
// }
/* ICI JE SAIS PAS RECUPERER LES DONNEES */
?>
<div class="infoMaj">
<?php
$news = array();
$query=$cnx->prepare('SELECT COUNT(news_id) AS Nbnews FROM t_news');
$query->execute();
$data0=$query->fetch();
//pour le pagination
$totalDesMessages = $data0['Nbnews'];
$nombreDeMessagesParPage = 10;
$nombreDePages = ceil($totalDesMessages / $nombreDeMessagesParPage);
//Nombre de pages
$page = (isset($_GET['page']))?intval($_GET['page']):1;
$premierMessageAafficher = ($page - 1) * $nombreDeMessagesParPage;
// fin pagination
$query=$cnx->prepare('SELECT
news_id,
news_title,
news_content,
news_date,
news_icon
FROM t_news
ORDER BY news_id DESC
LIMIT :premier, :nombre');
$query->bindValue(':premier',(int) $premierMessageAafficher,PDO::PARAM_INT);
$query->bindValue(':nombre',(int) $nombreDeMessagesParPage,PDO::PARAM_INT);
$query->execute();
if ($query->rowCount()<1)
{
$news = 'Aucune nouvelle actuelement!';
}
else
{
while ($data=$query->fetch(PDO::FETCH_OBJ)){
$news_content = parseZCode($data->news_content);
$extrait = parseZCode(substr($data->news_content, 0,96));
// Trouver le dernier espace juste apres le dernier mot de $extrait
$espace = strrpos($extrait,' ');
?>
<div class="bloc">
<div class="infos-news">
<img class="title-news" src="<?php echo $data->news_icon; ?>" alt=""/>
<span class="title-news"><?php echo parseZCode($data->news_title); ?></span>
<small><?php echo changedateusfr($data->news_date); ?></small>
</div>
<div class="infos-news">
<?php
// je pense qu'ici il faut modifier le code mais je ne sais pas trop
if (substr_count($news_content, '<br />') >= 2) {
?>
<div class="extrait"><?php echo $extrait; ?> ...</div>
<div class="click_suite" data-id = "<?php echo $data->news_id?>">lire la suite</div>
<div class="suite"><p><?php echo $news_content; ?></p></div>
<?php
}
if (substr_count($news_content, '<br />') <= 2) {
?>
<div ><p><?php echo $news_content; ?></p></div>
<?php
}
?>
</div>
</div>
<?php
}
$query->CloseCursor();
}
echo get_list_page($page, $nombreDePages, 'accueil');
?>
</div>
Merci de ton aide, désolé si je parait lent à la détente, mais j’apprends vraiment l'ajax, du moins son fonctionnement.
Cordialement
J'avais pas compris ta précédente question. La page php de requête ajax peut ressembler à ceci :
C'est dans la page d'appel initiale qu'il faut faire la condition
[javascript]if($.trim(suite) == '')
// {
// requête ajax + code accordéon
// }
// else
// {
// uniquement code accordéon
// }[/javascript]
header('Content-type: text/html; charset=UTF-8');
// récupération du post 'id_post' envoyé par la requête ajax (intval pour sécuriser et caster en entier)
$id = isset($_POST['id_post'])? intval($_POST['id_post']) : null;
//...
$sql = "SELECT news_content FROM t_news WHERE news_id = ".$id;
// et tu affiche le résultat de la requête avec un echo (comme pour afficher le texte)C'est dans la page d'appel initiale qu'il faut faire la condition
[javascript]if($.trim(suite) == '')
// {
// requête ajax + code accordéon
// }
// else
// {
// uniquement code accordéon
// }[/javascript]
Modifié en dernier par AB le 08 sept. 2012, 04:34, modifié 3 fois.
trim avec jquery c'est la même chose qu'avec php, ça supprime les espace vides de début et de fin.Je vais tester ceci, merci beaucoup
En tout cas ça avance ^^
Au fait que signifie $.trim(suite)?
Merci
Cordialement
tape "trim jquery " dans google pour plus d'info
(note : j'ai édité mon messgae précédent)
EDIT : ça permetrait de fonctionner quand même si tu avait des espaces vides par inadvertance dans ta balise "suite"
genre <div class="suite"> </div>
J'ai essayer le code comme indiquer plus haut, sauf que dans la page de provenance (news.php) j'ai pas fait la condition.
J'ai essayer le la placer mais il y a deux trois truc incompris, et des erreurs.
D'une part, qu'appel tu la requête ajax?
Deuxièmement j'ai pas réussit à placer correctement la fonction.
Ensuite, si tu vois sur le code fournit un peux plus haut, j'ai une condition qui affiche différemment les news en fonction du nombre de ligne, et pour cela j'ai un peux de mal à gérer ceci avec Oo.
Cordialement
Ps: j'ai beau essayer de comprendre, j'y arrive pas.
J'aimerais que l'on charge les news sont on veux voir la suite, et en même temps que l'on referme les div.suite qui sont ouverte lorsqu'on clique sur un autre .click_suite
Voici le code de news.php au complet, si tu peux essayer de me le faire, en m'expliquant via les commentaires les actions et autres stp, j'ai beau essayer de chercher sur le net, les tutos et autre, j'ai rien compris
.
Cordialement!
J'ai essayer le la placer mais il y a deux trois truc incompris, et des erreurs.
D'une part, qu'appel tu la requête ajax?
Deuxièmement j'ai pas réussit à placer correctement la fonction.
Ensuite, si tu vois sur le code fournit un peux plus haut, j'ai une condition qui affiche différemment les news en fonction du nombre de ligne, et pour cela j'ai un peux de mal à gérer ceci avec Oo.
<?php
if (substr_count($news_content, '<br />') >= 2) {
?>
<div class="extrait"><?php echo $extrait; ?> ...</div>
<div class="click_suite" data-id = "<?php echo $data->news_id?>">lire la suite</div>
<div class="suite"><p><?php echo $news_content; ?></p></div>
<?php
}
if (substr_count($news_content, '<br />') <= 2) {
?>
<div ><p><?php echo $news_content; ?></p></div>
<?php
}
?>Cordialement
Ps: j'ai beau essayer de comprendre, j'y arrive pas.
J'aimerais que l'on charge les news sont on veux voir la suite, et en même temps que l'on referme les div.suite qui sont ouverte lorsqu'on clique sur un autre .click_suite
Voici le code de news.php au complet, si tu peux essayer de me le faire, en m'expliquant via les commentaires les actions et autres stp, j'ai beau essayer de chercher sur le net, les tutos et autre, j'ai rien compris
.<div class="infoMaj">
<?php
$news = array();
$query=$cnx->prepare('SELECT COUNT(news_id) AS Nbnews FROM t_news');
$query->execute();
$data0=$query->fetch();
//pour le pagination
$totalDesMessages = $data0['Nbnews'];
$nombreDeMessagesParPage = 10;
$nombreDePages = ceil($totalDesMessages / $nombreDeMessagesParPage);
//Nombre de pages
$page = (isset($_GET['page']))?intval($_GET['page']):1;
$premierMessageAafficher = ($page - 1) * $nombreDeMessagesParPage;
// fin pagination
$query=$cnx->prepare('SELECT
news_id,
news_title,
news_content,
news_date,
news_icon
FROM t_news
ORDER BY news_id DESC
LIMIT :premier, :nombre');
$query->bindValue(':premier',(int) $premierMessageAafficher,PDO::PARAM_INT);
$query->bindValue(':nombre',(int) $nombreDeMessagesParPage,PDO::PARAM_INT);
$query->execute();
if ($query->rowCount()<1)
{
$news = 'Aucune nouvelle actuelement!';
}
else
{
while ($data=$query->fetch(PDO::FETCH_OBJ)){
$news_content = parseZCode($data->news_content);
$extrait = parseZCode(substr($data->news_content, 0,96));
// Trouver le dernier espace juste apres le dernier mot de $extrait
$espace = strrpos($extrait,' ');
?>
<div class="bloc">
<div class="infos-news">
<img class="title-news" src="<?php echo $data->news_icon; ?>" alt=""/>
<span class="title-news"><?php echo parseZCode($data->news_title); ?></span>
<small><?php echo changedateusfr($data->news_date); ?></small>
</div>
<div class="infos-news">
<?php
if (substr_count($news_content, '<br />') >= 2) {
?>
<div class="extrait"><?php echo $extrait; ?> ...</div>
<div class="click_suite" data-id = "<?php echo $data->news_id?>">lire la suite</div>
<div class="suite"><p><?php echo $news_content; ?></p></div>
<?php
}
if (substr_count($news_content, '<br />') <= 2) {
?>
<div><p><?php echo $news_content; ?></p></div>
<?php
}
?>
</div>
</div>
<?php
}
$query->CloseCursor();
}
echo get_list_page($page, $nombreDePages, 'accueil');
?>
</div>
Cordialement!
La requête ajax est faite en javascript dans ta page principale à ce niveau : $.ajax
[javascript]$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "destination_fichier.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})[/javascript]
On va donc envoyer une requête au fichier mentionné dans "url", soit ici "destination_fichier.php", avec comme variable la valeur de data où j'ai indiqué "id_post=id". Donc "destination_fichier.php" va recevoir cette variable en $_POST soit $_POST['id_post'] qui sera égale à la valeur de id. Au retour de la requête, après "success", tu auras donc à alimenter le div de class "suite" avec le contenu de ce que retournera "destination_fichier.php".
Plus haut au niveau javascript dans le code ci-dessus tu vois qu'on a récupéré la valeur de id depuis le code html, dans l'attribut "data-id" du div de class "click_suite". Il faut donc que le code php génère dans le code htm la valeur de l'id de la news. C'est pour cela que je te donnais en exemple le code html
Tu as donc deux choses à faire en php :
1/ Modifier le code php actuel de ta page qui affiche tes news afin qu'il affiche l'id de la new dans "data-id"
2/ Créer le fichier "destination_fichier.php" qui renverra, avec un echo, le contenu à mettre dans le div de class "suite", cela en fonction de $_POST['id_post'] (je t'ai donné le principe plus haut).
[javascript]$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "destination_fichier.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})[/javascript]
On va donc envoyer une requête au fichier mentionné dans "url", soit ici "destination_fichier.php", avec comme variable la valeur de data où j'ai indiqué "id_post=id". Donc "destination_fichier.php" va recevoir cette variable en $_POST soit $_POST['id_post'] qui sera égale à la valeur de id. Au retour de la requête, après "success", tu auras donc à alimenter le div de class "suite" avec le contenu de ce que retournera "destination_fichier.php".
Plus haut au niveau javascript dans le code ci-dessus tu vois qu'on a récupéré la valeur de id depuis le code html, dans l'attribut "data-id" du div de class "click_suite". Il faut donc que le code php génère dans le code htm la valeur de l'id de la news. C'est pour cela que je te donnais en exemple le code html
<div class="click_suite" data-id = "<?php echo $id_news?>" >lire la suite1</div>Tu as donc deux choses à faire en php :
1/ Modifier le code php actuel de ta page qui affiche tes news afin qu'il affiche l'id de la new dans "data-id"
2/ Créer le fichier "destination_fichier.php" qui renverra, avec un echo, le contenu à mettre dans le div de class "suite", cela en fonction de $_POST['id_post'] (je t'ai donné le principe plus haut).
j'ai compris ce que tu m'as dit, mais j'arrive pas à voir comment intégrer cette fonction
[javascript]
if($.trim(suite) == '')
{
// requête ajax + code accordéon
}
else
{
// uniquement code accordéon
}[/javascript]
En fait je bloque au niveau de la page principale des news.
La page de destination, j'ai fait ma requête tout préparé, mais j'arrive pas à faire en sorte que ça s'affiche quand on clique sur le lien.
Peux tu m'expliquer comment m'y prendre sur la page de provenance?
Merci beaucoup
Cordialement
[javascript]
if($.trim(suite) == '')
{
// requête ajax + code accordéon
}
else
{
// uniquement code accordéon
}[/javascript]
En fait je bloque au niveau de la page principale des news.
La page de destination, j'ai fait ma requête tout préparé, mais j'arrive pas à faire en sorte que ça s'affiche quand on clique sur le lien.
Peux tu m'expliquer comment m'y prendre sur la page de provenance?
Merci beaucoup
Cordialement
Faut te mettre en mode débuggage pour trouver où ça bloque. Tu peux mettre temporairement des alert() dans ton code javascript pour voir le résultat de tes variables, par exemple
[javascript]$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
alert(id);
var suite = $(this).next(".suite");
var that = $(this);
//...
[/javascript]
vérifies si c'est le résultat attendu.
Ensuite pour voir la requête ajax et son retour, un outil comme le module d'extension Firebug pour Firefox est indispensable. Tu verras le résultat dans l'onglet "console" de cet outil.
Concernant la condition [javascript]if($.trim(suite) == '')
{
// requête ajax + code accordéon
}
else
{
// uniquement code accordéon
}[/javascript]il faut le faire après avoir vérifié que le modèle de base fonctionne.
Faut faire les choses par étapes !
D'abord tu peux commencer par tester ce code, c'est la base de fonctionnement :
page "destination_fichier.php" :
[javascript]$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
alert(id);
var suite = $(this).next(".suite");
var that = $(this);
//...
[/javascript]
vérifies si c'est le résultat attendu.
Ensuite pour voir la requête ajax et son retour, un outil comme le module d'extension Firebug pour Firefox est indispensable. Tu verras le résultat dans l'onglet "console" de cet outil.
Concernant la condition [javascript]if($.trim(suite) == '')
{
// requête ajax + code accordéon
}
else
{
// uniquement code accordéon
}[/javascript]il faut le faire après avoir vérifié que le modèle de base fonctionne.
Faut faire les choses par étapes !
D'abord tu peux commencer par tester ce code, c'est la base de fonctionnement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script>
$(function()
{
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
$.ajax({
dataType: "html",
type: "POST",
url: "destination_fichier.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})
})
</script>
<style type="text/css">
.suite {
display : none;
}
.click_suite {
cursor:pointer;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="extrait">voici le premier paragraphe de ma news1 ... </div>
<div class="click_suite" data-id="1" >lire la suite</div>
<div class="suite"></div>
<div class="extrait">voici le premier paragraphe de ma news2 ... </div>
<div class="click_suite" data-id="2">lire la suite</div>
<div class="suite"></div>
<div class="extrait">voici le premier paragraphe de ma news3 ... </div>
<div class="click_suite" data-id="3">lire la suite</div>
<div class="suite"></div>
</body>
</html>
page "destination_fichier.php" :
<?php
header('Content-type: text/html; charset=UTF-8');
// récupération du post 'id_post' envoyé par la requête ajax (intval pour sécuriser et caster en entier)
$id = isset($_POST['id_post'])? intval($_POST['id_post']) : null;
if ($id==1) echo 'premier paragraphe texte suite';
else if ($id==2) echo 'second paragraphe texte suite';
else if ($id==3) echo 'troisième paragraphe texte suite';
?>Oui, j'ai tester, cela fonctionne bien
Par contre maintenant, dans le code actuel, quand on clique un première fois sur click-suite, on ferme la div extrait, mais on affiche rien dans la div suite
Si on clique encore, on ré ouvre les deux en même temps Oo
Mais le code fonctionne, on récupère bien les news correspondant à l'id dont on a cliquer sur click-suite
Voici le code actuel
news.php
[javascript]
$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "./includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
//// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})
[/javascript]
newsz.php
Merci beaucoup
Cordialement
Ps: (Edit):
J'ai trouvé le soucis
En plus j'ai enlever l'extrait, et j'ai simplement mit en condition, que si il y'a plus de 2 lignes on met un lien qui dit "Lire la news" sinon on affiche directement la news.
Et ensuite avec ton code Js j'ai simplement initialiser la div.suite à hide et tout fonctionne super bien.
Je te met les codes au cas où tu discerne une erreur ou que tu sait qu'on peux optimiser ceci, mais sinon je pense que le sujet est résolut, je comprend mieux l'ajax maintenant, et ça je t'en remercie.
Le code complet (toutes les pages)
le script Js
[javascript] $(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
$.ajax({
dataType: "html",
type: "POST",
url: "./includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
// that.prev(".extrait").toggle("fast");
}
});
})
})[/javascript]
news.php
Cordialement
Par contre maintenant, dans le code actuel, quand on clique un première fois sur click-suite, on ferme la div extrait, mais on affiche rien dans la div suite
Si on clique encore, on ré ouvre les deux en même temps Oo
Mais le code fonctionne, on récupère bien les news correspondant à l'id dont on a cliquer sur click-suite
Voici le code actuel
news.php
<div class="infoMaj">
<?php
$news = array();
$query=$cnx->prepare('SELECT COUNT(news_id) AS Nbnews FROM t_news');
$query->execute();
$data0=$query->fetch();
//pour le pagination
$totalDesMessages = $data0['Nbnews'];
$nombreDeMessagesParPage = 10;
$nombreDePages = ceil($totalDesMessages / $nombreDeMessagesParPage);
//Nombre de pages
$page = (isset($_GET['page']))?intval($_GET['page']):1;
$premierMessageAafficher = ($page - 1) * $nombreDeMessagesParPage;
// fin pagination
$query=$cnx->prepare('SELECT
news_id,
news_title,
news_content,
news_date,
news_icon
FROM t_news
ORDER BY news_id DESC
LIMIT :premier, :nombre');
$query->bindValue(':premier',(int) $premierMessageAafficher,PDO::PARAM_INT);
$query->bindValue(':nombre',(int) $nombreDeMessagesParPage,PDO::PARAM_INT);
$query->execute();
if ($query->rowCount()<1)
{
$news = 'Aucune nouvelle actuelement!';
}
else
{
while ($data=$query->fetch(PDO::FETCH_OBJ)){
$news_content = parseZCode($data->news_content);
$extrait = parseZCode(substr($data->news_content, 0,96));
// Trouver le dernier espace juste apres le dernier mot de $extrait
$espace = strrpos($extrait,' ');
?>
<div class="bloc">
<div class="infos-news">
<img class="title-news" src="<?php echo $data->news_icon; ?>" alt=""/>
<span class="title-news"><?php echo parseZCode($data->news_title); ?></span>
<small><?php echo changedateusfr($data->news_date); ?></small>
</div>
<div class="infos-news">
<?php
if (substr_count($news_content, '<br />') >= 2) {
?>
<div class="extrait"><?php echo $extrait; ?> ...</div>
<div class="click_suite" data-id = "<?php echo $data->news_id?>">lire la suite</div>
<div class="suite"></div>
<?php
}
if (substr_count($news_content, '<br />') <= 2) {
?>
<div><p><?php echo $news_content; ?></p></div>
<?php
}
?>
</div>
</div>
<?php
}
$query->CloseCursor();
}
echo get_list_page($page, $nombreDePages, 'accueil');
?>
</div>
[javascript]
$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
$.ajax({
dataType: "html",
type: "POST",
url: "./includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
//// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
that.prev(".extrait").toggle("fast");
}
});
})
[/javascript]
newsz.php
<?php
header('Content-type: text/html; charset=UTF-8');
include ('../conf/contants.php');
include ('../conf/conf.php');
include ('../inc/function.php');
include ('../inc/function_sql.php');
include ('../inc/mcode.php');
include ('../inc/ariane.php');
// récupération du post 'id_post' envoyé par la requête ajax (intval pour sécuriser et caster en entier)
$id = isset($_POST['id_post'])? intval($_POST['id_post']) : null;
//...
$query=$cnx->prepare('SELECT
news_content
FROM t_news
WHERE news_id = :id');
$query->bindValue(':id',(int) $id,PDO::PARAM_INT);
$query->execute();
$data=$query->fetch(PDO::FETCH_OBJ);
echo parseZCode($data->news_content);
// et tu affiche le résultat de la requête avec un echo (comme si tu voulais afficher le texte)
?>
Code : Tout sélectionner
include ('../conf/contants.php');
include ('../conf/conf.php');
include ('../inc/function.php');
include ('../inc/function_sql.php');
include ('../inc/mcode.php');
include ('../inc/ariane.php');
Cordialement
Ps: (Edit):
J'ai trouvé le soucis
En plus j'ai enlever l'extrait, et j'ai simplement mit en condition, que si il y'a plus de 2 lignes on met un lien qui dit "Lire la news" sinon on affiche directement la news.
Et ensuite avec ton code Js j'ai simplement initialiser la div.suite à hide et tout fonctionne super bien.
Je te met les codes au cas où tu discerne une erreur ou que tu sait qu'on peux optimiser ceci, mais sinon je pense que le sujet est résolut, je comprend mieux l'ajax maintenant, et ça je t'en remercie.
Le code complet (toutes les pages)
le script Js
[javascript] $(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
$.ajax({
dataType: "html",
type: "POST",
url: "./includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
// that.prev(".extrait").toggle("fast");
}
});
})
})[/javascript]
news.php
?>
<div class="bloc">
<div class="infos-news">
<img class="title-news" src="<?php echo $data->news_icon; ?>" alt=""/>
<span class="title-news"><?php echo parseZCode($data->news_title); ?></span>
<small><?php echo changedateusfr($data->news_date); ?></small>
</div>
<?php
if (substr_count($news_content, '<br />') >= 2) {
?>
<div class="click_suite" data-id = "<?php echo $data->news_id; ?>">Lire la news</div>
<div class="suite"></div>
<?php
}
if (substr_count($news_content, '<br />') <= 2) {
?>
<div><p><?php echo $news_content; ?></p></div>
<?php
}
?>
</div>
<?php
}<?php
header('Content-type: text/html; charset=UTF-8');
include ('../conf/contants.php');
include ('../conf/conf.php');
include ('../inc/function.php');
include ('../inc/function_sql.php');
include ('../inc/mcode.php');
include ('../inc/ariane.php');
// récupération du post 'id_post' envoyé par la requête ajax (intval pour sécuriser et caster en entier)
$id = isset($_POST['id_post'])? intval($_POST['id_post']) : null;
//...
$query=$cnx->prepare('SELECT
news_content
FROM t_news
WHERE news_id = :id');
$query->bindValue(':id',(int) $id,PDO::PARAM_INT);
$query->execute();
$data=$query->fetch(PDO::FETCH_OBJ);
echo parseZCode($data->news_content);
// et tu affiche le résultat de la requête avec un echo (comme si tu voulais afficher le texte)
?>Cordialement
Non cela n'a rien à voir, ton code est bien comme cela. Eventuellement tu peux remplacer un include par un require ou vice versa (cf la doc php pour voir la différence), mais un include n'a rien à voir avec un header.si tu peux me répondre par rapport au header pour les includes demandé plus haut stp
Maintenant que tout est mis en place et fonctionnel tu pourrais faire l'optimisation dont je parlais avant. Si la requête ajax a déjà été faite pour une nouvelle, inutile de la refaire une seconde fois si le visiteur re clique sur le même lien. Donc tu pourrais éventuellement soulager un peu (un peu seulement car ce cas de figure ne devrait pas être très fréquent) le serveur en testant si le div est plein ou vide avant de faire la requête. Sur le principe c'est très simple :
[javascript]
$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
if($.trim(suite) == '')
{
$.ajax({
dataType: "html",
type: "POST",
url: "./includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
//// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
// that.prev(".extrait").toggle("fast");
}
});
}
else
{
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
}
})[/javascript]
[javascript]
$(".click_suite").on("click",function () {
var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';
if($.trim(suite) == '')
{
$.ajax({
dataType: "html",
type: "POST",
url: "./includes/newsz.php",// page php dans laquelle tu renvoies le contenu de la new avec un echo en fonction de la variable post "id_post" envoyée ci-dessous
data: 'id_post='+id,
success: function(result)//retour de requête
{
//// on utilise result qui est le retour de la requête pour ensuite alimenter un div (ou autre traitement)
suite.html(result);
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
// that.prev(".extrait").toggle("fast");
}
});
}
else
{
suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});
}
})[/javascript]