Блог

У меня есть мой ajax, который говорит, что когда пользователь добирается до нижней части страницы, он загружает PHP-скрипт. На iPhone он загружает один и тот же код несколько раз (он загружает id # 5, затем будет постоянно загружать id # 4 снова и снова — на ПК он загружает id # 5 вплоть до id # 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;'>";
  }

?>
  

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

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

Ваш 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;
      }
    }
          );
    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 amp;amp; !d;
      clearTimeout(d), d = setTimeout(g, b), h amp;amp; a.apply(e, f)
    }
  }
  function getScrollXY() {
    var a = 0,
        b = 0;
    return "number" == typeof window.pageYOffset ? (b = window.pageYOffset, a = window.pageXOffset) : document.body amp;amp; (document.body.scrollLeft || document.body.scrollTop) ? (b = document.body.scrollTop, a = document.body.scrollLeft) : document.documentElement amp;amp; (document.documentElement.scrollLeft || document.documentElement.scrollTop) amp;amp; (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>