3

estou tentando fazer um portal de comentários, e por isso terá um input de texto em cada POST pras pessoas comentarem, esses POSTS serão na mesma página (estilo Facebook), assim como os inputs, que terão que ser dinâmicos.

Fiz essa função utilizando Jquery, porém não funciona, na hora de enviar apenas inicia a página novamente. Alguém me dá uma luz?

HTML:

    $(document).ready(function() {
    
        function enviarcomentario(id) {
    
            var iconCarregando = $('<img src="loading.gif" width="70" /> <span class="destaque">Carregando. Por favor aguarde...</span>');
            $('#formcomentario' + id).submit(function(e) {
    
                    if ($("#texto" + id).val() === '') {
    
                        $('#texto' + id).select();
                        return false;
                    } else {
    
                        e.preventDefault();
                        var serializeDados = $('#formcomentario' + id).serialize();
    
                        $.ajax({
                            url: 'acoes.php?enviarcomentario=1',
                            dataType: 'html',
                            type: 'POST',
                            data: serializeDados,
                            beforeSend: function() {
                                $('#statuscomentario' + id).html(iconCarregando);
                                $('#send' + id).attr('disabled', 'disabled'); //desabilito
                            },
    
                            complete: function() {
                                $(iconCarregando).remove();
                            },
    
                            success: function(data, textStatus) {
    
                                $('#send' + id).removeAttr('disabled'); //habilito
    
                                $('#texto' + id).val("");
    
                            },
                            error: function(xhr, er) {
                                $('#formcomentario' + id).html('<p class="destaque">Error ' + xhr.status + ' - ' + xhr.statusText + '<br />Tipo de erro: ' + er + '</p>');
                            }
    
                        });
    
                    }
                }
    
            );
        }
    });
<form action="" method="POST" id="formcomentario<?php echo $row['idd']; ?>">
        <img class="img-responsive img-circle img-sm" src="<?php if($user['imagem']) { ?>fotos/<?php echo $user['imagem']; } else { ?> estilos/img/sem-foto.png<?php } ?>" alt="Alt Text">
        <!-- .img-push is used to add margin to elements next to floating images -->
        <div class="img-push"><input type="hidden" name="idp" value="<?php echo $row['idd']; ?>">
            <input type="text" class="form-control input-sm" id="texto<?php echo $row['idd']; ?>" name="texto" placeholder="Escreva um comentário">
            <input type="submit" onclick="enviarcomentario(id)" style="display: none;"> 
    
            <div id="statuscomentario<?php echo $row['idd']; ?>"></div>
        </div>
    </form>

4
  • 1
    em que momento você esta executando a função: enviarcomentario(id)? Commented 27/10/2016 às 11:01
  • <input type="submit" onclick="enviarcomentario(id)" style="display: none;"> já tentei assim também e não vai Commented 27/10/2016 às 13:35
  • você precisa adicionar o eventlistner submit( antes de clicar e em enviar... retire ele de dentro dessa função e encontre outra forma de obter o ID que precisa, como num campo oculto ou atributo data ou action do formulário. Commented 27/10/2016 às 13:45
  • eu não sei fazer isso, eu já procurei no Google inteiro, e não entendi como faz Commented 27/10/2016 às 13:47

1 Resposta 1

2

Quando precisa trabalhar com multiplos elementos semelhantes e que usam a mesma função, prefira sempre usar class ao invés de ID, no seu caso seria algo mais ou menos assim: (analise também as modificações no html)

$(function() {

  $('.formcomentario').submit(function(e) {
    var form = $(this); // instancia exatamente o formulario a ser enviado na var form
    if ($("[name=texto]", form).val() === '') {

      $("[name=texto]", form).select();
      return false;
    } else {

      e.preventDefault();
      var serializeDados = form.serialize();
      var iconCarregando = $('<span class="destaque loading"><img src="loading.gif" width="70" />  Carregando. Por favor aguarde...</span>');

      $.ajax({
        url: form.attr("action"), // faça o form funcionar sem jquery e aqui use o mesmo action original
        dataType: 'html',
        type: 'POST',
        data: serializeDados,
        beforeSend: function() {
          $('.statuscomentario', form).html(iconCarregando);
          $('#send' + id).attr('disabled', 'disabled'); //desabilito // (não encontrei esse elemento)
        },

        complete: function() {
          $('.statuscomentario', form).html('');
        },

        success: function(data, textStatus) {

          $('#send' + id).removeAttr('disabled'); //habilito // (não encontrei esse elemento)

          $("[name=texto]", form);

        },
        error: function(xhr, er) {
          $(form).append('<p class="destaque">Error ' + xhr.status + ' - ' + xhr.statusText + '<br />Tipo de erro: ' + er + '</p>');
        }
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="acoes.php?enviarcomentario=1" method="POST" class="formcomentario">
  <img class="img-responsive img-circle img-sm" src="<?php if($user['imagem']) { ?>fotos/<?php echo $user['imagem']; } else { ?> estilos/img/sem-foto.png<?php } ?>" alt="Alt Text">
  <!-- .img-push is used to add margin to elements next to floating images -->
  <div class="img-push">
    <input type="hidden" name="idp" value="<?php echo $row['idd']; ?>">
    <input type="text" class="form-control input-sm" name="texto" placeholder="Escreva um comentário">
    <input type="submit" style="display: none;">

    <div class="statuscomentario"></div>
  </div>
</form>

5
  • Muito obrigado, mas ele só fica no carregando, como faço pra recuperar o id do post na hora que eu envio? Commented 27/10/2016 às 14:24
  • Já entendi como recuperar o POST através do input que está hidden, só não entendi por que fica carregando e não vai Commented 27/10/2016 às 14:37
  • Uncaught ReferenceError: id is not defined(…) Commented 27/10/2016 às 14:38
  • ja achei o erro, era por que eu tava fazendo o negócio do submit errado, agora só ta enviando tudo certo, vc é um gênio, só falta descobrir pq não ta apagando o input Commented 27/10/2016 às 14:47
  • consegui, faltava o val(""); no $("[name=texto]", form) – Commented 27/10/2016 às 14:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .