ajax call gives duplicate data

With jquery I created an ajax call. I use the GET method to get the data from the database with images. This ajax call is triggered by a scroll function. If the user reached the bottom activate the ajax call.
The first ajax call is activated if the document is ready and load 24 rows
After that I use the scroll function and load 12 rows everytime is the user scrolls to the bottom.

Sometimes the script load 2 the same images with the same ID.
It is duplicated but I cant find the problem. I tried different things to stop de scroll function is the ajax call is running and activate the scroll function if the ajax is success. Below is the jquery and php code

<script>

$(document).ready(function()
var count = 0;

//ajax call
$.ajax(
type: "GET",
url: "result.php",
data:
'offset': flag,
'limit':24
,
success: function(data)
$('.gallery').append(data);
count += 24;

);

$(window).on("scroll", windowScroll);


function wscroller(ev)

if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
$(".loading").fadeIn().stop();
$(window).off('scroll', wscroller);


$.ajax(
type: "GET",
url: "result.php",
data:
'offset': flag,
'limit': 12
,
success: function(data)
$(".loading").fadeOut(500).stop();
$('.gallery').append(data);
count += 12;
;
$(window).on("scroll", wscroller);

);

;
);
</script>





<?php
if(isset($_GET['offset']) && isset($_GET['limit']))

include_once 'config.php';

$offset = $_GET['offset'];
$limit = $_GET['limit'];



$data = mysqli_query($connection, "SELECT * FROM images ORDER BY uploaded_on DESC LIMIT $limit OFFSET $offset");

while($row = mysqli_fetch_array($data))

$imageURL = 'uploads/'.$row["file_name"];
$imageID = $row["id"];
$type = pathinfo($imageURL,PATHINFO_EXTENSION);
$path_parts = pathinfo($imageURL);
$fileExtension = $path_parts['extension'];
if($fileExtension == "jpg")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "JPG")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "png")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "PNG")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "jpeg")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "JPEG")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "gif")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "GIF")
print'<div class="grid_photo"><img class="photos" src="' . $imageURL . '" alt="" nr="' . $imageID . '" /></div>';
elseif($fileExtension == "mp4")
print'<div class="grid_video extra"><video controls class="videos"><source type="video/mp4" src="' . $imageURL . '" alt="" nr="' . $imageID . '"></video></div>';
elseif($fileExtension == "MP4")
print'<div class="grid_video extra"><video controls class="videos"><source type="video/mp4" src="' . $imageURL . '" alt="" nr="' . $imageID . '"></video></div>';





?>


How can I fix this problem?

3 Answers
3

Since the page reaches the end and sometimes it hit twice, so to avoid that you should use setTimeout() but before that you must clearTimeout(var);

setTimeout()

clearTimeout(var);

Hi initially you need to get the total result,
Then you need to calculate total number of pages.
For example
there are 120 results
12 pages because 12 result per request.
So totally you need to send 12 calls only

Set initial page as 1 in one hidden field.

When user scroll down to end of the page

Increment the page number by 1 and update the hidden field.

Then once again get page number from hidden field.

This because already 12 results loaded for next request we need to get result from 13 to 24.

Next check for page number <= total pages;
To avoid unwanted request s.

If yes then send request
Else leave it.

Now user scrolls down before loading the previous request.. The page number get increased and results will properly load.

Try this algorithm.

I solved the problem. The problem was not in the ajax call but in the SQL query. I sorted on "uploaded_on" and not on "ID". The uploader is multiple and images has the same date and time.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.