Error on Ajax request
Error on Ajax request
Could someone tell what's wrong with this code:
-
$('#submit_poll').click(function(){
var valida=$('#poll').validate({
rules: { opcao: "required" },
messages: { opcao: "Escolha uma das opções para votar" },
errorPlacement: function(error, element){
error.insertAfter("#ref");
}
}).form();
if(valida){
$('#enquete').append('<img src="images/loading.gif" alt="loading" id="loading" />');
var id_poll=$('#ref').val();
var opcao=$('.opcao').val();
$.ajax({
url: 'result.php',
type: 'POST',
data: 'ref=' id_poll + '&opcao=' opcao,
success: function(result){
$('#response').remove();
$('#form').append('<p id="response"><b>' + result + '</b></p>');
$('#loading').fadeOut(800, function(){
$(this).remove();
});
}
});
}
});
Firebug console shows this error:
-
missing } after property list
[Break on this error] data: 'ref=' id_poll + '&opcao=' opcao,\n
I just don't understand why the validation is not working and the request leads to another page, in this cage result.php. Isn't ajax request supposed to request a page without leaving the current one?
just to make sure you guys understand the question, this is the form:
-
<form method="POST" action="result.php" name="poll" id="poll">
<input type="hidden" name="ref" id="ref" value="{$idpoll}">
<table width="98%">
{section name='i' loop=$opcoes}
<tr><td height="20"><input type="radio" class="opcao" name="opcao" value="{$opcoes[i]}"></td><td class="opcao">{$opcoes[i]}</td></tr>
{/section}
</table>
<center style="margin-top: 10px;"><input type="submit" id="submit_poll" class="submit" value="Votar"> <input type="button" class="result" value="Resultados"></center>
</form>
I'd appreciate any help.