0

Tenho essa requisição ajax que trás comentários de um arquivo (.php) JUNTO COM UM FORM NO FIM para inserir mais comentários:

//carregar comentarios 
  $(document).on('click','#carregar-comentario',function(){

    var id = $(this).attr("value");
    var retorno = $('#mostrar-comentario'+id+'');

      $.ajax({
          type: "GET",
              url: 'carregar-comentario.php',
               data: "id="+id,

        success: function(resposta) {
          retorno.fadeIn("fast").html(resposta);
              },
        beforeSend: function(){
          retorno.fadeIn("fast").html('<div>Corrigindo...</div>');
        },
        error: function(data) {
          retorno.fadeIn("fast").html('Erro ao corrigir!');
              }
          });

      return false;

  });

E esse que cadastra um novo comentário que veio junto a lista de comentários da requisição anterior.

//cadastrar comentario 
  $(document).on('click','#cadastrar-comentario',function(){

    var id = $('#id').attr("value");
    var id_usuario = $('#id_usuario').attr("value");
    var comentario = $('#comentario').val();
    var retorno = $('#mostrar-comentario-usuario'+id+'');

      $.ajax({
          type: "GET",
              url: 'cadastrar-comentario.php',
               data: "id="+id+"&id_usuario="+id_usuario+"&comentario="+comentario+"",

        success: function(resposta) {

          retorno.fadeIn("fast").html(resposta);


              },
        beforeSend: function(){
          retorno.fadeIn("fast").html('<div>Cadastrando...</div>');
        },
        error: function(data) {
          retorno.fadeIn("fast").html('Erro ao cadastrar!');
              }
          });

      return false;
  });

Como faço para que ao executar a segunda requisição (o cadastro), esse novo comentário seja exibido junto com os outros automaticamente? Existe alguma forma de aproveitar a primeira requisição inserindo algo no success da segunda requisição? Essa seria a melhor forma?

1 Resposta 1

0

Tem várias formas de fazer isso; uma delas é usando .append()

Dessa forma a UI é processada toda no cliente sem precisar de data-driven , entretanto, caso o cadastro retorne falso, é necessário deletar o elemento.

Exemplo:

$( "#cadastrar" ).submit(function( event ) {
  event.preventDefault();
  valor = $('#item').val();
  $('#minhalista').append('<li>'+valor+'</li>');
  $('#item').val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="minhalista">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<form id="cadastrar">
  <input type="text" id="item" />
  <button>Cadastrar</button>
 </form>

Espero que ajude

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 .