Cakephp 3 et plugin jquery chosen

mansaychai
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

mansaychai
Auteur
Réponse acceptée

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 !

Xeta

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
Auteur

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 ?

Xeta

Pour le JS :
Layout : https://github.com/Xety/Xeta/blob/master/src/Template/Layout/default.ctp#L54
View : https://github.com/Xety/Xeta/blob/master/src/Template/Blog/article.ctp#L7-L35

Pour le CSS :
Layout : https://github.com/Xety/Xeta/blob/master/src/Template/Layout/error.ctp#L29
View : https://github.com/Xety/Xeta/blob/master/src/Template/Error/error400.ctp#L21-L23

mansaychai
Auteur

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