Hola, tengo una sección de comentarios en mi página, el problema es que cuando envío el comentario, el div que contiene los anteriores comentarios debe refrescarse para que aparezca el nuevo pero en vez de eso, desaparece.
Es decir, lo que quiero es que el div de comentarios anteriores se muestre con el nuevo comentario y eche un poco abajo al input para escribir.
Os dejo el código:
Código HTML:
<script type="text/javascript">
function respuesta(){
//Tomas el valor del campo msg
var dequien = $("#dequien").val();
var estado = $("#estado").val();
var comentario = $("#responder").val();
//Se envian los datos a url y al completarse se recarga el muro
//con la nueva informacion
$.ajax({
url: 'responder.php',
data:'dequien='+ dequien +'&estado=' + estado +'&comentario=' + comentario,
type: 'post',
error: function(obj, comentario, obj2){
alert(comentario);
},
success: function(data){
$("#responder").val("")
$("#comentarios").load(location.href+" #comentarios>*","");
}
});
};
</script>
<div id="comentarios">
<?php
$encontrar=mysql_query("SELECT * FROM respuestas WHERE estado='".mysql_real_escape_string($idcomentario)."' ");
while ($extraer=mysql_fetch_array($encontrar)){
?>
<p><?php echo $extraer["respuesta"]?></p>
<?php } ?>
</div>
<div id="com">
<form action="javascript: respuesta();" method="post" name="respuestaform">
<input type="text" size="30" id="responder" placeholder="¿Qué te parece esta publicación?" class="cajacomentario" />
<input type="hidden" id="dequien" value="<?php echo $idsesion ?>"/>
<input type="hidden" id="estado" value="<?php echo $idcomentario ?>" />
</form>
</div>
El css no tiene mucho misterio:
Código HTML:
#com{
border-bottom: 1px solid rgba(82, 168, 236, 0.8);
background-color: white;
border-radius: 5px;
}
.cajacomentario{
z-index: 10;
border-radius: 4px;
border: 1px solid grey;
padding: 5px;
width: 90%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border:1px solid #BDC7D8
}
#comentarios{
background-color: #EBEBEB;
border: 1px solid #22B14C;
padding: 10px 10px 50px;
position: relative;
z-index: 3;
}
Ojalá me podáis ayudar, gracias!!