[RESOLU] Affichage de la suite des news en acordéon et ajax

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Affichage de la suite des news en acordéon et ajax

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 15 sept. 2012, 11:36

Eu ok, je ne dirais rien :roll:

J'ai oublier de ré initialiser la div.suite en display:none; :oops:

Bon tout fonctionne, merci beaucoup

Ce sujet est enfin résolut, merci de temps donnée et de ta patience

Cordialement

Re: Affichage de la suite des news en acordéon et ajax

par AB » 15 sept. 2012, 03:10

Je mets le code de base précédent que j'ai testé avec cette nouvelle fonctionalité et qui est ok :
<!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);
		
		if($.trim(suite.html()) == '')
		{	
			$.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");
							}
				  });
		}
		else
		{
							  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>
Evidemment pour que cela fonctionne tel quel il faut le fichier "destination_fichier.php" tel que je l'ai donné dans ce message (et placé dans le même répertoire que le fichier ci-dessus).

Oui sinon le principe d'ajax est toujours le même, on passe une requête au serveur en fonction d'un évènement sur la page et on modifie la page en fonction de la réponse du serveur (ou parfois on modifie simplement une variable de session, ou on effectue une requête de mise à jour, etc.). On peut aussi modifier différents endroits de la page si le retour est un tableau json plutôt qu'un simple html. Cela offre de nombreuses possibilités en fait et l'intérêt c'est que c'est sans avoir besoin de rafraichir la page et donc transparent pour le visiteur.

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 14 sept. 2012, 22:55

Ah ok, vu que j'y connais rien, j'aurais jamais pensé à cela Oo

Par contre, maintenant, lorsqu'on initialise le clique, ça bug.

J'ai l’impression qu'au premier clique, on referme la div, j'ai essayer d'inverser les conditions, mais rien n'y fait

En tout cas, merci beaucoup, j'aurais enfin mieux compris le système ajax (ou un des systèmes en fait mais :roll: ^^)

Cordialement

Re: Affichage de la suite des news en acordéon et ajax

par AB » 14 sept. 2012, 18:31

Oui c'est parce que j'ai été un peu vite, je t'ai donné le principe mais j'ai pas regardé assez le détail du code. Dans le code je teste la valeur de l'objet "suite" (ce qui n'a pas de sens avec le $.trim) alors qu'il faut tester la valeur du contenu html de l'objet "suite" (et dans ce cas le $.trim est pertinent).

Donc remplace
[javascript]if($.trim(suite) == '')
{[/javascript]
par
[javascript]if($.trim(suite.html()) == '')
{[/javascript]

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 14 sept. 2012, 15:16

J'ai essayer d'incorporer ta fonction tel quel, j'ai chercher sur le net "trim" mais il y a toujours un problème

La fonction de fonctionne pas ^^

[javascript]$(".click_suite").on("click",function () {

var id = $(this).attr("data-id");
var suite = $(this).next(".suite");
var that = $(this);

var showText='Lire la news';
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]

On affiche plus les news (pourtant il me semble que c'est le même principe) et ça ne change plus l'état de la div "click-suite"
Vois tu pourquoi cela ne fonctionne plus?

Merci beaucoup

Cordialement

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 12 sept. 2012, 22:11

Merci à toi
Je regarde cela de plus près demain dans l'après-midi, reprise du boulot oblige Oo

Merci beaucoup

Cordialement

Re: Affichage de la suite des news en acordéon et ajax

par AB » 12 sept. 2012, 18:43

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]

Re: Affichage de la suite des news en acordéon et ajax

par AB » 12 sept. 2012, 18:18

si tu peux me répondre par rapport au header pour les includes demandé plus haut stp
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.

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 10 sept. 2012, 06:32

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
<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>
effet.js
[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)
?>
au passage, on peux pas faire un header au lieu de faire des includes pour récupérer les pages de confs, et si oui, comment tu le ferait?

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');
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
?>
			<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
		}
newsz.php (la page de destination) (si tu peux me répondre par rapport au header pour les includes demandé plus haut stp?)
<?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)
?>
Merci beaucoup

Cordialement

Re: Affichage de la suite des news en acordéon et ajax

par AB » 09 sept. 2012, 13:04

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 :
<!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';
?>
Est-ce que cela fonctionne ? Chez moi oui.

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 09 sept. 2012, 07:22

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

Re: Affichage de la suite des news en acordéon et ajax

par AB » 08 sept. 2012, 17:25

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
<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).

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 08 sept. 2012, 04:43

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.
<?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
				}
?>
Merci beaucoup

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 :oops: :cry: .
<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>
Merci!
Cordialement!

Re: Affichage de la suite des news en acordéon et ajax

par AB » 08 sept. 2012, 04:33

Je vais tester ceci, merci beaucoup

En tout cas ça avance ^^

Au fait que signifie $.trim(suite)?

Merci

Cordialement
trim avec jquery c'est la même chose qu'avec php, ça supprime les espace vides de début et de fin.
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>

Re: Affichage de la suite des news en acordéon et ajax

par Fre3z69 » 08 sept. 2012, 04:26

Je vais tester ceci, merci beaucoup

En tout cas ça avance ^^

Au fait que signifie $.trim(suite)?

Merci

Cordialement