Getting doubles in my AJAX query

Ivan Ivković · June 6, 2012

The template file.


<?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:

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.

Ivan Ivković · June 11, 2012

Anyone? :S

smoseley · June 11, 2012

Try this?

$items = $pic -> getInfiniteScrollData($pic_id + 1);

Sign In

Getting doubles in my AJAX query

Recommended Posts

Ivan Ivković

Link to comment

Share on other sites

Ivan Ivković

Link to comment

Share on other sites

smoseley

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information