Add HTML from JavaScript


I'm doing a web app with jsp, I try to display likes the same way Facebook does in a modal window, so far I've managed to pass the list of those who have given like an object but now I do not know how to display the attributes of that object.

<section><!-- Answers -->                                
   <div class="row"> <!-- respuestas publicadas -->                                    
      <h2>Answers </h2>                    
      <div class="col-md-12">
          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 usaurio que accedio 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("<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-id="+Respuestas.get(i)+" data-toggle='modal' data-target='#myModal' >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-10>");//Div texto respuesta
                out.println("<textarea style='margin-bottom:50px' class='form-control' readonly='true'>");                                    
                out.println("</div>");//Cierra Div texto respuesta

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


      </div><!-- cierra col-md-12 -->
     </div><!-- cierra respuestas publicadas -->                            
</section><!-- cierra Answers -->

I use a javaScript function to pass values to the modal

        //Funcion para enviar la lista de likes al modal           

        $(document).ready(function (e) {
            $('#myModal').on('', function(e) {    
            var id = $(e.relatedTarget).data().id;            

I already have the object in the modal window but now I can not show its attributes in the modal.

asked by Missael Armenta 29.07.2016 в 19:56

2 answers


What you are passing to the modal are only the id, try putting this function on the onclick:

  $('element_class').on('click',function (e, value, row) {'id',;

    for (var name in row) {
        modal.find('input[name="' + name + '"]').val(row[name]);
answered by 29.07.2016 в 21:54

try using the append () method:

 $('#myModal').on('', function(e) {    
        var id = $(e.relatedTarget).data().id;            
        var data = $(e.currentTarget).find('#lista').val(id);

The append () method is responsible for inserting html. Here I leave the append documentation: link

answered by 29.07.2016 в 21:48