prepend con jQuery

dpbataller · #1 (**permalink**) 10/08/2010, 15:32

Hola, estoy empezando con esto de jQuery, y me gustaria intentar simular el sistema de comentarios que hay en redes como twitter,facebook etc...
Me explico, me gustaria hacer algo simple como por ejemplo, un textarea donde se escribe el comentario y al hacer click en el botón "Enviar" se carga el contenido del textarea en una div que hay abajo llamado "ultimos_comentarios", así tantas veces como se vaya escribiendo en el textarea y a su misma vez, el último comentario siempre será el el primero a la vista. ¿Me entendeis verdad?

Indagando un poco, me enteré que hace falta gastar .prepend, pero hay algo que no consigo hacer bien.
Os copio mi codigo, es corto y seguro lleno de errores, os pido disculpas si hay errores muy grandes, pero hace tiempo que deje olvidado esto del javascript y demás.
Muchisimas gracias chicos!

Código HTML:

Ver original<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
 
  $(document).ready(function(){
  
    $("enviar").click(function(){
 
         $("comentario").prepend("Este es el comentario: ");
 
    });    
    
  });
  
  </script>
  
  <style>   
        #comentario {
            width:300px;
            height:100px;
        }
        
        #ultimos_comentarios{
            margin: 10px 0 0 0;
            position:relative;
            width:400px;
            height:100px;
            
        }
        
  </style>
</head>
<body>  
 
  <textarea id="comentario" cols="5" rows="5"></textarea>
  <input type="button" value="Enviar" id="enviar">
  
  <div id="ultimos_comentarios"></div>
  
</body>
</html>

Dany_s · #2 (**permalink**) 10/08/2010, 18:55

te faltó la almohadilla en "$("enviar")." y en "$("comentario")" fijate en la doc como seleccionar elementos http://api.jquery.com/category/selectors/

con prepend solo vas a agregar el texto del textarea en un div, lo que tenés que hacer es enviar el contenido de tu form con ajax para insertarlo en la bd, después obtener un resultado de la operación y ahí insertarlo en el div

dpbataller · #3 (**permalink**) 11/08/2010, 00:12

Gracias compañero por responder!! de momento solo querría hacer estas pruebas, se que debería meterlo en una base de datos ,pero ahora solo quiero probar...
Cuando tenga unos minutos revisaré bien tu respuesta para trata de solucionarlo!

Gracias de nuevo, seguramente vuelva a postear por que tengo algunas dudas!!
Un saludo!

dpbataller · #4 (**permalink**) 11/08/2010, 00:37

Funciona bien, pero... mi duda es, ¿Como hago para que el contenido del textarea lo escriba en la capa ultimos_comentarios?

Este el código corregido

Código HTML:

Ver original<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
 
  $(document).ready(function(){
  
    $("#enviar").click(function(){
 
         $("#comentario").prepend("Este es el comentario: ");
 
    });    
    
  });
  
  </script>
  
  <style>   
        #comentario {
            width:300px;
            height:100px;
        }
        
        #ultimos_comentarios{
            margin: 10px 0 0 0;
            position:relative;
            width:400px;
            height:100px;
            
        }
        
  </style>
</head>
<body>  
 
  <textarea id="comentario" cols="5" rows="5"></textarea>
  <input type="button" value="Enviar" id="enviar">
  
  <div id="ultimos_comentarios"></div>
  
</body>
</html>

Dany_s · #5 (**permalink**) 11/08/2010, 13:03

Obtener valor de un elemento

Métodos para insertar contenidos

En el sitio illasaron hay un curso/videotutorial completo http://illasaron.com/
o en este blog hay videotutoriales http://fdoyanes.blogspot.com/search/...oriales-Jquery

dpbataller · #6 (**permalink**) 11/08/2010, 13:30

gracias! voy a hecharles un vistazo!