Vous êtes ici

Block title

i class="icon icon icon search" aria-hidden="true"> Recherche

Block content
Block title
Block content

Comment interagir avec le module Rate (Drupal) lorsqu'un vote est effectué par un utilisateur ?

Utilisation des événements/hooks (JavaScript) eventBeforeRate et eventAfterRate du module "Rate"

Valable pour: 
CMS :Drupal
(CMS > Drupal)
Date de publication: 
ven, 06/06/2014 - 18:02
Dernière modification: 
ven, 08/29/2014 - 02:42
Auteur: 
david

Le module "Rate" est un incontournable en ce qui concerne la gestion des notations de contenu (node) sous Drupal et permet l'intégration de widgets prédéfinis comme le fameux fivestars (5 étoiles), les boutons up/down (haut/bas), yes/no (oui/non) ou encore le simple "like", le tout avec de belles requêtes Ajax. Le module Rate s'interface avec le module Voting API et est disponible en version stable depuis un bon moment.

Ce module effectuant des requêtes Ajax, il est courant de devoir effectuer des actions particulières en JavaScript lorsqu'un utilisateur vote/note un contenu, comme par exemple afficher/masquer un élément voir même de réutiliser le résultat du vote (après re-calcul et prise en compte du vote de l'utilisateur)...

Le code ci-dessous illustre la fonction du module Rate exécutée lorsqu'un utilisateur effectue un vote, le module utilise la fonction "trigger" de Jquery afin de rendre disponible deux événements (hooks) exécutés respectivement avants et après que la requête (Ajax) ne soit effectuée.

rate.js :
Drupal.rateVote = function(widget, data, token) {
    // Invoke JavaScript hook.
    widget.trigger('eventBeforeRate', [data]);

    $(".rate-info", widget).text(Drupal.t('Saving vote...'));

    // Random number to prevent caching, see http://drupal.org/node/1042216#comment-4046618
    var random = Math.floor(Math.random() * 99999);

    var q = Drupal.settings.rate.basePath.match(/\?/) ? '&' : '?' + 'widget_id=' + data.widget_id + '&content_type=' + data.content_type + '&content_id=' + data.content_id + '&widget_mode=' + data.widget_mode + '&token=' + token + '&destination=' + encodeURIComponent(Drupal.settings.rate.destination) + '&r=' + random;
    if (data.value) {
      q = q + '&value=' + data.value;
    }

    $.get(Drupal.settings.rate.basePath + q, function(data) {
      if (data.match(/^https?\:\/\/[^\/]+\/(.*)$/)) {
        // We got a redirect.
        document.location = data;
      }
      else {
        // get parent object
        var p = widget.parent();

        // Invoke JavaScript hook.
        widget.trigger('eventAfterRate', [data]);

        widget.before(data);

        // remove widget
        widget.remove();
        widget = undefined;

        Drupal.attachBehaviors(p.get(0));
      }
    });

    return false;
  }

Ces deux hooks vont nous permettre d’interagir directement lorsque un vote est effectué.

Interagir AVANT que la requête ne soit exécutée (vote non pris en compte, re-calcul on effectué) :

$(document).bind('eventBeforeRate', function(event, data){
    // Mon code ici
});

Interagir APRES que la requête soit exécutée (vote pris en compte, re-calcul effectué) :

$(document).bind('eventAfterRate', function(event, data){
    // Mon code ici
});

Exemple complet (example.js) :

L'exemple ci-dessous afficher un message à l'utilisateur avec lorsqu'un vote est effectué et correctement pris en compte.

// fichier example.js
(function ($) {
  Drupal.behaviors.webpreprodexample = {
    attach: function (context, settings) {
      if('object' == typeof(context) && context instanceof Document){
         $(document).bind('eventAfterRate', function(event, data){
            alert('Merci pour votre contribution ! Votre note pour cet article à bien été pris en compte.');
        });
      }
    }
  };
})(jQuery);

 

JavaScript jQuery Rate Voting API Drupal trigger event

Ressources en ligne: 
Fichier "rate.js" du module Rate de Drupal (Repo)
http://cgit.drupalcode.org/rate/tree/rate.js
Get the vote value in the JS hook eventAfterRate
https://www.drupal.org/node/1768702
Page du projet (module) Rate
https://www.drupal.org/project/rate

Récupérer la valeur (résultat) du widget après le vote de l'utilisateur (re-calcul effectué)

aucun commentaire | 0 vote

Drupal 7Rate 7.x-1.7
Beginner
+1 0 -1
Vous n'avez pas voté...
Récupérer la valeur (résultat) du widget après le vote de l'utilisateur (re-calcul effectué)
Solution publiée le 08/29/2014 - 00:36 par david, dernière modification il y a 2 années 10 mois.

L'exemple suivant exécute une fonction affichant un message d'alerte à l'utilisateur lorsque son vote à été pris en compte (enregistré). La fonction est exécutée APRES l’exécution de la requête Ajax et utilise l’événement "eventAfterRate" fourni par le module Rate de Drupal.

Nous pourrions effectuer une nouvelle requête Ajax afni de récupérer la valeur du vote, mais plus simplement et en évitant une requête, nous pouvons récupérer la nouvelle valeur du vote affichée ; valeur que le module modifie automatiquement lors du retour de la requête Ajax.

Cependant, l’événement est déclenché avant que la nouvelle valeur soit mise à jour dans le DOM, nous devons donc attendre (quelques centièmes de millisecondes) que le DOM soit modifié par le module afin de pouvoir y récupérer cette nouvelle valeur. Dans notre exemple, la valeur du vote est affichée dans un élément SPAN avec comme classe CSS "rate-number-up-down-rating".

Exemple, code complet :

// example.js
(function ($) {
  // specific site  
  Drupal.behaviors.webpreprodexample = {
    attach: function (context, settings) {
      if('object' == typeof(context) && context instanceof Document){
         // rating
         $(document).bind('eventAfterRate', function(event, data){
            setTimeout(function(){
                  var rating_result_element = $('.rate-node-' + data.content_id + '-' + data.widget_id + '-' + data.widget_mode + ' .rate-number-up-down-rating');
                  if(rating_result_element.length > 0){
                      return;
                  }

                  var rating_result = parseInt(rating_result_element.text());// attention, selon le widget utilisé, le résultat peut être une chaîne de caractères...
                  alert('Merci pour d\'avoir évaluer cet article ! Votre note : ' + rating_result);
            }, 1000);
        });
      }
    }
  };
})(jQuery);

 

Liens (0)

Fichiers (0)

Pas de fichiers...

Commentaires (0)