Show textarea corresponding to href

Question

I have this piece of Javascript/jQuery where I have a textarea hidden and a href. The intention is to click on href to textarea appear so the person can type in his or her answer.

I’m having trouble opening the textarea in the href correspondent.

By clicking on a href, he opens all the questions.

<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();
    });
});

Answer 1

You have several Ivs with the class ". answers", and are creating an eventListener for all elements with the class ". answers", then whenever you click any of these Ivs, the function will be executed.

And what its function does is to take all the elements with the class ". res" and give one . show() in them, ie all their textarea, as they all have this class.

That’s why they all appear whenever you click on any of them.

I would suggest you do something like that:

$(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);


        }
    }
});
});

What I’m doing in this code is creating a new jQuery object inside the for, containing the div code ". answers" to be created, and using this element to create a click eventListener specific to it. So when each div ". answers" is clicked, it will only call its corresponding function.

And within the function of the Listener, I use the . find() method of jQuery to seek only among the descendants of that element that has the class ". res", and give a . show() on it. So only the right textarea will appear.

Answer 2

You are calling the show() in class ". res" this causes all textareas with this class to be displayed.

Try this:

<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();
    });
});

I added the "data[i]. idForum" next to the class, so in the show you can individually differentiate each textarea.