Buen día amigos,
Estoy teniendo un problema que me tiene rompiendo la cabeza ya varios dias, estoy programando un muro (tipo facebook) y tengo dos problemas que no eh podido solucionar y ojala pudieran orientarme.
Problema #1. El scroll automatico no funciona correctamente, debería de mostrar los datos que le siguen al último post pero vuelve a mostrar los mismos datos en todas las paginas que le des para abajo.
Problema #2. Despues de bajar el scroll y que se vuelven a mostrar los datos repetidos ya no puedo interactuar con ellos como comentarlos o darle like porque me dice que el formulario esta vacío.
Dejo el código del wall.php
Código:
<?php
include_once("header.php");
$limit = 5; #item per page
$user_id = $_SESSION['user_id'];
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT p.*,u.name as username, pl.like_id from fb_post p left join fb_users u on u.user_id = p.user_id left join fb_post_likes pl on pl.post_id = p.post_id and pl.user_id = '$user_id' group by p.post_id order by post_id desc";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
$next = $page + 1;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
header('HTTP/1.0 404 Not Found');
echo 'Page not found!';
exit();
}
if(!isset($_SESSION['user_id']) || $_SESSION['user_id'] == ""){
header("location:index.php");
}
?>
<div class="wrapper">
<div class="middle_box">
<div class="feed_form">
<form action="" id="frmpost" method="post">
<div class="row_ele">
<textarea name="post_feed" id="post_feed" class="textarea" rows="3" placeholder="What's on your mind?"></textarea>
</div>
<div class="row_ele">
<input class="btn" id="btnpost" type="button" name="submit" value="Post"/>
</div>
</form>
</div>
<div class="clear"></div>
<div class="feed_div" id="feed_div">
<!-- loop row data -->
<?php while ($post = mysql_fetch_array($query)): ?>
<?php
$comments = getPostComments($post['post_id']);
?>
<div class="feed_box" id="postbox_<?php echo $post['post_id']; ?>">
<div class="feed_left">
<p><img class="userimg" src="<?php echo SITE_URL; ?>/usericon.gif"/></p>
<p><?php echo $post['username']; ?></p>
</div>
<div class="feed_right">
<p><?php echo $post['content']; ?></p>
<p class="likebox">
Total Like : <?php echo $post['total_like']; ?> |
<?php if(isset($post['like_id']) && $post['like_id'] != ""){ ?>
<a class="link_btn dis_like_btn" postid="<?php echo $post['post_id']; ?>" href="javascript:;">Dislike</a> |
<?php }else{ ?>
<a class="link_btn like_btn" postid="<?php echo $post['post_id']; ?>" href="javascript:;">Like</a> |
<?php } ?>
<a class="link_btn" href="javascript:;">Comment</a>
</p>
<div class="clear"></div>
<?php if($comments){ ?>
<div class="comment_div">
<?php foreach($comments as $comment){ ?>
<div class="clear"></div>
<div class="comment_ele">
<p><a class="link_btn" href="javascript:;"><?php echo $comment['username']; ?></a></p>
<p><?php echo $comment['comment']; ?></p>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="clear"></div>
<p>
<form id="commentform_<?php echo $post['post_id']; ?>" method="post">
<input type="hidden" name="action" value="comment"/>
<input type="hidden" name="post_id" value="<?php echo $post['post_id']; ?>"/>
<input class="input comment_input" type="text" name="comment" id="comment_<?php echo $post['post_id']; ?>" placeholder="your comment"/>
<input class="submitbtn btn" postid="<?php echo $post['post_id']; ?>" type="button" name="sendbtn" value=">"/>
</form>
</p>
</div>
<div class="clear"></div>
</div>
<?php endwhile?>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<!--page navigation-->
<?php if (isset($next)): ?>
<div class="nav">
<a href='index.php?p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
<?php
include_once("footer.php");
?>
<script type='text/javascript'>
$(document).ready(function(){
$(".submitbtn").live("click",function(){
var post_id = $(this).attr('postid');
var comment = $("#comment_"+post_id).val();
if(comment == ''){
alert("comment can't be empty!");
return false;
}else{
$.ajax({
type: "POST",
data: $('#commentform_'+post_id).serialize(),
url: '<?php echo SITE_URL; ?>/functions.php',
dataType: 'json',
success: function(response) {
if(response.ResponseCode == 200){
$('#postbox_'+post_id).load('<?php echo SITE_URL; ?>/wall.php #postbox_'+post_id+' >*');
}else{
alert(response.Message);
}
}
});
}
});
$(".like_btn").live("click",function(){
var post_id = $(this).attr('postid');
$.ajax({
type: "POST",
data: {'post_id':post_id,'action':'like'},
url: '<?php echo SITE_URL; ?>/functions.php',
dataType: 'json',
success: function(response) {
if(response.ResponseCode == 200){
$('#postbox_'+post_id).load('<?php echo SITE_URL; ?>/wall.php #postbox_'+post_id+' >*');
}else{
alert(response.Message);
}
}
});
});
$(".dis_like_btn").live("click",function(){
var post_id = $(this).attr('postid');
$.ajax({
type: "POST",
data: {'post_id':post_id,'action':'dislike'},
url: '<?php echo SITE_URL; ?>/functions.php',
dataType: 'json',
success: function(response) {
if(response.ResponseCode == 200){
$('#postbox_'+post_id).load('<?php echo SITE_URL; ?>/wall.php #postbox_'+post_id+' >*');
}else{
alert(response.Message);
}
}
});
});
$("#btnpost").click(function(){
var post = $("#post_feed").val();
if(post == ""){
alert("Post Feed Data can't be empty!");
return false;
}else{
$.ajax({
type: "POST",
data: {'post_feed':post,'action':'post'},
url: '<?php echo SITE_URL; ?>/functions.php',
dataType: 'json',
success: function(response) {
if(response.ResponseCode == 200){
$("#post_feed").val("");
$('#feed_div').load('<?php echo SITE_URL; ?>/wall.php #feed_div');
}else{
alert(response.Message);
}
}
});
}
});
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.feed_div', // main container where data goes to append
item: '.feed_box', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<br/><center><img src="css/ajax-loader.gif"/></center>', // loading gif
triggerPageThreshold: 3 // show load more if scroll more than this
});
});
});
</script>
Siento que el problema se soluciona simple en el Ajax (ya que no soy muy bueno) y algo me dice que solucionando el primer problema se arregla el segundo, pero ya probe de todo y no lo hago funcionar, espero puedan ayudarme, saludos y gracias.