Send message and update div without giving Reload the page

Question

Good people, I’m developing a southbox and I’m here with a problem. I write something on Shoutbox and enter or click on enviar he refresh on the 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 the index php.:

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

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

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

});

});
</script>

But to no avail..

My goal was to click ENTER or on the button of SUBMIT send the message automatically without refreshing the page..

Answer 1

You got a mistake on this line:

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

The arguments of the function are not correct. The correct syntax is:

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

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

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

My suggested code 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()`?
    });