| ivanivkovich |
06-06-2012 02:39 PM |
Getting doubles in my AJAX query
The template file:
Code:
<?php include(WIDGETS . 'html_head.php'); ?>
<link rel="stylesheet" type="text/css" href="/src/styles/masonry.css"/>
</script>
</head>
<body id="<?php echo $this -> registry -> router -> page ?>">
<div id="background"></div>
<?php include(WIDGETS . 'navigation.php'); ?>
<div id="container" style="position: absolute; top: 80px;">
<?php
$result = $this -> registry -> db -> query('SELECT * FROM sc_pics ORDER BY pic_id DESC LIMIT 20');
$world = new WorldDatabase($this -> registry -> db);
$cat = new Categories($this -> registry -> db);
include('includes/fbconfig.php');
while($fetch = $result -> fetch_array()){ ?>
<div class="element item" id="pic_<?php echo $fetch['pic_id'] ?>">
<?php
echo '<img src="/thumb.php?pic=content/pics/' . $fetch['user_id'] . $fetch['src'] . '&h=200&w=210"/>';
?>
</div>
<?php
}
?>
</div>
<input type="hidden" id="last_id"/>
<script>
$('#last_id').attr('value', $('.item:last').attr('id'));
</script>
<script type="text/javascript" src="/src/scripts/masonry.js"></script>
<script type="text/javascript">
var container = document.getElementById('container');
var wall = new Masonry( container, {isFitWidth: true });
var boxMaker = {};
boxMaker.makeBoxes = function(last_id){
var boxes = [];
var request = $.ajax({
url: '/ajax/infinite_scroll/',
type: 'POST',
data: { last_id : last_id },
dataType: 'json'
});
request.fail(function(jqXHR, textStatus){
alert( "Request failed: " + textStatus);
});
request.done(function(data){
ndata = data;
return data;
});
if(!ndata.error){
$('#last_id').val('pic_' + ndata.pic_id);
alert('NEW ID: pic_' + ndata.pic_id + ',' + ' NEW LAST ID: ' + $('#last_id').val());
var box = document.createElement('div');
text = document.createElement('img');
text.src = '/thumb.php?pic=content/pics/' + ndata.user_id + ndata.src + '&h=200&w=210"';
box.className = 'element item masonry-brick';
box.id = 'pic_' + ndata.pic_id;
box.appendChild( text );
boxes.push( box );
}else{
if(ndata.error != 'complete'){
alert(ndata.error);
}
}
return boxes;
};
window.onscroll = function(){
if(($(document).height() - $(window).height() - $(document).scrollTop()) < 300){
var container = document.getElementById('container');
var wall = new Masonry( container, {isFitWidth: true });
var last_id = $('#last_id').val();
alert('Start LAST ID: ' + last_id );
var boxes = boxMaker.makeBoxes(last_id);
for (var i=0; i < boxes.length; i++) {
container.appendChild( boxes[i] );
}
wall.appended( boxes );
}
}
</script>
</body>
</html>
This is an infinite scroll I'm doing and I store my last picture ID in an input type hidden element for the AJAX -> PHP to know from which ID to continue outputting pictures. However, this last_id does not function properly and the app makes double pictures.
I put up alert boxes for testing purposes, hope they help you too.
PHP side:
Code:
public function infinite_scroll(){
header("Content-Type: application/json");
if(!empty($_POST)){
if(isset($_POST['last_id'])){
$pic_id = end(explode('_', $_POST['last_id']));
$security = new Security($this -> registry -> db);
$pic = new Picture($this -> registry -> db);
if($security -> checkNum($pic_id)){
$items = $pic -> getInfiniteScrollData($pic_id);
if($items !== false ){
foreach($items as $key => $value){
$data[$key] = $value;
}
}else{
$data = array(
'error' => 'complete'
);
}
}else{
$data = array(
'error' => 'Invalid input!'
);
}
}
}
echo json_encode($data);
}
URL : http://pixpresso.mycyberlove.com
Pls help. |
