I've built two functions in my home.php to load +10 posts in my feed. And it loads the twn new posts right with one flaw. It duplicates the whole of the home.php that its contained in. That is the header, the feed, the status holder and the load more tab. And I don't know why. How can I stop this from happening.Maybe put the stream in its own page and call it on its own?
<script>
var global_streamcount=20;
function refreshstream()
{
$.ajax({
method: 'get',
url : 'home.php?limit='+global_streamcount,
dataType : 'text',
success: function (text) { $('#homestatusid').prepend(text); }
});
}
</script>
<script>
function checkautoload(){
global_streamcount=global_streamcount+10;loadstream('home.php','homestatusid',global_streamcount);
}
</script>
HTML LOAD MORE
<div class="stream_show_posts" onClick="global_streamcount=global_streamcount+10;refreshstream();">Show More Posts</div>
PHP
if(isset($_GET['limit'])){
$sqllimit = $_GET['limit'];
}else{
$sqllimit = 20;
}
$call="SELECT * FROM streamdata WHERE streamitem_target= $following_string OR streamitem_creator = $following_string OR streamitem_creator IN $friendlist AND streamitem_target IN $friendlist ORDER BY streamitem_timestamp DESC LIMIT $sqllimit";
The call should be to another script, but if you want to keep in same file you have to exit you script and output only fetched items from database .. something like:
if(isset($_GET['limit'])){
if(isset($_GET['limit'])){
$sqllimit = (int)$_GET['limit'];
}else{
$sqllimit = 20;
}
$call="SELECT * FROM streamdata WHERE streamitem_target= $following_string OR streamitem_creator = $following_string OR streamitem_creator IN $friendlist AND streamitem_target IN $friendlist ORDER BY streamitem_timestamp DESC LIMIT $sqllimit";
echo "<div>Your contents echoed with results from db</div>"
die;
}
// rest of the page ..
I would use load() function to accomplish this:
<div class="stream_show_posts">Show More Posts</div>
<script>
$('div.stream_show_posts').on('click', function() {
global_streamcount=global_streamcount+10;
$('#your_posts_div_element').load('home.php?limit='+global_streamcount+' #your_posts_div_element');
});
</script>
This function will basically get all data from element called "your_posts_div_element" and replace old data with new into that same element on page.
Also, please note that using onClick handlers directly in elements is not recommended anymore - this, I used on() function to assign a click event to your DIV.