Mi código hace lo mismo que ese, pero con la diferencia de que está optimizado para que sea más ligero.
Llegados a este punto no entiendo para nada que es lo que me quieres decir, no sé que es lo que no funciona o lo que intentas hacer más allá de un simple chat en tiempo real, que deberías tener funcionando con lo que ya tienes.
Explicate mejor si puede ser, y cuando te salga un error, copialo y pegalo exactamente como te ha aparecido.
Por segunda vez, me vuelvo a repetir:
- No es necesario que uses más de un document ready, puedes poner todos tus scripts dentro del mismo (como hice en el código optimizado que te pase ayer y que no estás usando a pesar de que funciona).
- Sigo viendo el mismo script de ayer en tu web, pon el que te pasé yo que funciona perfectamente.
El único problema que veo ahora mismo, es que estás usando un elemento <button> cuando no es necesario, en tu otra pregunta (la del ajax, donde te di este código) ya te dije que usaras un elemento <a>.
No entiendo porque complicar las cosas, si no vas a usar http submit porque usar un <button> y tener que estar evitando el submit cuando simplemente usas otro elemento, que vas a tener que darle estilo igualmente?
Ademas hacer las cosas bien cuesta muy poco, como por ejemplo usar html5 correctamente y declarar el tipo de contenido y la codificación.
A parte, html5 no soporta background en body, y de paso los estilos, todos, es mejor tenerlos en el archivo css:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="Text/HTML" charset="UTF-8" /> <meta name="keywords" content="google" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="" href="" /> <meta name="copyright" content="© mypage <?php echo date("Y") ?>" />
<link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" type="text/css" href="inicio.css" /> <link rel="stylesheet" type="text/css" href="chat.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<li><a class="active" href="inicio.php">Inicio
</a></li> <li><a href="paginaad.php">Administracion
</a></li> <li><a href="comentarios.php">Reporta
</a></li>
<li><a href="#about">Sobre mi
</a></li> <li><a href="salir.php">Logout
</a></li>
<main>
<input type="text" id="mensaje" name="mensaje" />
<a id="boton" href="#">Enviar
</a>
</main>
/* inicio.css */
body {
background-image: url(fondos/fondo-inicio.jpg);
}
ul ul {
float:right;
list-style-type:none;
}
/* chat.css */
#contenedor {
width: 500px;
height: 200px;
border: 1px solid black;
overflow: scroll;
}
p {
color: #320EF8;
font-size: 120%;
margin: 20px 15px;
}
#final {
width: 100%;
height: 1%;
}
<?php
require('connect_db2.php');
$op = (int) $_GET['op'];
if ($op === 1) {
$nombre = $_SESSION['usuario'];
$mensaje = $_POST['mensaje'];
mysqli_query($link, "INSERT INTO chat (nombre, mensaje) VALUES('$nombre', '$mensaje')");
} else if ($op === 2) {
header('Content-Type: Text/HTML; Charset=UTF-8');
$color = '#320EF8';
if ( NULL !== $resultados ) {
echo '<p>', $resultados['nombre'], ': </p>', $resultados['mensaje'], '<br />';
}
}
}
?>
$(function () {
function myFunction() {
var mensaje = $('#mensaje').val(),
ajax = $.post('mensaje.php?op=1', { mensaje: mensaje } );
ajax.done(function() {
var content = $.get('mensaje.php?op=2');
$('#final').before( content );
$('#mensaje').val('');
$('#contenedor').animate({scrollTop: $( $( '#final' ) ).offset().top}, 1000);
});
}
$('#boton').on('click', myFunction);
$('#mensaje').keydown(function (e) {
if (e.which === 13) {
myFunction();
}
});
});
De todas maneras esto está muy mal implementado y ya te lo dijo
AlbertoBSD. Encuentra una manera más eficiente de hacer esto. Tienes ideas en tu otro post
http://foro.elhacker.net/php/ajax_recibir_daros-t452816.10.html, cualquier duda preguntala ahí.
Problemas sobre el scroll aquí. Hay un pequeño problema y es que cuando hay un scroll grande el scrollTop empieza a fallar. Esto está fuera de mi conocimiento, espera a ver si alguien se pasa y arregla este pequeño inconveniente. Sin embargo, los primeros mensajes hacen bien el scroll, esto depende de la altura del div, cuanto más height tenga más tardará el scroll del div en llenarse (por lo tanto más tardará en fallar).
Aquí hay un demo para trabajar facilmente:
https://jsfiddle.net/3a8rrvej/Edito: En el html, muevo el código del menu ul dentro de header (que es donde debería estar).
Mostrar Mensajes
