loaded content using ajax gets lost? - php

Question

I am using AJAX to load content from mysql database when I CLICK on LINKS.
once I load the content successfully, I refresh the container every 5 seconds so the new content will be displayed.
the content gets loaded fine and the refresh part works fine too.
but the issue that I have is that when the refresh happens, the loaded content gets lost.
by "it gets lost" i mean that it will display the LAST result from the mysql database.
so, to help you understand the situation I will explain it further:
Lets say I have 3 results stored in mysql database.
I create <a></a> from each result in mysql using PHP. i am doing this without any issue.
I click on the link 2. (works fine)
the content of the link 2 will load on the page using AJAX. (works fine)
The container of content will refresh every 5 seconds. (works fine)
(THIS IS WHERE THE PROBLEM STARTS) once the refresh happens, the content of link 3 will be displayed even though I haven't clicked on the link 3!
so basically, for some strange reason, the content of the last Link or last mysql result will be displayed at all time which is un-wanted. I need to load the content of the CLICKED link and make it stay until another Link is clicked.
I hope I haven't confused you. :)
here is my html code:
<div id="chattercontent" style="width:90%; height:150px; resize:none; border:solid 1px #ccc; background:#F2EDF0; overflow:scroll; text-align:left;"></div>
<script type="text/javascript">
$(document).ready(function () {
function load() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "file.php?u_id=<?php echo $u_id; ?>",
dataType: "html", //expect html to be returned
success: function (response) {
$("#chattercontent").html(response);
setTimeout(load, 5000)
}
});
}
load();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".list-group-item").click(function(e) {
e.preventDefault();
$("#chattercontent").load(this.href);
return false;
});
});
</script>
and PHP code for the links:
while (mysqli_stmt_fetch($stmt)) {
$product_list .= "<a id='listc' class='list-group-item' href='file.php?u_id=".$u_id."' >".$u_id." ".$date_added." <img src='light-red-flash.gif' width='20' /></a>";
}
}
any help would be appreciated.
Thanks
edit:
this is the code for file.php
<?php
session_start();
if (isset($_GET['u_id'])) {
$u_id = $_GET['u_id'];
$sql = "SELECT * FROM chat WHERE u_id='$u_id' ";
$query = mysqli_query($db_conx, $sql);
$productCount = mysqli_num_rows($query); // count the output amount
if ($productCount > 0) {
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
$user_message = $row["user_message"];
}
} else {
echo "Sorry, there was an error.";
exit();
}
echo $user_message;
}
?>
as I mentioned before, the file.php returns the result properly according to the link that have been clicked on but then it will JUMP on the last result after each refresh!

Answer 1

You need to keep track of the current url the user has selected:
$(document).ready(function () {
//set url 1st time
var currentUrl = "file.php?u_id=<?php echo $u_id; ?>";
//variable to reference the timeout
var timer;
function load(url) {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: url,
dataType: "html", //expect html to be returned
success: function (response) {
$("#chattercontent").html(response);
timer = setTimeout(function(){
load(currentUrl);
}, 5000);
}
});
}
load(currentUrl);
$(".list-group-item").click(function(e) {
e.preventDefault();
//update url on click
currentUrl = this.href;
//cancel existing timer
clearTimeout(timer);
load(currentUrl);
});
});

Answer 2

You aren't loading your dynamic content with the javascript function. Check out the following, hope it will fix your problem.
function load(href) {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: href,
//url: "file.php?u_id=<?php echo $u_id; ?>", <-- NON DYNAMIC CONTENT
dataType: "html", //expect html to be returned
success: function (response) {
$("#chattercontent").html(response);
setTimeout(function() {
load(href);
}, 5000)
}
});
}
var _currentUrl;
function load(href) {
if (!href) {
href = _currentUrl;
}
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: href,
//url: "file.php?u_id=<?php echo $u_id; ?>", <-- NON DYNAMIC CONTENT
dataType: "html", //expect html to be returned
success: function (response) {
$("#chattercontent").html(response);
setTimeout(load, 5000)
}
});
_currentUrl = href;
}

Answer 3

I am a bit confused. I would be glad if you would explain it a bit more with some examples.
Anyway from what I could get from your text is that, the previous result is being overwritten.
In order to stop that, as we do while making a chatbox, you need to add the response "after" the previous result as in -
<script type="text/javascript">
/* A variable to hold the last response */
var lastResponse = "";
$(document).ready(function () {
function load() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "file.php?u_id=<?php echo $u_id; ?>",
dataType: "html", //expect html to be returned
success: function (response) {
/* Check if it is the same response or not */
if (lastResponse != response)
{
/* Save the last response */
lastResponse = response;
/* Add content after the previous */
$("#chattercontent").html($("#chattercontent").html()+response);
}
setTimeout(load, 5000)
}
});
}
load();
});
</script>