Загрузка кода PHP с помощью ajax при прокрутке вниз страницы - не работает на iPhone

Question

У меня есть мой ajax, который говорит, что когда пользователь попадает в конец страницы, он загружает скрипт PHP.На iPhone он загружается один и тот же один раз (он загружает идентификатор № 5, затем будет постоянно загружать идентификатор № 4 снова и снова - на ПК он загружает идентификатор № 5 до идентификатора № 1.)

index.php- AJAX

<script>
    $(document).ready(function(){
      var loadLogs = 0;

      $.ajax({
        type: 'GET',
        url: 'inc/loadLogs.php',
        data:{
          'offset': 0,
          'limit': 1
        },
        success: function(data){
          $('#showAuditLogs').append(data);
          loadLogs += 1;
        }
      });

      $(window).scroll(function(){
        if($(window).scrollTop() >= $(document).height() - $(window).height()){
          $.ajax({
            type: 'GET',
            url: 'inc/loadLogs.php',
            data:{
              'offset': loadLogs,
              'limit': 1
            },
            success: function(data){
              $('#showAuditLogs').append(data);
              loadLogs += 1;
            }
          });
        }
      });
    });
  </script>

index.php - HTML

<div id="showAuditLogs">

</div>

loadLogs.php

<?php

  include 'database.php';

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

  $logs = DB::query("SELECT * FROM auditlog ORDER BY id DESC LIMIT $limit OFFSET $offset");
  foreach($logs as $l){
    $action = $l['action'];
    $logId = $l['id'];
    echo "<p class='card-text'><strong>$logId </strong>$action</a></p><hr style='background-color: white;'>";
  }

?>

Answer 1

Попробуйте создать элемент, например кнопку, которая будет загружать скрипт при нажатии на него, а затем использовать этот код для запуска кнопки при прокрутке вниз (работает на всех устройствах):

var CheckIfScrollBottom = debouncer(function() {
    if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
        $('your button id or class').trigger('click');
    }
});

Ваш Аякс будет:

<script>
  $(document).ready(function(){
    var loadLogs = 0;
    $.ajax({
      type: 'GET',
      url: 'inc/loadLogs.php',
      data:{
        'offset': 0,
        'limit': 1
      }
      ,
      success: function(data){
        $('#showAuditLogs').append(data);
        loadLogs += 1;
      }
    }
          );
    var CheckIfScrollBottom = debouncer(function() {
      if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
        $.ajax({
          type: 'GET',
          url: 'inc/loadLogs.php',
          data:{
            'offset': loadLogs,
            'limit': 1
          }
          ,
          success: function(data){
            $('#showAuditLogs').append(data);
            loadLogs += 1;
          }
        }
              );
      }
    }
                                       );
  }
                   );
  document.addEventListener('scroll', CheckIfScrollBottom);
  function debouncer(a, b, c) {
    var d;
    return function() {
      var e = this,
          f = arguments,
          g = function() {
            d = null, c || a.apply(e, f)
          }
      ,
          h = c && !d;
      clearTimeout(d), d = setTimeout(g, b), h && a.apply(e, f)
    }
  }
  function getScrollXY() {
    var a = 0,
        b = 0;
    return "number" == typeof window.pageYOffset ? (b = window.pageYOffset, a = window.pageXOffset) : document.body && (document.body.scrollLeft || document.body.scrollTop) ? (b = document.body.scrollTop, a = document.body.scrollLeft) : document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop) && (b = document.documentElement.scrollTop, a = document.documentElement.scrollLeft), [a, b]
  }
  function getDocHeight() {
    var a = document;
    return Math.max(a.body.scrollHeight, a.documentElement.scrollHeight, a.body.offsetHeight, a.documentElement.offsetHeight, a.body.clientHeight, a.documentElement.clientHeight)
  }
</script>