Alright, so after several days of searching and reading I still can't get this to work so this is kinda my last chance. Keep in mind i'm a rookie with Ajax and JS.
I have a comment wall where you can leave a nice little message to others on the page and it works just fine but now I want to add some ajax so it auto refresh every 10 second and get the latest comments.
The thing is I get the whole website to be displayed inside that div and not the comments.
I have a js document with the following code
(function update() {
$.ajax({
type : 'GET',
url : 'index.php',
success : function(data){
$('#cmt_wall_container').html(data);
},
}).then(function() {
setTimeout(update, 10000);
});
})();
And my Index.php page include the following
<?php include_once 'connect.php'; ?>
<?php
$cmt_list = "";
$sql = mysqli_query($con, "SELECT * FROM cmt ORDER BY id DESC LIMIT 10");
$cmtCount = mysqli_num_rows($sql);
if($cmtCount > 0){
while($row = mysqli_fetch_array($sql)){
$id = $row["id"];
$comment = $row["comment"];
$cmt_list .="<div class='post-container'><p class='post-comment'>$comment</p></div>";
}
} else {
$cmt_list = "leave a comment";
}
?>
<head>stuff..</head>
<body>
<div id="cmt_wall_container">
<?php echo $cmt_list; ?>
</div>
</body>
I hope this is clear enough! Thank you very much in advance, you are really my last hope!!!!!
Try something more along these lines...
THE JS SCRIPT:
function update() {
$.post( "index.php", { grab: "comments"}).done(function( data ) {
$('#cmt_wall_container').html(data);
setTimeout(update, 10000);
});
}
THE PHP SCRIPT:
<?php
include_once 'connect.php';
$cmt_list = "";
$sql = mysqli_query($con, "SELECT * FROM cmt ORDER BY id DESC LIMIT 10");
$cmtCount = mysqli_num_rows($sql);
if($cmtCount > 0){
while($row = mysqli_fetch_array($sql)){
$id = $row["id"];
$comment = $row["comment"];
$cmt_list .="<div class='post-container'><p class='post-comment'>$comment</p></div>";
}
} else {
$cmt_list = "leave a comment";
}
// Return Results To Ajax And Exit
if (isset($_POST['grab']) && $_POST['grab']==="comments") {
echo $cmt_list;
exit;
} // Else Load Page As Normal
?>
<head>stuff..</head>
<body>
<div id="cmt_wall_container">
<?php echo $cmt_list; ?>
</div>
</body>
By using isset, you can detect if your requesting from ajax and only return the comments else you load the reset of the page as normal.. Its one method / approach.
Note this still applies for $_GET.. just change $_POST to $_GET if you need, but by using the exit option.. You dont need to wrap your whole site in a else statement.. its cleaner
So change your ajax url to index.php?grab=comments and add this below your PHP code.
if (isset($_GET['grab']) && $_GET['grab']==="comments") {
echo $cmt_list;
exit;
}
By using this approach, you can also control your comments with options like grab=admin_comments or how ever you would want.
It should work as 8BitProgrammer suggested
(function update() {
$.ajax({
type : 'GET',
url : 'index.php?comments=true',
success : function(data){
$('#cmt_wall_container').html(data);
},
}).then(function() {
setTimeout(update, 10000);
});
})();
php:
<?php include_once 'connect.php'; ?>
<?php
$cmt_list = "";
$sql = mysqli_query($con, "SELECT * FROM cmt ORDER BY id DESC LIMIT 10");
$cmtCount = mysqli_num_rows($sql);
if($cmtCount > 0){
while($row = mysqli_fetch_array($sql)){
$id = $row["id"];
$comment = $row["comment"];
$cmt_list .="<div class='post-container'><p class='post- comment'>$comment</p></div>";
}
} else {
$cmt_list = "leave a comment";
}
if ($_GET["comments"]):
?>
<?php echo $cmt_list; ?>
<?php
else :
?>
<head>stuff..</head>
<body>
<div id="cmt_wall_container">
<?php echo $cmt_list; ?>
</div>
</body>
<?php
endif;
?>