pagination AJAX et rechargement d'un élément de la page

Par northix, il y a 13 ans

CakePHP

Bonjour,

Mon problème porte sur la mise en place d'une pagination Ajax. J'ai une page qui affiche plusieurs type d'informations. La dernière partie concerne les commentaires laissés par les utilisateurs. Je souhaite pouvoir paginer ces commentaires. J'ai réussi à mettre en place un pagination simple (non AJAX) mais cela ne me va pas car à chaque fois la page entière se recharge. Je dois donc scroller vers le bas puis je dois ré ouvrir l'accordéon et finalement je peux visualiser les commentaires. Ceci est beaucoup trop contraignant.

Voici l'organisation du code de cette page.

<div class="accordion" id="accordion1">
       <div><strong>Mon 1er type d'infor ici</strong> 
       </div>
</div>
<div class="accordion" id="accordion2">
       <div><strong>Mon 2nd type d'infor ici</strong> 
       </div>
</div>
<div class="accordion" id="accordion3">
       <div><strong>Mon 3em type d'infor ici</strong> 
       </div>
</div>
<div class="accordion" id="accordion4">
       <div><strong>Les commentaires que je veux recharger en ajax</strong> 
       </div>
</div>

Cette page est ensuite envoyé dans le layout par defaut. Pour rendre cette pagination Ajax, j'ai suivi les indications du book :http://book.cakephp.org/2.0/fr/core-libraries/helpers/js.html#ajax-pagination (en bas de page).

J'ai donc rajouter dans mon appController: 

public $components = array('RequestHandler');
public $helpers = array('Js');
$this->Paginator->options(array(
    'update' => '#"les_commentaires',
    'evalScripts' => true
));

J'ai importer jquerry et echo $this->Js->writeBuffer(); à la fin du body (dans mon layout).

Finalement, j'ai rajouter dans ma vue : echo $this->Paginator->pagination(); (C'est une fonction d'un plugin bootstrap pour cakepPHP).

Mon layout ajax est le suivant : <?php echo $this->fetch('content'); ?>

Mon problème est que, lors d'un clic pour aller à la page suivante, je me retrouve avec la page entière chargé dans ma div "les_commentaires". Je n'ai pas le layout entier mais en gros j'ai deux fois le contenu de la page :( Moi je veux juste que la div commentaire soit recharger :(

Si je peux schématiser mes dire, voici le résultat final : 

<div class="accordion" id="accordion1">
       <div><strong>Mon 1er type d'infor ici</strong> 
       </div>
</div>
<div class="accordion" id="accordion2">
       <div><strong>Mon 2nd type d'infor ici</strong> 
       </div>
</div>
<div class="accordion" id="accordion3">
       <div><strong>Mon 3em type d'infor ici</strong> 
       </div>
</div>
<div class="accordion" id="accordion4">
       <div class="accordion" id="accordion1">
           <div><strong>Mon 1er type d'infor ici</strong> 
           </div>
       </div>
       <div class="accordion" id="accordion2">
           <div><strong>Mon 2nd type d'infor ici</strong> 
           </div>
       </div>
       <div class="accordion" id="accordion3">
           <div><strong>Mon 3em type d'infor ici</strong> 
           </div>
       </div>
       <div class="accordion" id="accordion4">
           <div><strong>Les commentaires que je veux recharger en ajax</strong> 
           </div>
       </div>
 </div>

Quelqu'un aurait une idée d'où peut venir le problème? N'hésitez pas à me demander plus d'informations.

Merci.

6 réponses

BenFarhat, il y a 13 ans

en survolant ton code je constate un double quotte en plus??

$this->Paginator->options(array(
    'update' => '#"les_commentaires',
    'evalScripts' => true
));

Si tu veux que la page se charge dans l'élement dont l'id est "les_commentaires" ca devrait être 

$this->Paginator->options(array(
    'update' => '#les_commentaires',
    'evalScripts' => true
))

;

J'espère que j'ai visé juste :)

et ca n'a rien à voir pour evalScripts si c'est juste des commentaires que tu charges et qu'a l'intérieur il n'y a pas de script tu peux mettre à false

northix, il y a 13 ans

Malheureusement cela ne change rien :(

BenFarhat, il y a 13 ans

ah!! ok la j'ai lu
c'est simple tu charges le RequestHandler sans l'utiliser
ce RequestHandler te permet de voir si tu utilises (par exemple) ajax
et si c'est le cas alors tu lui dis "ne charge pas de layout autour mais juste les informations" :)
il suffit de mettre se bout de code dans la fonction beforeFilter de ton controller ou comme je le fait moi dans ton AppController

if($this->RequestHandler->isAjax()){
    $this->layout=null;
    Configure::write('debug', 0);
}

allez dis moi que c'est la bonne! :)

northix, il y a 13 ans

Toujours pas ^^

Mais en faites je n'ai pas deux fois le layout mais "simplement" deux fois le contenu de la page (l'équivalent du $this->fetch('content')).

Je l'ai une fois 'normalement' et la répétition se trouve dans la div "les_commentaires" après avoir changé de page. Donc au lieu de me charger les commentaires suivants, pour le moment je me retrouve avec un équivalent de $this->fetch('content').

Merci pour ton aide ^^ Je garde espoir !

BenFarhat, il y a 13 ans

Bizarre!!!
pourrais je avoir une copie de la fonction qui charge les données (dans le controller correspondant)
Moi le truc qui me tracasse un peu c'est quand tu dit que $this->paginator est dans ton appcontroller? je l'aurais mis dans l'action correspondante au controller correspondant
genre si tu manipules des posts et que tu es sur la page index.ctp alors le this->paginator serait plutot dans la fonction index() sous PostsController.php

Bref :) pourrais tu me fournir plus d'info

northix, il y a 13 ans

Le $this->paginator est dans ma vue désolé. je crois que c'est ce qu'il faut faire (partie PaginatorHelper du book).

Et voilà comment je récupère les données (dans le controller) :

$this->set("nb_comments", $nb_comments);
        $this->set("nb_permis_obtenus", $nb_permis_obtenus);
        $this->set("nb_conseilles", $nb_conseilles);
        $this->paginate = array(
            'Comment' => array(
                'limit' => 3,
                'recursive'=>'-1',
                'order' => array('created' => 'desc'),
                'conditions' => array('Comment.ecole_id' =>$id)
            )
         );
        $comments = $this->paginate('Comment');
        $this->set(('comments'));

N'hésite pas à me donner un autre moyen de communication si tu le souhaites ;)