I have a problem making my chat refresh constantly.
This is how I built it:
I save all messages in a MySQL database connected with PHP, loading the messages with PHP and post messages with PHP, I have jQuery making the message when clicked on submit send it to the chatbox.
My problem is that when me and a friend chat, we have to refresh the site everytime someone writes something. I want to make the chatbox refresh constantly.
I have tried $('#example').load(document.URL + ' #example'); but it doesn't work, can someone please help me.
[HTML]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ChatBox</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#content").load("ajaxload.php");
$("a.btn").click(function(){
$.post('ajaxPost.php', $('#userarea').serialize(), function(data){
$('#content').append('<p>'+data+'</p>');
});
return false;
});
});
</script>
<script src="chatbox.js" charset="utf-8"></script>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="chatbox.css" title="ChatBox" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<h1 id="swegre">
SWEGRE<span>©</span>
</h1>
<div id="wrapper">
<h1>Leave a comment!</h1>
<div id ="content">
<p style="background-color: #b7b7b7">Admin: Here's our chatbox</p>
</div>
<div id="message">
<form id="userarea">
<textarea id="textareamsg" name="messages" rows="2" cols="30" required=""></textarea>
<a href="#" class="btn">POST</a>
</form>
</div>
</div>
</body>
</html>
[CSS not important] [jQuery]
$(document).ready(function(){
$( "a.btn" ).click(function() {
var textValue = $('textarea#textareamsg').val();
if(textValue == "" || textValue == " " || textValue == " " || textValue == " "){
alert('You have to write something in the textarea to post a message');
return false;
}else{
$('#content').append("<p>You: " + textValue + "</p>");
$('textarea#textareamsg').val('');
}
});
});
[AjaxLoad.php]
<?php
//conection:
$link = mysqli_connect("localhost","root","123","chat") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT * FROM messages" or die("Error in the consult.." . mysqli_error($link));
//execute the query.
$result = mysqli_query($link, $query);
//display information:
while($row = mysqli_fetch_array($result)) {
echo '<p class="other">';
echo $row ["message"] . '</p>';
}
?>
[AjaxPost]
<?php
$link = mysqli_connect("localhost","root","123","chat") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT * FROM messages" or die("Error in the consult.." . mysqli_error($link));
//execute the query.
$result = mysqli_query($link, $query);
//Code goes here
$message = $_POST['messages'];
mysqli_query($link,"INSERT INTO messages (message)
VALUES ('$message')");
?>
