Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » mostrar mensaje usando un formulario + ajax + php

AJAX - mostrar mensaje usando un formulario + ajax + php

Volver
Nuevo Tema
<<>>
 
Vista:

mostrar mensaje usando un formulario + ajax + php

Publicado por sam (7 intervenciones) el 03/03/2015 19:44:42
Hola amigos verán tengo este código con el cual intento enviar "mensajes" mediante un

formulario (archivo 1), a otro archivo php (archivo 2).

Y posteriormente , automáticamente muestre el mensaje enviado en una caja que esta situada justo arriba del formulario (archivo 1).

Pero no me funciona y no se que falla, si me pudieran ayudar les estaria muy agradecido.

Este es el codigo

archivo 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
$("#btn_enviar_mensaje").click(function(){
 
        $.ajax(
 
            {
                url: "php/historial_mensajes.php",
                type: 'post',
                data: data,
 
                success: function(result){
 
                        $("#historial_mensajes").html(result);
                    }
                }
            );
    });
});
</script>
 
 
<html>
    <div id="historial_mensajes"></div>
 
    <form>
 
    <input type="text" name="mensaje" autofocus class="inputstyle" id="mensaje" placeholder="Mi mensaje"/>
    <button id="btn_enviar_mensaje">Enviar mensaje</button>
 
    </form>
</html>



archivo 2 llamado "historial_mensajes.php"

1
2
3
4
5
<?php
    $mensaje = trim(($_POST['mensaje']));
 
    echo 'Mensaje: ' . $mensaje . '<br/><br/>';
?>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 90
Oro
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

mostrar mensaje usando un formulario + ajax + php

Publicado por xve (222 intervenciones) el 04/03/2015 08:04:01
Hola Sam, en tu código hay varios errores... aqui te adjunto el código que funciona... revisa las diferencias...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
    <style>
    </style>
 
    <script>
    $(document).ready(function(){
        $("#btn_enviar_mensaje").click(function(){
            $.ajax({
                url: "php/historial_mensajes.php",
                type: 'post',
                data: {"mensaje":$("#mensaje").val()},
 
                success: function(result){
                    $("#historial_mensajes").html(result);
                }
            });
        });
    });
    </script>
</head>
 
<body>
 
<html>
    <div id="historial_mensajes"></div>
 
    <form>
        <input type="text" name="mensaje" autofocus class="inputstyle" id="mensaje" placeholder="Mi mensaje"/>
        <input type="button" id="btn_enviar_mensaje" value="Enviar mensaje">
    </form>
</html>
 
</body>
</html>

Si tienes cualquier duda, no dudes en consultarme
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mostrar mensaje usando un formulario + ajax + php

Publicado por sam (7 intervenciones) el 04/03/2015 12:57:38
Hola xve, tu codigo funciona perfecto y a Dios gracias lo he entendido muy bien.

Decirte que se ve que yo tambien he estado probando y requeteprobando y tambien he conseguido que funcione.

A continuacion te pongo el codigo para que lo veas.

El problema que tengo es que necesito que el el ultimo mensaje introducido , sea el primero de la lista , justo arriba del todo, y no abajo.

intuyo que se hace con reverse()

pero no logro que funcione

Comentarte que el codigo que he hecho y que necesitaria que lo vieras, muestra un historial de todos los mensajes introducidos.

Por otro lado, una duda, que es mejor , hacer un chat con jquery y ajax + php + bbdd

o php + bbdd?

Este es el codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$("#btn_enviar_mensaje").click(function(){
 
    var mensaje = $("#mensaje").val();
 
    //Devuelve mensaje de 'exito' cuando la información se almacena en la base de datos.

    var dataString = 'mensaje='+ mensaje;
 
    if(mensaje=='') {
        alert("Rellena el campo antes de hacer click en enviar");
    }
    else
    {
        // Codigo ajax del formulario

        $.ajax({
 
            type: "POST",
            url: "ajaxsubmit.php",
            data: dataString,
            cache: false,
 
            success: function(resultados){
 
                var historial = $('#historial_mensajes').html();
 
                $('#historial_mensajes').html(historial + '<p>' + resultados + '</p>');
            }
 
        });
    }
 
    return false;
 
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 47
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

mostrar mensaje usando un formulario + ajax + php

Publicado por Vainas (71 intervenciones) el 04/03/2015 19:31:41
Buenas:

Si quieres que salga Primero lo ultimo tendra que ser:

1
2
3
var historial = $('#historial_mensajes').html();
$('#historial_mensajes').html('<p>' + resultados + '</p>'+historial);
}


Primero el ultimo y luego el resto. Tambien puedes usar las funciones de jquery como .prependTo();

1
2
3
4
success: function(resultados){
$('<p>' + resultados + '</p>').prependTo('#historial_mensajes');
}
....

Espero que sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar