Intégrer plugin jquery ui spinner à webform

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by besky on

Bonjour !

Je souhaiterais intégrer jquery ui spinner dans mes formulaires Webform pour bénéficier de cette fabuleuse avancé qu'a fait HTMl5 sur les champs "number" sur ces vilains navigateurs que sont Ie, firefox et safari qui n'ont pas intégrés cette fonctionnalité pourtant sympa.

J'ai donc essayé de m'y atteler n'étant pas très a l’aise coté développement javascript encore moins sur drupal. Et après plusieurs heures d'espoir puis d'incompréhension suite à mes échecs successifs et maintenant d'agacement étant donné que il faut bien l'admettre je patauge un peu dans la semoule, je vous demande un petit coup de main.

Ajouter cette petite fonctionnalité toute simple ne me parait pourtant pas si compliqué mais je doit louper quelque chose.

J'ai donc mes champs "number" avec une classe "spinner" et mon problème étant que apparemment je ne dois pas bien intégrer le plugin dans le "head" enfin je suppose car je n'ai absolument aucun résultat.

J'ai suivi les instructions de cette page https://github.com/btburnett3/jquery.ui.spinner dans le "readme" et pourtant rien n'y fait. Pourtant "Stepper field" permet de l'utiliser sur "CCK" http://www.drupal.org/project/field_stepper . Il utilise la même librairie et ça fonctionne.

Bref auriez-vous des conseils à me donner pour réussir à faire ce que je veux s'il vous plais ?

Cordialement,
Besky.

Forum : 
Développement
Version de Drupal : 
7.x
Tags : 
webform
jquery
spinner
jquery ui
jquery ui spinner
number
plugin

Soumis par besky le 7 Décembre, 2012 - 19:08

Personne pour m'aider un petit peu ?

Je résume ma demande:

Je souhaiterais ajouter à mes champs "number" de mon formulaire des petits + et - pour incrémenter ou décrémenter la valeur du champ lorsqu'on clique sur le + ou le - donc pour cela je souhaiterais utiliser le plugin "jquery.ui.spinner" mais je n'arrive pas à l'intégrer à mon site et donc à faire que ça ajoute le code nécessaire à mon champ "number".

Je ne demande pas que vous me fassiez un code tout fait bien entendu je voudrais juste savoir si vous avez un principe de base pour ajouter un plugin jquery.ui à une page Drupal 7.

Merci d'avance.

Soumis par besky le 7 Décembre, 2012 - 20:14

Je vais essayer d'expliquer ce que je fais au fur et à mesure.

J'ai donc plusieurs fichiers:

  • ui.spinner.js | Le code du plugin jquery dans sa version normale
  • ui.spinner.min.js | Le même code mais en mode réduit
  • ui.spinner.css | Le code CSS du plugin

Mon champ "input" de type "number" contient la classe "spinner".

Dans un premier temps j'upload mon fichier "ui.spinner.min.js" dans le dossier "js" de mon thème.

Le fichier "ui.spinner.css" je le place dans mon dossier "CSS".

J'édite le fichier ".info" de mon thème avec:

scripts[] = js/ui.spinner.min.js

stylesheets[all][] = css/ui.spinner.css

Puis je place un fichier "script.js" dans le dossier "js" avec dedans:

jQuery(document).ready(function($) {
$('.spinner').spinner();
});

Et j'ajoute donc dans mon fichier ".info" une ligne:

scripts[] = js/script.js

Je vide le cache de mon site et je vérifie que tous les fichiers sont bien inclus dans le code, ce qui est effectivement le cas. Cependant mon champ lui n'a pas bougé d'un yota, pas de "span" à coté comme cela devrait être le cas.

Qu'ais-je loupé ? :/

Soumis par Silvus le 7 Décembre, 2012 - 22:52

Je ne connais pas ce plugin, mais dit comme ça, ton problème pourrait venir de la version de jQuery UI sur ton site non ? As tu installé jQuery Update ? (http://drupal.org/project/jquery_update).

Aussi, déclarer du jQuery dans Drupal doit être fait de manière particulière, je te recommande la lecture de ce mini-tuto de Lektum : http://www.lektum.com/fr/blog/utiliser-jquery-avec-drupal-7 .

Soumis par besky le 8 Décembre, 2012 - 02:00

Merci de ta réponse Silvus,

J'ai bien jquery update d'installé, à ce niveau la c'est bon par contre niveau des version de jquery ui les nouvelles version sont rétrocompatibles ?

Je vais aller voir ça.

Merci encore :)

Édit: J'ai bien respecté ce qui est dit sur lektum. Cependant cela ne fonctionne pas mieux. J'ai tout de même pu observer quelque chose.

Quand je met:

$('.spinner').hide();

dans mon "script.js", les champs avec la classe "spinner" disparaissent bien. Donc mon problème ne viendrait donc pas de ce fichier mais d'autre part.

Y a t-il quelque chose à insérer dans les fichier tpl.php de mon thème pour que mon javascript fonctionne ?

Soumis par Silvus le 8 Décembre, 2012 - 14:01

Je ne comprends pas bien ta question sur la rétrocompatibilité. Ton plugin a besoin de jQuery UI 1.8, si le module Drupal jQuery update est activé, tu dois avoir la version 1.8.11, ce qui devrait être bon pour le faire fonctionner.

La classe "spinner" est bien présente sur tes éléments ? Si le .hide() fonctionne, je suppose que oui.

Que ta raconte la console Firebug ? C'est ce qui se fait de mieux pour débugger ce genre de cas... Si il te parle de "..... is not a function", tu peux essayer de placer ton code js sans document ready :

(function ($) {
  // JavaScript code.
})(jQuery);

Pour savoir si ton problème vient de ta manière de déclarer du jQuery dans Drupal, tu peux également faire le test suivant (ne laisse pas ça en production, c'est vraiment sale) :
- Installe jQuery UI manuellement : /js/jqueryui.js
- Dans ton fichier html.tpl.php, déclare à la bourrin jquery et ui.spinner.js ("éventuellement, spinner.css également):

- Ajoute ton code jQuery sans le (document).ready :
$('.spinner').spinner();

Soumis par besky le 8 Décembre, 2012 - 15:52

Je n'avais pas vu ta réponse avant mon dernier commentaire.

Ok pour jQuery ui 1.8.

La classe .spinner est bien présente je confirme.

J'ai désinstallé firebug car il me faisait planter firefox mais j'ai une autre console d'erreur qui me donne les erreurs que j'ai indiqué dans mon dernier commentaire.

Je vais essayer de faire la méthode "sale" et je te tiens au courant.

Merci de ton aide.

Soumis par besky le 8 Décembre, 2012 - 14:44

Apparemment je reçois des erreurs dans ma console d'erreurs:

Erreur : TypeError: $(".spinner").spinner is not a function (dans le fichier script.js de mon thème)
TypeError: j.widget is not a function (dans le fichier du plugin que j'ai téléchargé)

Je me suis donc dit que peut-être la version de jquery ui ne comportait pas cette fonction et me suis mis en tête d'installer la toute dernière version du CDN Google.

j'ajoute donc dans le head:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Pas de grand changement si ce n'est une erreur de plus qui me dit:

Error: jQuery is not defined

Je vais devenir chèvre ^^ à chaque fois que je crois avoir trouvé un début de solution ça me rajoute des problèmes lol.

Aidez moi s'il vous plait !

Soumis par besky le 8 Décembre, 2012 - 16:38

J'ai donc essayé la méthode "sale"

Voici ce que j'ai fais dans le détail:

J'ai ajouté ce code:

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../js/ui.spinner.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
   <script type="text/javascript" src="../js/ui.spinner.js"></script>

Bien entendu mes fichiers sont bien à l'emplacement indiqué et j'ai enlevé le "$(document).ready(function() {" comme tu indiquais mais j'obtiens toujours cette erreur:

TypeError: $(".spinner").spinner is not a function

Par contre les erreurs "jquery is not defined" et "j.widjet is not a function" n’apparaissent plus.

Disons qu'il y a du progres mais que pour je ne sais quelle raison ca ne fonctionne toujours pas.

Tu aura remarqué que je n'ai pas installé jsquery ui manuellement comme tu le préconisait car je n'était pas bien certain de quelle manière m'y prendre. Je me suis donc rabattus sur la technique employés sur les exemples fournis, qui soit dit en passant fonctionnent eux.

Qu'ai-je fais de mal ?

Soumis par besky le 8 Décembre, 2012 - 18:21

Tadam !

Un petit pas pour l'homme mais une grande satisfaction pour moi, je suis arrivé à un résultat en suivant cet exemple: http://api.jqueryui.com/spinner/#entry-examples sur la doc officielle du plugin spinner.

Et je pense savoir ou est mon erreur.

Je résume:

J'ai donc insérer dans "html.tpl.php" dans le "head":

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Comme c'était fait dans l'exemple.

Ensuite j'ai ajouté à la fin de ma page "html.tpl.php" juste avant le body:

<script>
$( ".spinner" ).spinner();
</script>

Et la c'est merveilleux car cela fonctionne !

Je pense que simplement il fallait que j'appel la fonction à la toute fin de la page pour que ça fonctionne et que c'est pour ça que ça me retournait une erreur "is not a function" qu'en pensez-vous ?

Ceci-dit lorsque j'enlève soit la ligne pour déclarer jquery ou celle pour déclarer jquery.ui ça ne fonctionne plus, donc il y aurait tout de même un problème de version peut-être ?

Maintenant je ne sais pas si c'est bien "propre" comme manière de faire. Si vous avez des suggestions pour rendre tout ça plus correct je suis ouvert à toute proposition.

Merci encore de ton aide Silvus !

Soumis par Silvus le 8 Décembre, 2012 - 21:13

Je t'en prie... Par contre ce n'est pas la bonne méthode, en faisait cela tu charges deux fois jQuery : Une fois via Drupal, une fois manuellement. C'est pour ça que je qualifie cette méthode de "sale". L'exemple que tu as suivi fonctionne évidemment, mais n'est pas fait pour être appliqué dans Drupal.

Les erreurs de type "TypeError: $(".spinner").spinner is not a function" , si je ne me trompe pas, sont liés à la manière de faire passer ton code javascript dans Drupal. Le fait que le test fonctionne me conforte dans cette idée.

Du coup, à ta place, je tenterai de remettre les choses comme à l'origine (virer les includes manuels de js, redéclarer spinner dans le .info de ton thème, etc...) et je ne jouerai que sur la manière d'encadrer ton code dans script.js.

Théoriquement, ça devrait marcher :

(function ($) {
  $( ".spinner" ).spinner();
})(jQuery);

Je vais avoir du mal à t'aider d'avantage mais de ce que j'en sais, pour que ton code passe par le jQuery proposé par Drupal tu dois redéclarer la fonction $. Et quand le hide() marchait mais pas ton code .spinner(), c'est que ce n'était pas le cas.

Si tu enlèves ta déclaration manuelle de jQuery, ton histoire ne marche plus puisque ton code n'est plus déclaré dans du jQuery, celui de Drupal nécessitant la manip' ci dessus... Je ne sais pas si je suis bien clair !

Le fait de faire appel à la fonction en fin de page ne devrait pas avoir d'incidence.

Soumis par besky le 10 Décembre, 2012 - 10:58

J'ai bien compris ce que tu m'explique, cependant en ayant tout remis à zéro, bien suivi les étapes que tu m'a indiqué et copié/collé ton code, cela ne fonctionne pas et je me retrouve toujours avec cette erreur:

TypeError: $.widget is not a function

Cependant l'autre n'a plus l'air d'apparaitre.

J'ai donc testé un truc:

J'ai téléchargé ce fameux plugin "widget" sur le site officiel de jquery.ui (http://jqueryui.com/download/) je l'ai donc inclus dans mon dossier "js" et dans le fichier ".info" pour qu'il soit chargé.

L'erreur n'apparait plus. Cependant mon spinner ne fonctionne pas plus qu'avant.

Edit:

Quand je déclare mon code:

(function ($) {
  $( ".form-number" ).spinner();
})(jQuery);

Directement dans la page "html.tpl.php" j'ai un résultat. Il manque uniquement le CSS nécessaire au bon affichage du visuel. Sinon la balise "span" s'ajoute bien après mon input.

Soumis par besky le 20 Janvier, 2013 - 18:21

Pour information je n'ai toujours pas trouvé de solution durable à ce problème.

Si quelqu'un à un début de solution/réponse à mes ennuies je vous serais grés de bien vouloir m'en faire part.

Merci !