1

Estoy realizando una aplicación en JSP para hacer y responder preguntas. Intento hacer una función para poder editar una respuesta, mi idea es que el usuario de doble clic sobre la respuesta a editar y se muestren los botones para editar.

introducir la descripción de la imagen aquí

La función como tal en JavaScript funciona, mi problema es que para poner todas las respuestas publicadas en esa pregunta utilizo un ciclo y una lista así que cuando hago clic en la respuesta 3 por ejemplo siempre activa los botones de la respuesta 1 y también toma los valores de la pregunta 1

introducir la descripción de la imagen aquí

No importa si doy clic en la segunda o tercera respuesta siempre se activan los botones de la respuesta 1.

Éste es mi código:

<%                     
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>");

    }
%>

Función de JavaScript

<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>

1 respuesta 1

1

El problema es que estás duplicando IDs. En cada fila que insertas dentro del bucle for estás haciendo esto:

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>");

Lo que causará que todos los juegos de botones en todas las filas tengan el id "botones". Entonces cuando en tu código JavaScript haces esto:

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

El navegador sólo toma la primera ocurrencia del ID bottones y lo muestra. Aunque hayas pulsado en la segunda o tercera fila.

La solución: no dupliques IDs en tu código, usa clases para elementos que sabes que se van a repetir O crea IDs únicos (por ejemplo añadiendo el índice del bucle al ID):

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

Entonces en la función en la que se hace el doble click, pasarías el ID de la fila que se ha pulsado (o la del ID del botón de cancelar):

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";
}  
1
  • Funciona perfecto gracias Commented el 9 ago. 2016 a las 20:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.