Load data while scrolling the page with jQuery

Question

Load data while scrolling the page with jQuery

Navigation

#1 by (1 votes)

3

I need help completing a code I'm developing.

How can I do it, so that when the user enters the page the last 8 posts appear, and when the user scrolls, load the posts, within a loop, and at the end show the message "No there's nothing else here! " This is what I have 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 rolamento

asked by anonymous 07.03.2015 / 02:50

1 answer

Apache server does not execute .php files [closed] is there any way to tweak the width of the input and continue auto resizable in Bootstrap?

score 1 · Answer 1

I'm going to show an implementation where the non connection is via PDO , but it's about answering your non-secure connection question:

TEST

Create a table in the database named post

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

When scrolling down, the script ($(window).scroll) thinks you are at the bottom and calls 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;
  }

Font