0

I have the following script that causes the page to fetch more records from the database and load them at the end of the page. It's working well in Safari 10.0 on Mac but not with Google Chrome 53.0.2785.143. If I resize the Chrome browser window down to almost smartphone size it does then start to work.

There's nothing in the Console when it's not working so there aren't any errors to debug. If I watch the web server log there are no requests when I attempt to scroll down the page so nothing is happening at all.

Here's the script:

< script type = "text/javascript" >
  var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;
  }
});

function loadArticle(pageNumber) {
  $('#inifiniteLoader').show('fast');
  $.ajax({
    url: "getMoreEvents.php",
    type: 'POST',
    data: "action=" + action + "&skip=" + skip,
    success: function(html) {
      $('#inifiniteLoader').hide('1000');
      $("#content").append(html); // This will be the div where our content will be loaded
    }
  });
  return false;
} < /script>
user982124
  • 3,802
  • 11
  • 50
  • 116
  • So the goal is to trigger the load if the user scrolls as far down as possible? What if the document's height is less than the window height and no scroll bars are displayed? – nnnnnn Oct 07 '16 at 05:36
  • What does the network tab show in Chrome's inspector? Are the requests being sent? Do they get responses? Do you get the data you expect? – LinuxDisciple Oct 07 '16 at 05:42
  • @LinuxDisciple there's nothing in the network tab when I attempt to scroll down the page. Web server access log not showing any requests either. Only if I resize browser window right down does it start to work in Chrome. – user982124 Oct 07 '16 at 05:52
  • A comment not directly regarding your issue but just to be sure: sending the `action` variable in the POST data is just for testing, right?! Otherwise this would allow arbitrary PHP code execution by overriding `window.action` with what I want or calling the URL by myself directly... – Michael Rose Oct 07 '16 at 06:11

2 Answers2

1
$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;
Dusan Nikolic
  • 39
  • 9
  • While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Baum mit Augen Oct 17 '17 at 22:59
0

I had the exactly same issue. It was working on every browser that I tried and even on chrome running at local server, but not when I was deploying my project to Heroku running at https secure server. It's pretty annoying this behavior of what appears to be a bug on Chrome.

The solution is call the function before page end, with a small "gap".

The solution is here: solution by Vytaliy Makovyak

rocknhouse
  • 11