Navigation Ajax
Bonjour à tous,
Je suis actuellement en train d'essayer de faire un pagination en AJAX. J'ai suivi le tutoriel de Grafikart, il marche correctement cependant sur mon site, j'utilise l'url rewriting pour index.php?p=index&q=1 (p correspond à la page en cours et q la pagination) qui donne www.example.com/1.
Mon problème est le suivant : quand j'appuie pour naviguer sur la deuxième page (donc q=2), l'ensemble du site se recharge une deuxième fois. J'ai fait des recherches mais rien fonctionne. Voilà mon code :
Ajax :
$(document).ready(function(){
$(".pagination a").click(function(){
page = $(this) .attr("href");
$.ajax({
url: "/"+page,
cache: false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
});
function afficher(data){
$(".t").fadeOut(500, function(){
$(".t").empty();
$(".t").append(data);
$(".t").fadeIn(1000);
})
}Pagination :
<div class = "t">
<?php
$req = $bdd->prepare("SELECT COUNT(id) as nbArt FROM web");
$req->execute();
$data = $req->fetch();
$nbArt = $data'nbArt'];
$perPage = 8;
$nbPage = ceil($nbArt/$perPage);
if(isset($_GET'q'])){
intval($_GET'q']);
}
if(isset($_GET'q']) && $_GET'q']>0 && $_GET'q']<=$nbPage){
$cPage = intval($_GET'q']);
}
else{
$cPage =1;
}
$req = $bdd->prepare("SELECT id, titre, lien, site, date_creation FROM web ORDER BY date_creation DESC LIMIT ".(($cPage-1)*$perPage).",$perPage");
$req->execute();
while($data = $req->fetch()){
?>
<a href = "<?php echo $data'lien']; ?>" title = "<?php echo $data'titre']; ?>" onclick="window.open(this.href); return false;"><div class = "web_1">
<h2><?php echo stripcslashes($data'titre']); ?></h2>
<p>Zlatané le <?php echo date('d/m/y - H:i', strtotime($data'date_creation'])); ?> par <?php echo stripslashes($data'site']); ?></p>
</div></a>
<?php
}
$req->closeCursor();
?>
</div>
<div class = "pagination">
<?php
for($i=1;$i<=$nbPage;$i++){
echo " <p class = 'pagination_none'><a href=\"http://www.prozlatan.fr/$i\">$i</a> |</p>";
}
?>.htaccess :
RewriteRule ^([a-zA-Z\-]*)$ index.php?p=$1 [L]
RewriteRule ^([0-9\-]*)$ index.php?p=index&q=$1 [L]Merci de votre lecture, à bientôt ! :)
7 réponses
Essaie déjà de rajouter ça
$(".pagination a").click(function(event){
event.preventDefault();à la place de
$(".pagination a").click(function(){Cela permet d'annuler l'action par défaut du click sur le lien, qui va rediriger sur la page en question et recharger tout ton site.
Sinon ton script php fait bien son boulot ? Pour savoir si on doit juste trouver l'erreur au niveau JS ou aussi au niveau PHP ^^
Salut, merci pour ta réponse ! ;)
Oui le php marche nickel, je vais essayer ton code javascript.
Enfait j'ai modifier la fonction afficher :
function afficher(data){
$(".t").fadeOut(500, function(){
var breadcrumb = $(data).find(".t").html();
$(".t").empty();
$(".t").append(breadcrumb);
$(".t").fadeIn(1000);
})
}Cela fait bien la transition cependant, ça recharge la même page. En gros il y a bien l'effet de transition mais ça charge le même contenue.
Si tu veux faire du multipage coté client, tu devrais te tourner vers des solution comme backbonejs ou angularjs.
je vais dire un truc à la con
De mon coté quand j'ai une page ou je dit (par exemple) "si je clique sur un lien tu fait de l'ajax!", ca fonctionne (pas trés héroique) ...
Seulement cela fonctionne (ou pointe) que sur le dom chargé et non le dom qui va venir via ta requete ajax.
Pour dire dans ton cas la nouvelle pagination affiché suite à l'ajax ne fait pas partie du premier DOM chargé!
Pour résoudre ceci j'ai juste changé le .click() par un .live("click")
donc ton
$(".pagination a").click(function(){
....doit changé en
$(".pagination a").live('click',function(){
....:)
Pourquoi as tu le slash ici :
url: "/"+page,? Car dans pagination tu envoies directement l'url complete si je comprends bien :
for($i=1;$i<=$nbPage;$i++){
echo " <p class = 'pagination_none'><a href=\"http://www.prozlatan.fr/$i\">$i</a> |</p>";
}
$(document).ready(function(){
$(".pagination").on('click', 'a', function(e){
// une requete $.get suffit, plus simple a ecrire
// l'url est complete, il ne devrait pas y avoir besoin de mettre le '/' devant
$.get($(this).attr('href'), function(data) {
// j'ai enlevé le fadeOut et fadeIn pour ne pas surcharger le code
$('.t')
.empty()
.html( $(data).find('.t').html());
}
// le return false realise un e.preventDefault et un e.stopPropagation(), pas besoin du dernier
// cela permet de bloquer le comportement par defaut du lien, a savoir la redirection
e.preventDefault();
});
});Salut, merci pour vos réponse. Dans les différents cas rien ne se passe, la page est chargé normalement.
Je ne comprends toujours pas comment faire...
A bientôt !
Salut,
Je pense que tu as mal expliqué ton problème et que tout le monde n'a pas compris, en fait ce n'est pas le rechargement de la page qui pose problème mais lorsque la page appelée en ajax est chargée elle arrive avec le reste de la page, donc tu te retrouves avec tous les menus sidebar footer etc... en double, c'est bien ça ?
J'ai testé un truc qui fonctionne chez moi mais pour ce faire, il faut que tu entoures la partie qui t'intéresse d'une div, disons "content" si il n'existe pas déjà.
Tu entoures donc le bloc à charger avec <div id="content"> Ton contenu</div>
Et tu modifies ta fonction afficher de cette manière :
function afficher(data){
contenu = $(data).find("#content");
$(".t").fadeOut(500, function(){
$(".t").empty();
$(".t").append(contenu);
$(".t").fadeIn(1000);
})
}Et normalement ça devrait fonctionner mais comme dit luffysan, si tu veux vraiment faire une navigation full ajax, il vaut mieux te tourner vers une solution plus adaptée, il y a d'ailleurs un tuto sur une de ces solutions sur grafikart : Par ici ->