Your Location is: Home > Php

Connecting MySQL Database with Masonry + Infinite Scroll

From: San View: 3021 Threepwood 90 

Question

I'm more of the beginner type Web Developer, not a lot experience in MySQL and PHP.

I did some blog-websites with Masonry and want to upgrade it now to implement a MySQL Database so I don't have to hard code each blog post into the landing page anymore.

    <!DOCTYPE html>
    <html>

    <head>

    <meta charset="utf-8">
    <title>PHP TEST</title>
    <link href="css/gridstyle.css" rel="stylesheet" type="text/css">


    </head>

    <body>

    <!-- CONTENT -->
    <div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>

    <?php

    $conn = mysqli_connect("x", "y", "z", "database");
    $sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5";

    $result = mysqli_query($conn, $sql);
    while ($dsatz = mysqli_fetch_assoc($result)) {
        $rows = array();

        echo "<div class='grid-item'>";
        echo $dsatz['name'];
        echo "</div>";
      }

     ?>

    </div>

    <!-- BUTTON-->
      <p>
      <button class="view-more-button">View more</button>
    </p>

    <!-- END TEXTS -->
    <div class="page-load-status">
      <p class="infinite-scroll-last">End of content</p>
      <p class="infinite-scroll-error">No more pages to load</p>
    </div>

      <script src="js/jquery.min.js" type="text/javascript"></script>
      <script src="js/masonry.pkgd.js" type="text/javascript"></script>
      <script src="js/infinite-scroll.pkgd.min.js"></script>
      <script type="text/javascript">

      var elem = document.querySelector('.grid');
      var msnry = new Masonry( elem, {
      itemSelector: '.grid-item',
      gutter: '.gutter-sizer',
      });

    $('.grid').infiniteScroll({
    outlayer: msnry,
    path: 'content/Page_{{#}}.php',
    append: '.grid-item',
    scrollThreshold: false,
    button: '.view-more-button',
    status: '.page-load-status',
    history: false,
    status: '.page-load-status',
  });

  </script>

</body>

</html>

My problem now is to connect the second page. Infinite scroll expects to append ".grid-item" so if I put my php code on the second page nothing happens.

In the end I want each page to display 5 grid-items. I'd change

  $sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5";

to

  $sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5,5";

to show the next 5 rows.

Thanks for your time!

Best answer