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.