ondblclick javascript event

1

I'm doing an application in JSP to ask and answer questions. I try to make a function to edit an answer, my idea is that the user double click on the answer to edit and the buttons to edit are displayed.

The function as such in JavaScript works, my problem is that to put all the answers published in that question I use a cycle and a list so when I click on answer 3 for example always activate the buttons of answer 1 and also take the values of question 1

It does not matter if I click on the second or third answer the buttons of answer 1 are always activated.

This is my code:

<%                     
ArrayList<Answer> Respuestas=DB.MostrarRespuestas(idPregunta); //lista de respuestas a la pregunta
ArrayList<Usuario> likes; //Almacena la lista de las personas a quienes les gusta una respuesta especifica                            
for(int i=0;i<Respuestas.size();i++) //ciclo para colocar todas las respuestas
{
    out.println("<div class=row>");//Div general

    out.println("<h5>"+Respuestas.get(i).getUser()+" answered :</h5>");//usuario que publico la respuesta
    out.println("<p>Date: "+Respuestas.get(i).getFecha()+"</p>");// fecha en que la publico

    out.println("<div class=col-md-1>");//Div foto de usuario
    out.println("<a href='../user/user.jsp?wiw="+Respuestas.get(i).getWiw()+"'><img src='../img/user/"+Respuestas.get(i).getWiw()+".png' class='img-circle img-responsive'></a>");//Imagen del usuario
    out.println("</div>");//Cierra Div foto de usuario


    out.println("<div class=col-md-1>");//Div Like

    out.println("<form  action='../Like' method='post'>");//formulario  like
    likes=DB.Usuarios_Liked(Respuestas.get(i).getIdAnswer());//Obtiene la lista de las personas a quienes les gusta la respuesta
    String habilitar="";//habilita o deshabilita el boton

    for(int j=0;j<likes.size();j++)//recorre toda la lista
        if(likes.get(j).getWiw().equals(user.getWiw()))//si el wiw del usaurio que accedio al sistema aparece en la lista
            habilitar="disabled"; //bloquea el boton like

    out.println("<button type='submit' class='btn btn-primary' disable='true' "+habilitar+" >");//boton de like                                                    
    out.println("<center><i class='fa fa-thumbs-up' aria-hidden='true'></i>  Like "+likes.size()+"<center>");//numero de likes que tiene la respuesta                                                    
    out.println("</button>");

    out.println("<input type='hidden' name='idAnswer' value="+Respuestas.get(i).getIdAnswer()+">");//id de la respuesta a l que se le dio like (oculto)
    out.println("<input type='hidden' name='wiw' value="+user.getWiw()+">");//wiw del usuario que le dio like(oculto)                                                
    out.println("<center><a href='#' data-toggle='modal' data-target='#myModal' style='font-size:100%' >Ver</a></center>");//despliega la lista de personas a quienes les gusta la respuesta                                                                                                                                            
    out.println("<input type='hidden' name='idQuestion' value="+idPregunta+">");//id de la pregunta a la que pertenece la respueta (oculto)
    out.println("</form>");//Cierra formulario  like
    out.println("</div>");// Cierra Div Like


    out.println("<div class='col-md-9'>");//Div texto respuesta                                                                                
    out.println("<textarea style='margin-bottom:25px' class='form-control' readonly='true' id='comentario' ondblclick='EditQuestion()'>");                                    
    String texto=Respuestas.get(i).getText();
    out.println(texto);
    out.print("</textarea>");                                                                                                                                                           
    out.println("</div>");//Cierra Div texto respuesta

    out.println("</div>");//Cierra Div general                                                                                               

    out.println("<center>");
    out.println("<div class='row' style='display:none' id='botones'>");//Div para editar la respuesta
    out.println("<form action='../EditRespuesta' method='post'>");
    out.println("<input type='hidden' name='texto' value='"+texto+"'>");//texto de la pregunta que se edito
    out.println("<input type='hidden' name='idRespuesta' value='"+Respuestas.get(i).getIdAnswer()+"'>");//id de la respuesta a modificar
    out.println("<input type='hidden' name='idPregunta' value='"+Respuestas.get(i).getIdQuestion()+"'>");//id de la pregunta a que pertenece dicha respuesta
    out.println("<div>");
    out.println("<button type='submit' class='btn btn-primary' >Guardar</button>");//boton guardar
    out.println("<button type='button' onclick='EditCancel()' class='btn btn-default' >Cancelar</button>"); //boton cancelar                                                                       
    out.println("</div>");

    out.println("</form>");                                        
    out.println("</div>");
    out.println("</center>");

    }
%>

JavaScript function

<script>
//Funcion para enviar el texto de la respuesta al modal               
$(document).ready(function (e) {
    $('#ModalEditPregunta').on('show.bs.modal', function(e) {    
        var id = $(e.relatedTarget).data().id;            
        $(e.currentTarget).find('#texto').val(id);            
    });
}); 

function EditQuestion() {            
    var botones=document.getElementById("botones");
    botones.style.display="inline";
}

function EditCancel(){
    var botones=document.getElementById("botones");
    botones.style.display="none";
}     
</script>
    
asked by Missael Armenta 09.08.2016 в 18:35
source

1 answer

1

The problem is that you are duplicating IDs . In each row that you insert within the for loop, you are doing this:

out.println("<div class='row' style='display:none' id='botones'>");//Div para editar la respuesta
out.println("<form action='../EditRespuesta' method='post'>");
out.println("<input type='hidden' name='texto' value='"+texto+"'>");//texto de la pregunta que se edito
out.println("<input type='hidden' name='idRespuesta' value='"+Respuestas.get(i).getIdAnswer()+"'>");//id de la respuesta a modificar
out.println("<input type='hidden' name='idPregunta' value='"+Respuestas.get(i).getIdQuestion()+"'>");//id de la pregunta a que pertenece dicha respuesta
out.println("<div>");
out.println("<button type='submit' class='btn btn-primary' >Guardar</button>");//boton guardar
out.println("<button type='button' onclick='EditCancel()' class='btn btn-default' >Cancelar</button>"); //boton cancelar                                                                       
out.println("</div>");

What will cause all button sets in all rows to have the id "buttons". Then when in your JavaScript code you do this:

var botones=document.getElementById("botones");
botones.style.display="inline";

The browser only takes the first occurrence of the bottones ID and displays it. Even if you clicked on the second or third row.

The solution: do not duplicate IDs in your code, use classes for elements that you know are going to be repeated OR create unique IDs (for example by adding the index of the loop to the ID):

// nota: no he probado este código y puede fallar
out.println("<div class='row' style='display:none' id='botones" + i + "'>");

Then in the function where the double click is made, you would pass the ID of the row that was pressed (or the ID of the cancel button):

function EditQuestion(fila) {            
    var botones=document.getElementById("botones" + fila);
    botones.style.display="inline";
}

function EditCancel(fila){
    var botones=document.getElementById("botones" + fila);
    botones.style.display="none";
}  
    
answered by 09.08.2016 / 19:04
source