ajaxBox - Rating - Gerando sistema de votação com ajaxBox enviando por ajax
ajaxBox June 16th, 2007
Sistema de votação de estrelas estilo youtube, onde a pessoa passa o mouse sobre as estrelas e automaticamente as estrelas vão ser “marcadas” e após clicar na estrela o valor do voto é enviado por ajax para a página setada nos parametros.
Vamos trabalhar com 8 parametros, neste exemplo teremos todos os parametros suportados.
‘img-on’ :’http://www.ajaxbox.com.br/imagens/ico_estrela_cheia.gif’,
‘img-off’:'http://www.ajaxbox.com.br/imagens/ico_estrela_vazia.gif’,
‘voto-ini’:0,
‘voto-fim’:5,
‘url’:'http://www.ajaxbox.com.br/R/R.php’,
‘parametro’:'outro_paramentro=ajaxBox&numero_voto_selecionado’,
‘resposta’ :’Rating-Resposta’
img-on:
Recebe -> {String}
URL da imagem que será mostrada com “mouse-over”
img-off:
Recebe -> {String}
URL da imagem que será mostrada com “mouse-out”
voto-ini:
Recebe -> {Int}
Menor voto possivel +1. Isto é, valor sendo 0, o menor voto possivel será 1.
voto-fim:
Recebe -> {Int}
Maior voto porssivel.
url:
Recebe -> {String}
Url para onde a requisição será enviada
parametro:
Recebe -> {String}
Parametros que serão enviados por post na requisição ajax. O último parametro, sem sinal de igual será o parametro que enviará a quantidade de votos clicado
resposta:
Recebe -> {String}
Elemento que escreverá a resposta da requisição, na tela
div:
Recebe -> {String}
Elemento onde será montado as estrelas
Podemos também passar um parametro adicional ao carregar, que será o valor inicial ja marcado.
ajaxBox[’Start’]( 2 );
Neste caso passariamos que ao iniciar duas estrelas já estarão marcadas.
Montando código completo temos.
<script type=”text/javascript” src=”http://www.ajaxbox.com.br/js/prototype.js”></script>
<script type=”text/javascript” src=”http://www.ajaxbox.com.br/js/ajaxBox.js”></script>
<script type=”text/javascript” src=”http://www.ajaxbox.com.br/js/ajaxBox.Rating.js”></script>
<table>
<tr><td id=”Rating”></td></tr>
<tr><td id=”Rating-Resposta”></td></tr>
</table>
<script type=”text/javascript”>
ajaxBox.Rating( ‘Rating’,
{
‘img-on’ :’http://www.ajaxbox.com.br/imagens/ico_estrela_cheia.gif’,
‘img-off’:'http://www.ajaxbox.com.br/imagens/ico_estrela_vazia.gif’,‘voto-ini’:0,
‘voto-fim’:5,‘url’:'http://www.ajaxbox.com.br/R/R.php’,
‘parametro’:'outro_paramentro=ajaxBox&numero_voto_selecionado’,
‘resposta’ :’Rating-Resposta’
}
);
ajaxBox[’Start’]( 2 );
</script>
Para o funcionamento do ajaxBox[Rating] além do pacote ajaxBox você precisa do pacote ajaxBox[Rating]. Download
July 9th, 2007 at 12:44 am
Olá!
estou tentando implementar esse exemplo em um sisteminha ASP…
minha única dúvida é em como eu pego as informações na página onde a requisição é enviada…
vc poderia me mandar o arquivo http://www.ajaxbox.com.br/R/R.php para e dar uma olhada??
Agradeço a ajuda!
Excelente o script!
[]s
July 9th, 2007 at 8:52 am
Ola, de acordo com o exemplo, vc so precisa colocar
request(”outro_paramentro”)
e
request(”numero_voto_selecionado”)
note que isso foi configurado nesta linha do codigo
-> ‘parametro’:'outro_paramentro=ajaxBox&numero_voto_selecionado’,
numero_voto_selecionado
é o parametro que recebera o numero de votos, sem = sem nada, exatamente assm.
July 23rd, 2007 at 10:07 pm
Você tem alguma dica aonde eu posso pegar codigos em ajax, php e asp?
July 25th, 2007 at 3:13 pm
não entendo mt de ajax
ve se consegue o http://www.ajaxbox.com.br/R/R.php
pq assim não ta dando pra sabe como q pega as variáveis
flow
July 25th, 2007 at 3:20 pm
Israel
No arquivo http://www.ajaxbox.com.br/R/R.php tem-se apenas os dados para pegar os dados de GET ou POST, como explicado no segundo comentario.
No exemplo temos
-> ‘parametro’:’outro_paramentro=ajaxBox&numero_voto_selecionado’,
Então, para pegar os dados por PHP temos.
$_POST[’outro_paramentro’];
$_POST[’numero_voto_selecionado’];
No ASP temos
Request.Form(”outro_paramentro”)
Request.Form(”numero_voto_selecionado”)
Qualquer dúvida grita ae
November 8th, 2007 at 10:55 am
o codigo-fonte do arquivo PHP ficaria intãod esta forma
// ==UserScript==
// @name Show Password onMouseOver
// @namespace http://ie7pro.com/
// @include *
// @description Show password when mouseover on password field
// ==/UserScript==
(function() {
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj[”e”+type+fn] = fn;
obj[type+fn] = function() { obj[”e”+type+fn]( window.event ); }
obj.attachEvent( “on”+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( “on”+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
var valueDiv = null;
valueDiv = document.createElement(’div’);
valueDiv.style.cssText = “background:#FFFF00;color:#000000;width:120px;height:16px;display:none;position:absolute;top:0px;left:0px;”;
document.body.appendChild(valueDiv);
function input_onmouseover(e)
{
var elm = e.srcElement;
if(!elm) return;
var value = elm.value ? elm.value : ”;
if(value == ”) return;
valueDiv.innerHTML = value;
valueDiv.style.display = “block”;
valueDiv.style.top = e.y + ‘px’;
valueDiv.style.left = e.x + ‘px’;
}
function input_onmouseout(e)
{
var elm = e.srcElement;
if(!elm) return;
valueDiv.style.display = “none”;
}
var inputs, input;
inputs = document.getElementsByTagName(’input’);
if(inputs.length == 0) return;
for(var i = 0; i
November 28th, 2007 at 2:38 pm
como faço para colocar mais de um na mesma pagina, sem duplicar o codigo?
eu tenho um loop e em cada linha quero colocar as estrelas, entao quando ele passa pelo loop como fazer para ele escrever em todas?
December 11th, 2007 at 7:59 am
Poderia me mandar esse código e as biliotecas utilizadas, por favior
pq utilizo o xajax e gostei bastante deste exemplo, mas ainda não consegui entender ele todo.
Assim q puder me manda
Abraços
t+
January 13th, 2008 at 3:12 pm
Exelente artigo
March 8th, 2008 at 1:26 pm
por favor, quem puder me mande um exemplo disso, eu naum consegui fazer funcionar!!!
agradecido
meu e-mail fvr_sm@yahoo.com.br
Filipe Ricardo
April 10th, 2008 at 5:25 pm
como faço para colocar mais de um na mesma pagina, sem duplicar o codigo?
eu tenho um loop e em cada linha quero colocar as estrelas, entao quando ele passa pelo loop como fazer para ele escrever em todas?
July 1st, 2008 at 10:55 pm
É, aqui não ta dando de jeito nenhum, usando o asp. Já tentei capturar de tudo quanto é jeito os votos, mas não dá certo.
To usando esse arquivo html ai, com outro asp, no IIS 6.0.
Alguem que usa isso, ja conseguiu pra me ajudar ai?
Queria muito usar esse script, é muito bom mesmo.
Obrigado.