Forum d'entraide PHPFrance

Bonjour,
Je débute en AJAX. J'essaye d'intégrer une fonctionnalité "Afficher plus" sur un site web. Lorsque que le visiteur appuie sur le bouton adéquat, du contenu est injecté dans la page. J'ai essayé d'adapter un code de scroll infini que j'avais fais auparavant, mais je bloque depuis deux jours vu que je n'ai pas un bon niveau en AJAX. Grace à Firebug, je vois que la requête GET est bien envoyé mais je ne reçois rien en retour. Merci pour votre aide.

Code php:

Code : Tout sélectionner

if (isset($_GET['lastid'])) {
    
    $lastid = $db->quote($_GET['lastid']);
    $select = $db->query("SELECT * FROM posts WHERE slug_rubrique = $slug_rubrique AND id_post < $lastid ORDER BY id_post DESC LIMIT 0, 2");
    $moreposts = $select->fetchAll();

    foreach ($moreposts as $key => $post) {
      echo '<div class="conteneur-publication"><div class="illustration-publication">';
      if ($post['image_post'] != null && file_exists('medias/posts/'.$post['image_post'])) {
          echo '<a href="'.WEBROOT.$_GET['slug_rubrique'].'/'.$post['slug_post'].'/"><img src="'.WEBROOT.'medias/posts/'.$post['image_post'].'" alt="'.$post['titre_post'].'"></a>';
      }
      echo '</div><!-- .illustration-publication --><div class="details-publication"><h2 class="titre-publication"><a href="'.WEBROOT.$_GET['slug_rubrique'].'/'.$post['slug_post'].'/">'.$post['titre_post'].'</a></h2><div class="extrait-publication">'.tronquer($post['contenu_post']).'<a href="'.WEBROOT.$_GET['slug_rubrique'].'/'.$post['slug_post'].'/" class="lire-suite" title="Lire la suite">Lire la suite</a></div><!-- .extrait-publication --><div class="date-publication">Publication: '.date('d', strtotime($post['date_post'])).' '.$mois[date('n', strtotime($post['date_post']))].' '.date('Y', strtotime($post['date_post'])).'</div></div><!-- .details-publication --></div><!-- .conteneur-publication -->';
    }
  }

Code JS :

Code : Tout sélectionner

$('.aficher-plus').click(function (){
    $.ajax({
        url : "?lastid=" + $(".conteneur-publication:last").attr("id"),
        success: function(html){
            if(html){
                $(".conteneur-posts").append(html);
            }else{
            }
        }
    });
})

salut,

Utilise directeement dans le navigateur directement l'url du fichier que tu appels en js (avec le bon paramètre et un id existant) pour vérifier le fonctionnement.
si il n'y a rien qui s'affiche il faut que tu débogues ton code.

si tu n'utilises pas d'ide ou d'éditeur supportant le débogage tu peux utiliser la fonction [url=http://www.php.net/var_dump]var_dump[/php]
par exemple un var_dump($_GET) te permet de vérifier que tu reçois la bonne valeur.

Tant qu'il n'y a rien qui s'affiche laisse le js

lorsque le script fonctionne comme tu le souhaites seul essai avec ton script js.
ouvre la console développeur (F12) dans l'onglet réseau( ou network) regarde bien l'url pour voir si le paramètre y est avec la bonne valeur.

a priori je dirais que $(".conteneur-publication:last").attr("id") ne vas pas forcément fournir la valeur que tu souhaites (vu que la div correspondant n'as pas d'attribut id

).

@+

Bonsoir @moogli . Merci pour ton aide. J'ai essayé de débugger mon code, tout marche bien au niveau PHP. J'ai essayé une GET directement dans la barre d'adresse du navigateur, le contenu se charge correctement dans la page. La div .conteneur-publication a bien un attribut id dans la page, c'est dans le code à injecter après pression du bouton que j'avais oublié de le mettre. Mon soucis se trouve au niveau du JS. Lorsque je presse le bouton maintenant, aucune requête n'est envoyé (console développeur) alors que je n'ai rien changé au code.

Au secours

Bonjour! problème résolu. Encore merci pour votre aide. Le problème venait effectivement du JS. Voici le nouveau code

Code : Tout sélectionner

$('.aficher-plus').click(function(e){
    e.preventDefault();

    PathArray = window.location.pathname.split('/');
    var slug = "";
    for(i = 0; i < PathArray.length; i++){
        slug = PathArray[i];
        i++
    }

    $.ajax({
        url : "/liensdamour/content/loadposts.php?lastid=" + $(".conteneur-publication:last").attr("id") + "&slug_rubrique=" + slug,
        success: function(html){
            if(html){
                $(".conteneur-posts").append(html);
            }else{
            }
        }
    });
})

Le bouton se comportait comme un lien alors il m'a fallu ajouter la ligne e.preventDefault(); Pour le reste, à cause des ob_start(); et ob_get() je me retrouvais encore avec le contenu de la page entière chargée dans ma div. J'ai préféré mettre le code dans un autre fichier php.
Bonne journée!

Forum d'entraide PHPFrance

[RESOLU] PHP/AJAX : Problème chargement contenu dans page

PHP/AJAX : Problème chargement contenu dans page

Re: PHP/AJAX : Problème chargement contenu dans page

Re: PHP/AJAX : Problème chargement contenu dans page

Re: PHP/AJAX : Problème chargement contenu dans page