infinite-scroll doesn't work well

Question

I try to use Infinite Scroll(https://infinite-scroll.com/), so I prepared jquery-3.2.1.min.js and infinite-scroll.pkgd.min.js.

Then I made a project that contains js files and PHP files. The file tree is below:

infscroll--index.php
          |
          -index-2.php
          |
          -js--
              |
              -infinite-scroll.pkgd.min.js
              |
              -jquery-3.2.1.min.js

And file contents are below:

index.php

<html>
<head>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    <script>
        $('.article-feed').infiniteScroll({
            path: '.pagination__next',
            append: '.article',
            status: '.scroller-status',
            hideNav: '.pagination'
        });
    </script>
</head>
<body>
<div class="article-feed">
    <p class="article">1</p>
    <p class="article">2</p>
</div>
<div class="scroller-status">
    <div class="infinite-scroll-request loader-ellips">
    </div>
    <p class="infinite-scroll-last" style="display: none">End of content</p>
    <p class="infinite-scroll-error" style="display: none">No more pages to load</p>
</div>
<p class="pagination">
    <a class="pagination__next" href="index-2.php">Next page</a>
</p>
</body>
</html>

index-2.php

<html>
<head>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    <script>
        $('.article-feed').infiniteScroll({
            path: '.pagination__next',
            append: '.article',
            status: '.scroller-status',
            hideNav: '.pagination'
        });
    </script>
</head>
<body>
<div class="article-feed">
    <p class="article">3</p>
    <p class="article">4</p>
</div>
<div class="scroller-status">
    <div class="infinite-scroll-request loader-ellips">
    </div>
    <p class="infinite-scroll-last" style="display: none">End of content</p>
    <p class="infinite-scroll-error" style="display: none">No more pages to load</p>
</div>

<p class="pagination">
    <a class="pagination__next" href="index-3.php">Next page</a>
</p>
</body>
</html>

I thought that the result is like

but the actual result is

1
2
Next page<-this is a link to index-2.php

Are there any mistakes? I couldn't understand infinite-scroll so There may be foolish mistakes.

please provide some feedback on whether my answer was or not helpful, and add the errors you might be getting as well as the full PHP files; say also if you are running a server properly. — user4396006
– user4396006, Commented Dec 19, 2017 at 16:27

score 1 · Accepted Answer · 2017-12-19 16:26:49Z

I cannot tell for sure since you are not giving any details, but I think that the main reason why that may be happening is that you are trying to load a .php file without a server-side app serving the files.

I really do not know how the plugin works, but if you are running the file locally there is a possibility that it is getting the raw PHP code without having been processed by the interpreter, which will very probably be causing errors shown in the console log.

The quick-fix for this would be running a proper PHP server or if you prefer, replace the PHP file with the HTML file (new programmers of PHP sometimes think that all their files must be called PHP, and that is not actually true; since PHP is just a preprocessor and not a programming language per se, you can interact with both HTML and PHP files depending on whether the content for that page is dynamic. That cannot be done with other "better" languages such as Python, where the server has a different model for serving the response and all the templates must be called as views from a controller).

If you actually want to get useful help from here, please post the full files and the errors you are getting, if any. Also, some other thoughts are:

remove display:none;, the official docs do not say that it is neccesary for it to work properly.
Check if the plugin file is correctly loaded in your browser.
Do the same for the jQuery.

Collectives™ on Stack Overflow

infinite-scroll doesn't work well

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related