11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] PHP/AJAX : Problème fonctionnalité "Afficher plus"

Bonsoir,
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, pour ma nouvelle fonctionnalité, mais je bloque depuis deux jours vu que je n'ai pas un bon niveau en AJAX.

Code php:

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

  $select_rubrique = $db->query("SELECT intitule_rubrique FROM rubriques WHERE slug_rubrique = $slug_rubrique");
  $rubrique = $select_rubrique->fetch();

  $titre_page = $rubrique['intitule_rubrique'];

  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 Javascript:

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


Toute aide serait la bien venu, merci.
PS: Grace à Firebug, je vois que le GET est bien envoyé mais pas de réponse en retour.
Salut Smiley smile

En fait tout est bon sauf un seul truc Smiley smile

Tu attend 2 variables dans ton php dont celle-ci -> $_GET['slug_rubrique']

Et dans ton ajax tu appelles l'url avec une seule variable Smiley decu celle de l'id...
Donc ton php ne connait pas la rubrique et ne peux rien te retourner Smiley cligne
Comme pchlj, j'ajouterais également que t'as fonction ajax est trop simpliste.

Voici ce que je te préconise au minimum pour être sûr que ton code fonctionne et bien analyser d'éventuelles erreurs (et ne pas passer 2 jours sur un problème assez simple) : 



$.ajax({
                // J'ajoute un type pour pouvoir swicher de GET,POST, PUT, etc..
                type: 'GET',
                // L'url, perso je trouve que ?lastid= n'est pas très propre, je préfère séparé l'url des variables
                url: '/',
                // Ici tu mets directement ce dont tu as besoin pour les variables
                data: {
                    "lastid" : $(".conteneur-publication:last").attr("id")
                },
                // Ici la réponse attendu, dans notre cas du html
                dataType: 'html',
                // En cas de succès on balance une function anonyme qui récupère le contenu
                success: function(data){
                    $(".conteneur-posts").append(data);
                },
                // Si il y à une erreur pour x raisons, au moins on pourra savoir pourquoi cela n'a pas fonctionné
                error: function(data){
                    
                    console.log(data) ;
                }
            });
Bonsoir à tous . Merci à vous @pchlj et @kevinlourenco pour votre aide. La variable $_GET['slug_rubrique'] est renvoyé dans l'url grâce au rewriting. En plus $slug_rubrique est déjà définie dans la portion de code précédente. Je n'ai pas jugé nécessaire de coller le code en entier, vu que je bloque uniquement sur la fonctionnalité "afficher plus". J'essaierai ton code @pchlj. Comme je le disais je débute en ajax, d'où la simplicité/qualité de mon code. Smiley cligne Encore merci à vous.
Bonjour! problème résolu. Encore merci pour votre aide. J'essayé ton code @pchlj, avec le même résultat. Le problème venait effectivement de mon JS, mais pas où on le pensait Smiley smile . Voici le nouveau code

$('.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! Smiley biggrin
Modifié par Smokee (16 Mar 2017 - 11:35)
Sujet clos
Aller à