Load data during page scrolling with jQuery

Asked

Viewed 926 times

4

I need help to complete a code I’m developing.

How can I do, so that when the user enters the page already appear the last 8 posts, and when the user gives the scroll, load the posts, within a loop, and at last show the message "There is nothing else here!". This is what I got initially:

.js:

$(window).scroll(function() {
    var pagina = 0;
    if(document.URL.indexOf("/mensagens/") != -1) {
        if($(this).scrollTop() == $(document).height() - $(window).height()) {
            var idP = parseInt(pagina) + parseInt(8);

            $.post("../carrega.php", {id: idP}).done(function(msgs) {
                $(".row").append(msgs);
            });
        }
    }
});

loads.php:

$pID = $_POST["id"];

if(isset($pID)) {
    if($pID >= 1) {
        $query = $bd -> query("SELECT * FROM msgs ORDER BY id DESC LIMIT $pID, 8");
    } else {
        $query = $bd -> query("SELECT * FROM msgs ORDER BY id DESC LIMIT 0, 8");
    }

    $fetch = $query -> fetchAll(PDO::FETCH_ASSOC);
    $count = $query -> rowCount(); //e ai faço todo o foreach, etc...
php jquery rolling
  • 1

    How the scroll is infinite if there is a message that identifies the limit?

  • You want the posts to appear according to the scroll scroll and when all are presented, the message appears?

  • 1 - infinite scroll not to the letter, hehe. 2 - Yes, @Lollipop.

  • That answer can help. Adjusting to your case, just start with an event that loads with PG=1.

  • I’ve tried showing the last eight before the roll, but nothing happens. Follow the code: http://pastebin.com/gP5nVQyB however, when entering the page nothing happens, no message is loaded and does not return any error in the console.

1 answer

2

I will show an implementation where the connection nay is via PDO, but it’s about answering your question that’s not about secure connection:

TEST

Create a table in the database called post

CREATE TABLE post(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);

When there is scrolling down, the script ($(window).scroll) thinks you’re at the bottom and calls the ultimo_post_funtion(). Take a look at $.post(""), for example: $.post("load_data.php? action=get&ultimo_post_id=35")

load_data.php

<?php
include('config.php');
$ultimo_post_id=$_GET['ultimo_post_id'];
$action=$_GET['action'];

if($action <> "get")
{
?>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    function ultimo_post_funtion() 
    { 
        var ID=$(".message_box:last").attr("id");
        $('div#ultimo_post_loader').html('<img src="bigLoader.gif">');
        $.post("load_data.php?action=get&ultimo_post_id="+ID,

        function(data){
            if (data != "") {
                $(".message_box:last").after(data); 
            }
            $('div#ultimo_post_loader').empty();
        });
    }; 

    $(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
    ultimo_post_funtion();
    }
    }); 
});

</script>
</head>
<body>
<?php 
include('load_1.php'); //Include load_1.php 
?>
<div id="ultimo_post_loader"></div>
</body>
</html>
<?php
}

else
{
include('load_2.php'); //include load_2.php
}
?>

load_1.php

<?php
$sql=mysql_query("SELECT * FROM post ORDER BY mes_id DESC LIMIT 4");
while($row=mysql_fetch_array($sql))
{
    $msgID= $row['mes_id'];
    $msg= $row['msg'];
    ?>
    <div id="<?php echo $msgID; ?>" class="message_box" > 
    <?php echo $msg; ?>
    </div> 
    <?php
} 
?>

load_2.php

<?php
$ultimo_post_id=$_GET['ultimo_post_id'];
//mostrando 4 post
$sql=mysql_query("SELECT * FROM post WHERE mes_id < '$ultimo_post_id' ORDER BY mes_id DESC LIMIT 4");
$ultimo_post_id="";
while($row=mysql_fetch_array($sql))
{
    $msgID= $row['mes_id'];
    $msg= $row['msg']; 
    ?>
    <div id="<?php echo $msgID; ?>" class="message_box" > 
    <?php echo $msg; 
    ?>
    </div>
<?php
} 
?>

CSS

body
  {
    font-family:'Georgia',Times New Roman, Times, serif;
    font-size:18px;
  }
  .message_box
  {
    height:60px;
    width:600px; 
    border:dashed 1px #48B1D9; 
    padding:5px ;
  }
  #last_msg_loader
  {
    text-align: right;
    width: 920px;
    margin: -125px auto 0 auto;
  }
  .number
  {
    float:right; 
    background-color:#48B1D9; 
    color:#000; 
    font-weight:bold;
  }

Source

  • Thanks for being willing to help, I had already seen this post in 9lessons, but I wanted to do something "in the nail", only in logic without codes anywhere, so I doubt. Well, I’ll try to understand the logic and continue with my code.

  • Good luck, man!!

  • 3

    Thank you very much @Lollipop! By force! I persisted with my code and managed to develop. I am so proud of myself (because now that I am getting acquainted with php) uhuuull!!! God bless you for haha support!

  • 2

    @Igor, congratulations on choosing the longest path. Persistence is more important than getting a ready answer. :)

  • 1

    Sure, @Papacharlie, thank you very much too!

Browser other questions tagged php jquery rolling

You are not signed in. Login or sign up in order to post.