1

Tenho esse trecho de JavaScript/jQuery onde possuo um textarea oculta e um href. A intenção é ao clicar no href a textarea apareça para que a pessoa possa digitar sua resposta.

Não estou conseguindo abrir a textarea no href correspondente.

Ao clicar em um href, ele abre de todas as perguntas.

<script>
$(document).ready(function() {

    $.ajax({
        type:'post',        
        dataType:'json',    
        url: 'listAllForum',
        success: function(dados){
            for(var i = 0; dados.length > i; i++){
                $('#post-forum').append('<div>' + dados[i].idForum + ' - ' + dados[i].message + '</div>' +
                    '<div class="respostas" data-respostaId=' + dados[i].idForum + '>' +
                        '<textarea rows=6 cols=95 class="res" value="" name="dados" style="display:none;"/> <br>' +
                        '<a href="#" id="resp" class="resposta">Responder</a>' +
                    '</div> <br> <br>');


            }
        }
    });

    $(document).on('click', '.respostas', function (event) {
        var idPergunta = $(this).attr('data-respostaId');
        $('.res').show();
        $.ajax({
            type:'post',
            dataType:'json',
            url:'saveAnswer',
            success: function(resposta){

            }
        });
        event.preventDefault();
    });
});

1
  • E o código, cadê??
    – Aline
    Commented 9/05/2017 às 23:59

2 Respostas 2

2

Você tem várias divs com a classe ".respostas", e está criando um eventListener para todos os elementos com a classe ".respostas", então sempre que clicar em qualquer dessas divs, a função será executada.

E o que sua função faz é pegar todos os elementos com a classe ".res" e dar um .show() neles, ou seja, todas as suas textarea, pois todas tem essa classe.

Por isso todas aparecem sempre que você clica em qualquer um delas.

Eu sugeriria que você faça algo desse tipo:

$(document).ready(function() {

$.ajax({
    type:'post',        
    dataType:'json',    
    url: 'listAllForum',
    success: function(dados){
        for(var i = 0; dados.length > i; i++){
            var newElement = $('<div class="respostas" data-respostaId=' + dados[i].idForum + '>' +
                '<textarea rows=6 cols=95 class="res" value="" name="dados" style="display:none;"/> <br>' +
                '<a href="#" id="resp" class="resposta">Responder</a>' +
            '</div> <br> <br>');

            newElement.on('click', function (event) {
                var idPergunta = $(this).attr('data-respostaId');
                $(this).find('.res').show();
                $.ajax({
                    type:'post',
                    dataType:'json',
                    url:'saveAnswer',
                    success: function(resposta){

                    }
                });
                event.preventDefault();
            });

            $('#post-forum').append('<div>' + dados[i].idForum + ' - ' + dados[i].message + '</div>', newElement);


        }
    }
});
});

O que estou fazendo nesse código é criar um novo objeto jQuery dentro do for, contendo o código da div ".respostas" a ser criada, e usando esse elemento para criar um eventListener de click específico para ele. Assim, quando cada div ".respostas" for clicada, ela só vai chamar a sua função correspondente.

E dentro da função do listener, eu uso o método .find() do jQuery para buscar apenas dentre os descendentes desse elemento aquele que tem a classe ".res", e dar um .show() nele. Assim só o textarea certo irá aparecer.

0

Você esta chamando o show() na class ".res" isso faz com que todos os textareas com esta classe seja exibidos.

Tente isso:

<script>
$(document).ready(function() {

    $.ajax({
        type:'post',        
        dataType:'json',    
        url: 'listAllForum',
        success: function(dados){
            for(var i = 0; dados.length > i; i++){
                $('#post-forum').append('<div>' + dados[i].idForum + ' - ' + dados[i].message + '</div>' +
                    '<div class="respostas" data-respostaId=' + dados[i].idForum + '>' +
                        '<textarea rows=6 cols=95 class="res-'+ dados[i].idForum +'" value="" name="dados" style="display:none;"/> <br>' +
                        '<a href="#" id="resp" class="resposta">Responder</a>' +
                    '</div> <br> <br>');


            }
        }
    });

    $(document).on('click', '.respostas', function (event) {
        var idPergunta = $(this).attr('data-respostaId');
        $('.res-'+ idPergunta).show();
        $.ajax({
            type:'post',
            dataType:'json',
            url:'saveAnswer',
            success: function(resposta){

            }
        });
        event.preventDefault();
    });
});

Adicionei o "dados[i].idForum" junto a classe, assim no show você pode diferenciar individualmente cada textarea.

1
  • Obrigado pela ajuda de vcs. Consegui resolver utilizando a orientação do luislhl. Valeu.
    – Fernando
    Commented 10/05/2017 às 1:16

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 .