Send message and update div without reloading the page

Navigation
1

Well folks, I'm developing a southbox and am here with a problem .. I when I type something in shoutbox and give enter or click on enviar it refresh on page ..

I leave here what I already have ..

INDEX.PHP 

/* PARTE DE CIMA DESTA PAGINA */
<?
require('../php/config/config.php');
require('../php/config/classes/framework.php');

$STH = $db->prepare("SELECT * FROM chat");
$STH->execute();
?>
/* PARTE DE CIMA DESTA PAGINA */



<div id="shouts" class="shouts">
                                                <div class="panel-body">
                                                    <ul class="list-group">
                                                        <?php while ($row = $STH->fetch(PDO::FETCH_ASSOC)) { ?>
                                                                <li class="list-group-item"><span><?php echo $row['time'] ?> - </span><strong><?php echo $row['user'] ?>:</strong> <?php echo $row['message'] ?></li>
                                                        <?php } ?>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="panel-footer">
                                                <?php if (isset($_GET['error'])) { ?>
                                                        <div class="alert alert-danger">
                                                            <?php echo $_GET['error'] ; ?>
                                                        </div>
                                                <?php } ?>
                                                <form action="process.php" method="post">
                                                    <div class="row">
                                                        <div class="col-xs-12 col-sm-6">
                                                            <input type="text" class="form-control" name="user" placeholder="Enter Your Name">
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6">
                                                            <input type="text" class="form-control" name="message" placeholder="Enter A Message">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <input class="btn btn-primary shout-btn" type="submit" id="submit" name="submit" value="Shout It Out">
                                                        </div>
                                                    </div>              
                                                </form>


                                    </div>

PROCESS.PHP 

<?php 

    require('../php/config/config.php');
    require('../php/config/classes/framework.php');

    //check if form submitted
    if (isset($_POST['submit'])) {

        $user = $_POST['user'];
        $message = $_POST['message'];

        $time = date('H:i:s');

        if (!isset($user) || $user == '' || !isset($message) || $message == '') {

            $error = "Please fill in your name and a message";
            header('Location: index.php?error='.urlencode($error));
            exit();

        } else {

            $STH = $db->prepare("INSERT INTO chat (user, message, time) VALUES (:user, :message, :time)");

            $STH->bindValue(':user', $user);
            $STH->bindValue(':message', $message);
            $STH->bindValue(':time', $time);

            $STH->execute();

            header('location: index.php');
            exit();
        }
    }

?>

I put this in index.php : 

      <script>
$(document).ready(function(){

$('#submit').click(function(){

$.post("process.php").serialize(),  function(response) {
$('#shouts').reload;
});
return false;

});

});
</script>

But unsuccessful ..

  

My goal was to click ENTER or the SUBMIT send to button   message automatically without giving refresh in the page ..

    
asked by anonymous 30.06.2015 / 22:26

1 answer

4

You have an error on this line: 

$.post("process.php").serialize(), function (response) {

Function arguments are not correct. The correct syntax is :

  

jQuery.post (url [ data] [ fn success] [ dataType]);

You are using return false; to stop the submit of form , I prefer e. preventDefault(); which is semantically more correct.

I imagine that your form was submitted because of the error, without it I think the code would work and that the submit would be via ajax and without refresh of the page.

My code suggestion would be: 

$('#submit').click(function (e) {
    e.preventDefault();
    var data = $(this).serialize();
    $.post("process.php", data, function (response) {
        alert('ajax feito!');
        $('#shouts').reload; // repara esta linha não faz nada! seria talvez '.reload()'?
    });
    
30.06.2015 / 22:36
Recursion in the entity-framework Session does not start in php via htaccess