Add HTML from JavaScript

Question

Add HTML from JavaScript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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("</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-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(Respuestas.get(i).getText());
                out.println("</textarea>");                                    
                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

<script>
        //Funcion para enviar la lista de likes al modal           

        $(document).ready(function (e) {
            $('#myModal').on('show.bs.modal', function(e) {    
            var id = $(e.relatedTarget).data().id;            
            $(e.currentTarget).find('#lista').val(id);            
            });
        });                
    </script>

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

javascript jquery bootstrap jsp

asked by Missael Armenta 29.07.2016 в 19:56

source

2 answers

Why do you repeat the data? Radio button in item and SQlite

score 1 · Answer 1

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

        modal.data('id', row.id);

    for (var name in row) {
        modal.find('input[name="' + name + '"]').val(row[name]);
    }
    modal.modal('show');          
    })

score 0 · Answer 2

try using the append () method:

 $('#myModal').on('show.bs.modal', function(e) {    
        var id = $(e.relatedTarget).data().id;            
        var data = $(e.currentTarget).find('#lista').val(id);
        $(this).append('<div>'+data+'</div>'); 
 });

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