0

This script loads more SQL records by scrolling down the page. This works great on a computer but on a iPhone it don't work right and on android this does not work at all. So why does this work perfectly on a computer but it does not work right on mobile devices meaning on those mobile devices it does not load more SQL records. Any code advice will be really appreciated.

index.php

<!DOCTYPE html>
<html>
<head>
<style>

#load-more-button {
width: 100px;
margin: auto;
display: block;
}

.results-container {
width: 350px;
margin: auto;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
<script type="text/javascript">
$(document).ready(function (){

/*<load more records by page scrolling script>*/

//<settings define
var start = 0;
var limit = 10;
//

//Call the ajax request on page load
getData();
//

//load more records by page scrolling
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()){
getData();
}
});
//

/*<function>*/
function getData() {

//settings variable
var settings = {
getData: 1,
start: start,
limit: limit
};
//

//result variable
var result= function(response) {
start += limit;
$(".results-container").append(response);
}
//

//request
$.ajax({
url: 'data.php',
type: 'POST',
dataType: 'text',
data: settings,
success: result 
});
}
/*</function>*/
/*</load more records by page scrolling script>*/

});
</script>
</head>
<body>

<div class="results-container"></div>

</body>
</html>

data.php

<?php
$servername='localhost';
$username='x';
$password='1234';
$db_name= 'x';

$connect = new mysqli($servername,$username,$password,$db_name);

$start = $connect->real_escape_string($_POST['start']);
$limit = $connect->real_escape_string($_POST['limit']);

$query = "SELECT*FROM user_details LIMIT $start, $limit";

$result= $connect->query($query);

?>
<style>
#number{
background-color: gold;
color: black;
border-radius: 100%;
padding: 5px;
}

h2{
display: inline-block;
}

</style>

<?php while($row = $result->fetch_assoc()) { ?>

<h2 id='number' ><?php echo $row['user_id']; ?></h2>
<h2><?php echo $row['username']; ?></h2>
<p><?php echo $row['password']; ?></p>

<?php } ?>
  • Usually things that do not work on mobile devices is usually because of data charges, in which the user MUST request the data by some form of interaction from the viewer such as a URL click, also with AJAX its recommended to change the URL as it can be cached, so a unix time stamp at the end can help ensure the url is always different – DataCure Mar 02 '18 at 23:33
  • could you more clearly explain how this not working on mobile? Is loading the initial 10 rows, but failing to update on scroll? – gmfm Mar 03 '18 at 00:44
  • @DataCure I notice this does not work on the Opera browser on the desktop so I think it's browser base rather than mobile based –  Mar 03 '18 at 02:44
  • @gmfm I mentioned that when this is viewed on a mobile device it does not even load additional sql records at all but on page load it just shows 10 but when you scroll to the bottom of the page it suppose to show 10 more additionally. I tested this with a button version instead of scroll and it works on all the browsers so I assume the scroll section of the code has compatibility issues on certain browsers so how can I get this to work on most browsers? –  Mar 03 '18 at 02:44
  • @gmfm It seems that $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()){ getData(); } is the issue but I can't seem to find another way how I can make this work on most browsers. –  Mar 03 '18 at 02:47
  • @fsofb https://stackoverflow.com/questions/44744586/scroll-event-not-working-on-mobile, a few other posts on this as well. I think you may have to catch the touch/click event and compare beginning position to end position, or utilize and js mobile library. – gmfm Mar 03 '18 at 03:21

0 Answers0