Cakephp 3 et plugin jquery chosen

Par mansaychai, il y a 10 ans

CakePHP

Bonjour à tous,

J'ai un petit soucis pour mettre en place le fameux plugin jQuery chosen (http://harvesthq.github.io/chosen/). Pour ceux qui ne connaissent pas, ce plugin permet d'avoir un visuel sympa sur les champ select.

Bref, je l'avais mis sur cake 2 mais là, sur la version 3 je n'arrive pas à le faire fonctionner.

Pour résumer, j'ai récupéré les fichiers du plugin et j'ai rangé le .css, le .js et les .png dans mon dossier webroot.

Dans le layout j'appelle jQuery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Dans ma vue (où je veux utiliser chosen) , j'appelle le .css et le .js avec des helper :

<?= $this->Html->css('chosen'); ?> <?= $this->Html->script('chosen.jquery'); ?>

Puis à la suite, je mets le script qui va bien :

<script> $(".chosen-select").chosen() </script>

Lorsque je le faisais sur cakephp 2 cela fonctionnait, mais là ... quelque chose doit m'échapper !

Si mon erreur, saute aux yeux de quelqu'un ... qu'il hurle ! :D

5 réponses

Xeta, il y a 10 ans

Hello,
As tu vérifié que tes scripts étais bien importé dans ta page ?
(Si oui) As-tu vérifié que ton script ($(".chosen-select").chosen()) étais bien mis après le chargement de ta librairie ?
Hésite pas à faire un F12 et de regarder dans la console si tu as des erreurs.

mansaychai, il y a 10 ans

Aïe, effectivement le script ($(".chosen-select").chosen()) se charge avant jQuery.
J'ai mon $this->fetch->script() dans le layout, placé là où il faut. A priori, il faudrait donc que le script soit chargé à cet endroit.
J'ai essayé d'envoyer mon script comme dans l'exemple de la doc' mais je ne dois pas bien m'y prendre.

// ce que j'ai essayé <?php $this->Html->scriptStart(); echo '$(".chosen-select").chosen()'; $this->Html->scriptEnd(); ?>

D'ailleurs je viens de voir que rien ne passe dans mes $this->fetch-> ... Ni les css ni les js !
Par exemple, dans mon layout j'ai <?= $this->fetch('script'); ?> pour charger les js de mes vues.
Et dans ma vue, je fais, par exemple, <?php $this->Html->script('monfichier'); ?>.
C'est correct pourtant, non ?

mansaychai, il y a 10 ans

C'est ok, ça fonctionne !

Voilà le code complet pour l'utilisation de ce plugin.
Dans la vue :

<?php $this->Html->css('chosen', ['block' => true]); ?> <?= $this->Html->script('chosen.jquery', ['block' => true]); ?> <?php $this->Html->scriptStart(['block' => true]); ?> (function($){ $('select').chosen(); })(jQuery); <?php $this->Html->scriptEnd(); ?>

Dans le layout, en bas du body :

<?= $this->fetch('jquery'); ?> <?= $this->fetch('script'); ?>

Et effectivement, il faut faire attention à ce que le script s'effectue bien après le chargement de la librairie !
Merci pour le coup de main en tout cas !

mansaychai, il y a 10 ans

Héhé deux exemples valent mieux qu'un !
Superbe ressource qu'est ton dépôt en tout cas Xeta !