Here is described how to make ajaxed star rater. It can be easily implemented in CSS Star Rating (version 1. Not sure about v2 - it doesn’t work for me - same problem as afizikov described above).
Here is quick example of axajed CSS Star Rating in work.
You can ajaxify your rating in 2 easy steps:
1. Change your template so it looks like this:
<ul class='star-rating'>
<li id='current-rating' style='width:" . $width . "px;'>" . $_lang['current_1'] . $currentStarValue . $_lang['current_2'] . "</li>
<span id=" . $quote . "ratelinks" . $quote . ">
<li><a href='javascript:rate(1," . $docID . ")' title='" . $_lang['one_star'] . "' class='one-star'>1</a></li>
<li><a href='javascript:rate(2," . $docID . ")' title='" . $_lang['two_stars'] . "' class='two-stars'>2</a></li>
<li><a href='javascript:rate(3," . $docID . ")' title='" . $_lang['three_stars'] . "' class='three-stars'>3</a></li>
<li><a href='javascript:rate(4," . $docID . ")' title='" . $_lang['four_stars'] . "' class='four-stars'>4</a></li>
<li><a href='javascript:rate(5," . $docID . ")' title='" . $_lang['five_stars'] . "' class='five-stars'>5</a></li>
</span>
</ul>
<div id="ratingtext">Votes: [+totalVotes+]</div>
Last div can be span or smth else, doesn’t matter. Please note what i’ve changed class=’current-rating’ to id=’current-rating’, so you need to change your css file a little bit (.current-rating to #current-rating).
2. Next, we must have some ajax requests handler and "rate" function. You may use mootools, but me isn’t familiar with that framework, so I use plain js:
function datosServidor() {
};
datosServidor.prototype.iniciar = function() {
try {
// Mozilla / Safari
this._xh = new XMLHttpRequest();
} catch (e) {
// Explorer
var _ieModelos = new Array(
'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'
);
var success = false;
for (var i=0;i < _ieModelos.length && !success; i++) {
try {
this._xh = new ActiveXObject(_ieModelos[i]);
success = true;
} catch (e) {
// Implementar manejo de excepciones
}
}
if ( !success ) {
// Implementar manejo de excepciones, mientras alerta.
return false;
}
return true;
}
}
datosServidor.prototype.ocupado = function() {
estadoActual = this._xh.readyState;
return (estadoActual && (estadoActual < 4));
}
datosServidor.prototype.enviar = function(urlget,datos) {
if (!this._xh) {
this.iniciar();
}
if (!this.ocupado()) {
this._xh.open("GET",urlget,false);
this._xh.send(datos);
if (this._xh.readyState == 4 && this._xh.status == 200) {
return this._xh.responseText;
}
}
return false;
}
function rate(rating,pid) {
document.getElementById('ratelinks').style.display = 'none';
document.getElementById('ratingtext').innerHTML = 'Please wait...';
remotos = new datosServidor;
nt = remotos.enviar('?starvote='+rating+'&pid='+pid);
rating = rating * 25;
document.getElementById('current-rating').style.width = rating + 'px';
document.getElementById('ratingtext').innerHTML = 'Thanks for voting!';
}
Code is borrowed from the link above.
This is all what we need to be done in order to have nice ajaxed rating. It has one great advantage - links aren’t grabbed by search engines, so rating isn’t affected by non-humans. Add to this some economy in traffic and users time to load updated page.
Of course, there are some disadvantages:
1) Links are not accessible for visitors with JS turned off.
2) If request fails, user won’t know - he’ll see "Please wait..." message. This can be eliminated by adding fail handler.
There is also much more
sophisticated ajax rater to try use it with MODx.
Cheers
MODX Staff
(It’s actually my fault that it didn’t work to start with, this bug got reported earlier in the thread and I forgot to update the Repository package with the updated code - will do that now 
)
☆ A M B ☆
