scrollIntoview

[jalbtercero]

Heee he copiado tu codigo, pero por algun motivo.. ahora no puedo entrar en mi pagina, es decir me pone timed out...

[gAb1]

El código no se ejecuta por sí solo, a si que el "timed out" es por otra cosa. Tal vez el hosting se haya caido (a veces pasa).

[jalbtercero]

El código no se ejecuta por sí solo, a si que el "timed out" es por otra cosa. Tal vez el hosting se haya caido (a veces pasa).

No pero es que le he dado al boton... y entonces bumm...

[jalbtercero]

Vale he probado tu codigo y pasa lo siguente:

1- Los mensajes que introduzco se envia dos veces es decir que se muestra dos veces

2-me da erro: annot read property 'top' of undefined

ves a mi pagina y miralo xelatercero.com\chat2.html

[gAb1]

Eso de que al darle al boton da error 500 es muy raro, debes tener un problema o bien en tu hosting o en algún lado en tu página.

Si le das al botón y a intro entonces se enviará dos veces... Es tu código, yo solo lo organicé un poco.

Y eso de cannot read property 'top' of undefined también es muy raro. ¿Pusiste la versión JQuery que te pasé, o estás usando una versión vieja?

He entrado en tu página y he visto que no actualizaste el código que te pasé. Ponlo a ver que pasa.

He visto que ninguna de las peticiones get que hace tiene respuesta, están vacias, tanto las que se hacen en cargar.php, como las que se hacen del chat. No hay ninguna respuesta y no se vé nada en el chat. Mira a ver que has hecho en el archivo mensaje.php y porqué no hace el select ni muestra los datos.

[jalbtercero]

El chat no hace nada porque tengoun panel de administracion donde borro el chat y lo puedo crear.

Y bueno he probado tu codigo, y no funciona para nada, ademas si hubiera algun error en el codigo el anterior no funcionaria:

Codigo Anteriro:

Código (javascript) [Seleccionar] Expandir


$(function () {
    $('#boton').on('click', function () {
        var mensaje = $('#mensaje').val(),
            ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );

        ajax.done(function() {
            var content = $.get('mensaje.php?op=2');
            $('#contenedor').append( content );
            $('#mensaje').val('');
           
        });
    });


});

$(function () {
    $('#mensaje').keydown(function (event) {
       if(event.which==13 || event.keycode==13) {
        var mensaje = $('#mensaje').val(),
            ajax    = $.post('mensaje.php?op=1', { mensaje: mensaje } );

        ajax.done(function() {
            var content = $.get('mensaje.php?op=2');
            $('#contenedor').append( content );
            $('#mensaje').val('');
           
           
        });
}
    });



});


[gAb1]

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:

Código (html5) [Seleccionar] Expandir

<!DOCTYPE html>
<html>

   <head>

       <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" />

       <title>My WebPage</title>

       <meta name="author" content="" href="" />
       <meta name="copyright" content="&copy; 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>
       <script type="text/javascript" src="ajax.js"></script>
       <script type="text/javascript" src="enviar.js"></script>

   </head>

   <body>

       <header>

            <ul>
                <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>

                <ul>
                    <li><a href="#about">Sobre mi</a></li>
                    <li><a href="salir.php">Logout</a></li>
                </ul>
            </ul>
           
       </header>

       <main>

           <div id="contenedor"><span id="final"></span></div>

           <input type="text" id="mensaje" name="mensaje" />

           <a id="boton" href="#">Enviar</a>

       </main>

       <footer>
           
       </footer>

   </body>

</html>

Código (css) [Seleccionar] Expandir

/* 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%;
}

Código (php) [Seleccionar] Expandir

<?php

session_start();

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')");
    mysqli_close($link);
    
} else if ($op === 2) {

    header('Content-Type: Text/HTML; Charset=UTF-8');

    $color = '#320EF8';    
    $result = mysqli_query($link, 'SELECT * FROM chat');

    while ($fila = mysqli_fetch_array($result)) {

        if ( NULL !== $resultados ) {

            echo '<p>', $resultados['nombre'], ': </p>', $resultados['mensaje'], '<br />';

        }

    }

    mysqli_free_result($result);
    mysqli_close($link);
}

?>

Código (javascript) [Seleccionar] Expandir

$(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).