Pergunta

Problema: Eu tenho uma página comentário com cada caixa de comentário ter um botão de 'responder'. Agora os botões de resposta têm um jquery clique vivo de ligação com os que quando acionado cargas comentário formulário apropriado via ajax. Além dos campos habituais, cada forma contém uma entrada captcha também. Depois que os submete o formulário com sucesso (ou não), eu atualizar o captcha, assim:

// submit triggered and form serialized
$.ajax({
 type: 'POST',
 url: myaction,
 data: serializedForm,
 cache: false,
 success: function(data, status) {
    //checks errors from server
    $servererr = $(data).find('.error_list');
    if($servererr.length === 0)
    {
      //flash success message...
      //refresh captcha
      $thisform.find('.captcha_img_refresh').trigger('click.refresh');
    }
    else {
       //flash the server errors and then refresh captcha         
      $thisform.find('.captcha_img_refresh').trigger('click.refresh');
    }
});

Agora eu tenho 2 comentário formas frescos (F1 e F2) abertos na mesma página (tendo 2 ações diferentes, digamos / post / f1 e pós / F2 respectivamente). Submeto f1 e sem erros relatados. Então eu ir para o segundo formulário e inserir todos os detalhes válidos e ele lança erro captcha do servidor (para que a declaração ajax pessoa acima executa). mostra Firebug:

> //for first form
> POST http://mysite.com/post/f1 302 Found 111ms
> GET http://mysite.com/post/f1 200 OK 600ms
> 
> //for 2nd form
> POST http://mysite.com/post/f2 200 OK 800ms

Por que isso acontece? Tudo o resto parece bem (há também nenhum problema envio de formulários com o javascript desligado).

Form HTML:

<form id="comment-form-<unique-number>" class="comment-form-new" action="/post/<separate-action>" method="post" style="">
 <p>Leave a comment:</p>
   <ul>
    <li>
     <textarea rows="10" cols="71" name="myform[text]" id="myform_text"></textarea></li>
    <li>
     <label for="myform_username">Name (required)</label>
     <input type="text" name="myform[username]" value="Anonymous" id="myform_username" /></li>
   <li>
      <label for="myform_email">Email (required)</label>
      <input type="text" name="myform[email]" value="" id="myform_email" />
   </li>

   <li>
    <label for="myform_captcha">Please enter code shown below:</label>
     <input type="text" name="myform[captcha]" id="myform_captcha" />
   </li>
   <li>
     <img id="captcha_img" src="/mysite/captcha/126263" alt="Captcha Image">
     <!-- this refreshes captcha -->
     <a class="captcha_img_refresh" id="captcha_img_refresh"><img src="/images/reload_original.png" /></a>
   </li>
   <input type="hidden" name="myform[comment_id]" value="10" id="myform_comment_id" />
   <li>
     <input type="submit" value="Submit" id="comment-form-submit" />
   </li>
</ul>

Outros detalhes: Após cada formulário de comentário cargas, eu faço normais submeter ligação (não ao vivo de ligação) sobre ele. Os valores para cada formulário estão sendo serializado e enviado como digitou nos campos que se pode confirmar por meio de registros de console. Eu estou usando a biblioteca Cryptographp ( http://www.captcha.fr/ ) para captchas.

A Solução: Se eu atualizar todos os captchas sobre todas as formas na página depois de submeter qualquer forma um, alguns captchas mostrar imagens de erro que pode, naturalmente, ser corrigidos pelo usuário clicando no botão Atualizar botão novamente. Mas eu estou procurando algo diferente do que esta solução alternativa.

Foi útil?

Solução

Ok ... Eu fiz mais alguns testes e aqui está o que eu acho que está acontecendo (posso estar errado também): o link da imagem captcha, que é algo como: / mysite / captcha / (um número aleatório) , é provavelmente gerado uma vez no servidor para cada formulário. Quando eu carregar f1 e f2, um link captcha para F2 é armazenado no backend que basicamente anula ligação captcha F1. Por isso, se eu enviar f1 (que ainda está em aberto), o captcha falha. Então eu acho que eu poderia tentar (em frontend):

  1. Permitindo apenas um formulário de resposta em um momento
  2. Cache o link captcha e usá-lo novamente para a imagem regenerado quando o usuário se concentra no formulário correspondente
  3. Use a solução alternativa mencionada acima

Existe uma maneira de back-end para resolver isso?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top