Redirection + AJAX

Par ciramor, il y a 11 ans

CakePHP

Bonjour à tous,

J'aimerais savoir comment créer un lien sur une page qui pointe sur ma gallerie d'image, en affichant directement les images de la catégorie passée via un ID dans le lien.

J'ai essayé avec :

<php echo $this->html->link('<div>Afficher la gallerie</div>', array('controller' => 'references', 'action' => 'show_references',10) , array('escape' => false)); ?>

Controller : References
Méthode : Show_references($id)

Mais ça ne fonctionne pas comme prévu. La génération de la page part en ... "steak" ! J'ai pensé à ce moment-là que c'était parce que je ne passais pas dans la fonction "index" de mon controller, donc la vue avait besoin de variables pas récupérées. Malheureusement, même en appelant "index" et par la suite "show_references($id)", le problème persiste.

Je suis preneur de tous vos avis/moyens pour le faire proprement!

Merci beaucoup d'avance!

PS: J'utilise CakePHP 2.0

4 réponses

Wa3aR, il y a 11 ans

Salut Ciramor,

Je ne comprends pas trop ce que tu veux dire par "ça part en steack" un peu plus de précision la dessus nous aiderait à mieux comprendre.

Ensuite je vois deux erreurs dans ton lien : tu mets une div à l'intérieur de ton lien ce qui sémantiquement est faux. Ensuite, l'action showreferences ne peut pas exister les sont normalement intérdits dans le nom des functions.

Essaye de renommer ta classe en showReferences() avec comme vue show_references.

ciramor, il y a 11 ans

Merci pour ta réponse plus que rapide.

D'accord, j'ai viré le "div" de mon link. Pour ce que est de l'underscore, ça fonctionne bien chez moi, malgré que cette nomanclature est interdite. Je m'abstiendrai dans le futur d'appeler mes méthodes ainsi.

Je vais développer dans le message suivant en détails & images mon problème!

ciramor, il y a 11 ans

Code html/php/js :

Donc voici le lien :

<php echo $this->html->link('<div>Afficher la gallerie</div>', array('controller' => 'references', 'action' => 'show_references',10) , array('escape' => false)); ?>

On arrive donc dans le controller :

function index(){ $slideshows = $this->Slideshow->find('all'); $d['categories'] = $this->Category->find('all',array( 'group' => 'Category.name' )); $d['images'] = $this->Reference->Image->find('all'); $d['news'] = $this->News->find('all', array( 'conditions' => array('News.type' => 'references'), )); $this->set('title_for_layout', "Nos références "); $this->set($d); } function show_references($id){ App::import('Helper','Image'); $imageSized = new ImageHelper(new View); $number=0; $references = $this->Reference->find('all',array('conditions' => array('category_id' => $id))); foreach($references as $reference){ $displayNone=0; $number++; $urlAndId = Router::url(array( 'controller' => 'references', 'action' => 'show_images', $reference["Reference"]["id"])); echo '<div class="refBox">'; echo '<p>'; if(isset($reference['Image'])){ $images = $reference['Image']; foreach($images as $image){ if($displayNone == 0){ $imgResized = $imageSized->resize($image['path'], 180, 180, array()); echo '<a class="fancybox" rel="gallery'.$number.'" href="img/'.$image['path'].'" title="'.$reference["Reference"]["name"].'">'; echo "$imgResized"; echo '</a>'; $displayNone++; }else{ echo '<a class="fancybox" style="display:none" rel="gallery'.$number.'" href="img/'.$image['path'].'" title="'.$reference["Reference"]["name"].'">'; echo '<img src="img/'.$image['path'].'" height="140" width="200" alt=""/>'; echo '</a>'; } } }else{ echo '<a>'; echo '<img src="img/icons/noImage.png" height="140" width="200" alt="">'; echo '</a>'; } echo '</p>'; echo '<div class="overlayRef">'.$reference['Reference']['name'].'</div>'; echo '<div class="overlayRefDesc"></div>'; echo '</div>'; } exit(); }

Voici mes 2 JS, un pour la FancyBox, l'autre pour récupérer les images de la catégorie :

$(window).load(function(){ $("#refShow").on("focusin", function(){ $(".fancybox").fancybox({ openEffect : 'none', closeEffect : 'none' }); }); // on }); $(document).on('click', '.ajax', function(event){ var element = $(this); var url = element.attr("data-url"); $.ajax({ type: 'POST', url: url, success: function(msg){ $("#refShow").html(msg); } }); return false; });

Le script JS va remplir le div "refShow". Voici la vue dans laquelle tout est affiché :

<?php echo $this->Html->css('news', null, array('inline' => false)); echo $this->Html->css("jquery.fancybox.css", null, array('inline' => false)); echo $this->Html->script("navigation.js"); echo $this->Html->script("fancyReferences.js"); ?> <div id="news"> <div class="container"> <div id="infos"> <h3><?php echo $news[0]['News']['title']; ?></h3> <?php echo $news[0]['News']['content']; ?> <?php foreach($categories as $k=>$v):?> <div class="catRef"> <a href="#" class="ajax" data-url = "<?php echo $this->Html->url(array('controller' => 'references','action' => 'show_references', $v['Category']['id'])); ?>"> <?php echo $v['Category']['name']; ?> </a> </div> <?php endforeach; ?> <!-- Affichage des références --> <div id="refShow"> </div> </div> </div> <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script> </div> <div id="projects"> <div class="container"> <?php echo $this->element('sliderReference'); ?> </div> </div>

Je ne sais pas si j'ai été assez clair, n'hésitez pas à me demander d'autres informations. Merci

ciramor, il y a 11 ans

J'ai trouvé ma solution ! En bricolant un peu, mais c'est fonctionnel. Il y avait des problèmes au niveau des "Paths" pour les images, et j'avais omis certains tests de variables avant l'exécution ailleurs.

Merci pour tout !