About / Feedback • Demo • Help / Download

Requirements

  • Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6, IE 7, IE 8 and Opera 9+
  • Requires mootools 1.23+ Core

Download

Download at Mootools Forge »

Comments? Problems? Feedback? Leave a comment »

⇧ top

Documentation

How does the plugin work?

The CwFeedback class handles an Ajax request and provides events which you can use to build interface elements for (not only) social networks like rating content, voting etc.

Use a HTML container element and put the different buttons (or other elements) inside. Each button corresponds to a value and is named container-id_value — see below for an example.

You then can use these events to handle your requirements:

onSelectInitially: function(el, value)

If you provide an initial value (for example the user rating from her last visit), this event is called with the selected HTML element and the selected value.

onRequestStarted: function()

Is called when the Ajax request started – use this to show a loading bar for example.

onSelect: function(el, value, response)

This event is called after the Ajax request has finished and provides the selected HTML element, the selected value and the response from Ajax as array.

onUnselect: function(el, value)

This event is called after the Ajax request has finished and if another value was selected before. It provides the HTML element and value of the previous selection.

onFeedbackDone: function(el, value, others)

If the voting is finished after user selection, this event is called providing the selected element, the value and an array of all other items = the items which were not selected.

HTML Code
<div id="myrating">
   <a id="myrating_1" onclick="rating.doVote(1, 'uid=xy&entry=abc')">Vote up</a>
   <a id="myrating_2" onclick="rating.doVote(2, 'uid=xy&entry=abc')">Vote down</a>
   <a id="myrating_3" onclick="rating.doVote(3, 'uid=xy&entry=abc')">Block</a>
</div>
Javascript Code
rating = new CwFeedback('myrating', {
   url: 'ajax.php',
   multipleVotes: false,
   possibleValues: [1,2,3],
   initialValue: 2,
    onSelectInitially: function(el, value) {
      el.hide();
   },
   onSelect: function(el, value, response) {
      el.dissolve();
   },
   onUnselect: function(el, value) {
      el.reveal();
   } 
});
Parameters
  • element: ID of the enclosing element
Options
  • url: ajax.php Ajax url – set to false if you don’t use ajax
  • ajaxMethod: get How to call the ajax script, via get or post
  • ajaxParam: search Name of the parameter which is sent to the ajax script
  • possibleValues: [1,2,3] Array of possible values
  • initialValue: (optional) Value of the selected item on initialization, set to false by default
  • multipleVotes: (optional) If set to false, the selection can be changed only once

    • The Ajax script has to deliver a JSON-formatted array (see below).

    Methods
    • doVote: function(newvalue, params): Call ajax with the new value and optional additional parameters
    • getValue: function(): Returns the currently select value
    Events
    • onSelectInitially: function(el, value) – Triggered if an element is already selected when loading
    • onRequestStarted: function() – Ajax request has started
    • onFail: function(errortext) – Ajax request has failed
    • onSelect: function(el, value, response) – An element was selected, response is the array via Ajax
    • onUnselect: function(el, value) – A previously selected element is now unselected
    • onFeedbackDone: function(el, value, others) – user has voted and no more votes possible
    Format of the ajax response

    The response is a JSON-encoded array, below an example script with a two-dimesional array — but you can use any dimension.

    $results = array(
       array('1','Okay, thanks'),
       array('2','Well done!'),
       array('99','Any random response'),
    );

    header('Content-type: application/json');
    echo json_encode($results[rand(0, count($results) - 1)]);