Ok aquí va el codigo HTML:
Código HTML:
Ver original <form action="#" method="post" name="nuevo_post" id="nuevo_post"> <textarea name="post" id="post" class="post">Publicar nuevo mensaje en el Muro...
</textarea> <div class="boton"><input type="submit" name="enviar" value="Publicar" /></div> <div id="count-caracteres"></div> <div id="datos-personales"> <p><b>Usuario:
</b> <i>No has elegido un nombre de usuario
</i></p> <p><b>Colegio:
</b> <i>No definido
</i></p> <?php
$con = new conexion();
$consulta = $con->Consulta("SELECT sm_post.*, sm_usuario.nombre_usuario FROM sm_post INNER JOIN sm_usuario ON sm_post.id_usuario=sm_usuario.id_usuario WHERE sm_usuario.id_usuario='". $_SESSION['id'] ."' ORDER BY sm_post.id DESC LIMIT 0,10");
while($datos = mysql_fetch_assoc($consulta)){
?>
<div class="publicacion"> <div class="titulo-user"><i>@
<?=$datos["nombre_usuario"] ?></i> <span class="escribio">escribi
ó</span>:
</div> <div class="titulo-fecha"><?=$datos["fecha"] ?></div> <div class="post-contenido"> <?=$datos["post"]?>
<div id="comentarios-post-<?=$datos["id"]?>">
<?php
$con = new conexion();
$consulta2 = $con->Consulta("SELECT sm_comentario.*, sm_usuario.nombre_usuario FROM sm_comentario INNER JOIN sm_usuario ON sm_comentario.id_usuario=sm_usuario.id_usuario WHERE sm_usuario.id_usuario='". $_SESSION['id'] ."' and id_post='". $datos["id"] ."' ORDER BY sm_comentario.id_comentario ASC");
while($datos2 = mysql_fetch_assoc($consulta2)){
?>
<div class="comment-user"> <i><b>@
<?=$datos2["nombre_usuario"] ?></b></i> <div class="comment-contenido"> <?=$datos2["comentario"]?>
<?
}
?>
<div class="form-comment"> <form action="#" name="form-comment-<?=$datos["id"]?>" method="post" id="form-comment-
<?=$datos["id"]?>">
<p class="caja-comment"><textarea name="input-comment-<?=$datos["id"]?>" id="input-comment-
<?=$datos["id"]?>" class="ingreso-comentario">Escribe un comentario...
</textarea></p> <?
}
?>
Notas, las clases izquierda y derecha corresponden a la parte donde se ingresan los post (izquierda) y al lugar donde estarán los post (derecha).
JQuery nuevo_post.js
Código Javascript
:
Ver original$(document).ready(function(){
$("#post").click(function(){
$("#post").fadeIn('slow', function(){
$("#post").css("height","50px");
$("#post").css("color","#464646");
$(".boton").css("display","block");
if($("#post").val()=="Publicar nuevo mensaje en el Muro..."){
$("#post").val("");
}
});
});
$("#post").keypress(function(event){
// tamaño
var tam = $("#post").val().length;
// variable para colocar el mensaje del numero de caracteres
var num_car = "<b style=\"color: black\">Estas ingresando <span>"+ tam +"</span> caracteres</b>";
if(tam>100 && tam<=140){
num_car = "<b style=\"color: orange\">Estas ingresando <span>"+ tam +"</span> caracteres</b>";
}else if(tam>140){
num_car = "<b style=\"color: red\">Estas ingresando <span>"+ tam +"</span> caracteres</b>";
}
$("#count-caracteres").html(""+ num_car +"");
});
// si el clic del mouse sale del textarea entonces vuelve a su estado normal
$("#nuevo_post").submit(function(){
if($("#post").val()=="" || $("#post").val()=="Publicar nuevo mensaje en el Muro..." ){
$("#mensaje").html("No puede dejar vacio el campo de texto");
$("#mensaje").focus();
$("#mensaje").dialog({
modal : true,
title : "Encontramos un error",
buttons : {
"Ok": function(){
$(this).dialog("close");
}
}
});
}else{
$.ajax({
data : $(this).serialize(),
type : "POST",
dataType : "json",
url : "ingresar_post.php",
success: function(data){
if(data.tipo=='error'){
$("#mensaje").html("No se ha podido ingresar el Post");
$("#mensaje").dialog({
modal : true,
title : "Encontramos un error",
buttons : {
"Ok": function(){
$(this).dialog("close");
}
}
});
}else{
// Buscamos en la base de datos y colocamos en el primer cuadro:
$.ajax({
url : "extraer_ultimo_post.php",
dataType : "json",
success : function(data){
$("#posteos").prepend("<div class=\"publicacion\"><header><div class=\"titulo-user\"><i>@"+ data.nombre_usuario +"</i> <span class=\"escribio\">escribió</span>:</div><div class=\"titulo-fecha\"></div></header><div class=\"post-contenido\">"+ data.post +"</div><div id=\"comentarios-post-"+ data.id +"\"><h3>Comentarios</h3></div><div class=\"form-comment\"><form action=\"#\" name=\"form-comment-"+ data.id +"\" method=\"post\" id=\"form-comment-"+ data.id +"\"><p class=\"caja-comment\"><textarea name=\"input-comment-"+ data.id +"\" id=\"input-comment-"+ data.id +"\" class=\"ingreso-comentario\">Escribe un comentario...</textarea></p></form></div></div>");
$("#post").css("height","25px");
$("#post").css("color","#A0A0A0");
$("#post").val("Publicar nuevo mensaje en el Muro...");
}
});
}
}
});
}
return false;
});
});
/*function limpiarCaja(elemento){
if($("#"+ elemento.id +"").val()!="Escribe un comentario..."){
$("#"+ elemento.id +"").val("");
$("#"+ elemento.id +"").css("color","black");
}
}*/
nuevo_comment.js
Código Javascript
:
Ver original$(document).ready(function(){
$('.caja-comment').on('.ingreso-comentario','click',function(){
if($(this).val()=="Escribe un comentario..."){
$(this).val("");
}
$(this).css("color","black");
});
/*$(".caja-comment").live("click", ".ingreso-comentario", function(){
if($(this).val()=="Escribe un comentario..."){
$(this).val("");
}
$(this).css("color","black");
});*/
/*$(".caja-comment textarea").click(function(){
//alert($(this).attr("id"));
if($(this).val()=="Escribe un comentario..."){
$(this).val("");
}
$(this).css("color","black");
});*/
$(".caja-comment").on("keyup",".ingreso-comentario", function(event){
if(event.keyCode=='13'){
// cuando deseemos enviar el comentario entonces capturamos el idenficador del post.
var identificador = $(this).attr("id");
var arreglo = identificador.split("-");
var id = arreglo[2]; // variable que almacena el ID del POST
// recogemos el valor de dicho campo
var comentario = $(this).val();
$(this).val("");
$.ajax({
data : "comment="+ comentario +"&id_post="+ id,
type : "POST",
dataType : "json",
url : "ingresar_comentario.php",
success: function(data){
if(data.tipo=='error'){
$("#mensaje").html("No se ha podido ingresar el comentario");
$("#mensaje").dialog({
modal : true,
title : "Encontramos un error",
buttons : {
"Ok": function(){
$(this).dialog("close");
}
}
});
}else{
// Buscamos en la base de datos y colocamos en el primer cuadro:
$.ajax({
url: "extraer_ultimo_comentario.php",
dataType: "json",
success: function(data){
$("#comentarios-post-"+id).append("<div class=\"comment-user\"><header><div><i><b>@"+ data.nombre_usuario +"</b></i> <span class=\"escribio\">comentó</span>:</div></header><div>"+ data.comentario +"</div></div>");
}
});
}
}
});
}
});
$(".caja-comment textarea").blur(function(){
if($(this).val()==""){
$(this).css("color","#A8C2D7");
$(this).val("Escribe un comentario...");
}
});
});
Si necesitan el PHP me avisan (lo dudo). Gracias por su tiempo!