'refresh on ajax shoutbox input

Hello I have been building a shout box and i am so close - i just cant get the fetched data to refresh on input.

the fetched data refreshes on interval but when i press submit i have to wait for it to refresh by that interval i would like it to be instant on submit

sql

CREATE TABLE IF NOT EXISTS `shoutbox` (
  `msgid` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `message` text DEFAULT NULL,
  PRIMARY KEY (`msgid`)
) ENGINE=MyISAM;

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<p id="shoutbox"></p>

<form id='contactForm1' name='contactForm1' action='postshout.php' method='post'>
<div class="row">
    <div class="col-md-12">
    <input id="message" class="form-control shoutbox_msgbox" type='text' size='100%' name="message">
    </div>
</div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            complete: function(){
              $("#message").focus().val('');
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

<script>
    function updateShouts(){
        // always refresh #shoutbox
        $('#shoutbox').load('getshout.php');
    }
    setInterval( "updateShouts()", 15000 );
    updateShouts();
</script>

</body>
</html>

getshout.php

<?php
$servername = "localhost";
$username = "dbusername";
$password = "dbpassword";

try {
  $conn = new PDO("mysql:host=$servername;dbname=dbname", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}

$sth = $conn->prepare("SELECT * FROM shoutbox ORDER BY `msgid` DESC");
$sth->execute();

/* Fetch all of the remaining rows in the result set */
$result = $sth->fetchAll();

foreach ($result as $row) {
    echo "$row[message]<br>";
}

postshout.php

<?php
$servername = "localhost";
$username = "dbusername";
$password = "dbpassword";

try {
  $conn = new PDO("mysql:host=$servername;dbname=dbname", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}

$data = [
    'message' => $_POST['message'],
];
$sql = "INSERT INTO shoutbox (message) VALUES (:message)";
$stmt= $conn->prepare($sql);
$stmt->execute($data);
phpjqueryajax


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions