Merci à toi
Je regarde cela de plus près demain dans l'après-midi, reprise du boulot oblige Oo
Merci beaucoup
Cordialement
la communauté d'entraide francophone dédiée au PHP
[RESOLU] Affichage de la suite des news en acordéon et ajax
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
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
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]
Donc remplace
[javascript]if($.trim(suite) == '')
{[/javascript]
par
[javascript]if($.trim(suite.html()) == '')
{[/javascript]
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
^^)
Cordialement
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
^^)Cordialement
Je mets le code de base précédent que j'ai testé avec cette nouvelle fonctionalité et qui est ok :
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.
<!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>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.
