Upload content automatically by the end of the page

Question

Upload content automatically by the end of the page

Navigation

#1 by (8 votes)
#2 by (1 votes)
#3 by (-1 votes)

7

I want to do an automatic type pagination of Facebook, which when it reaches the bottom of the page it automatically loads another page with more posts. I've already researched the subject and found nothing that could really help me to the point where I can.

The code I use to list posts is this:

<?php 
  $post = $pdo->query("SELECT * FROM postagens")->fetchAll();
if(!$post){
  print_r($pdo->errorInfo());
} 
foreach ($post as $posts){
?>

I tried to do what @abfurlan said and by the way I did something wrong.

The page index.php looks like this:

<?php require_once"../conexao.php"?>

<style>
#conteudo{
width:100px; background:#CCC;
height:200px;
overflow-y:auto;
}
</style>

<script src="JS/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#conteudo").scroll(function() { 
    if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
      //requisição ajax para selecionar postagens
      $.ajax({
       url:'postagens.php', //Página PHP que seleciona postagens
       type:'POST', // método post, GET ...
       data: 'limit=5&offset=0', //seus paramêtros
       success: function(data){ // sucesso de retorno executar função
         $('#conteudo').append(data); // adiciona o resultado na div #conteudo
       } // fim success
    }); // fim ajax
  } // fim do if
}); // fim scroll
}); // fim document ready
</script>

<div id="conteudo">
</div>

And the postagens.php page looks like this:

<?php require_once "../conexao.php" ?>

<?php 
$post = $pdo->query("SELECT * FROM postagens LIMIT 5 OFFSET 0")->fetchAll();
if(!$post){
    print_r($pdo->errorInfo());
} 
foreach ($post as $posts){
?>

<?php echo $posts['ID']; echo "<br>"?>

<?php } ?>

Nothing is happening ...

jquery pdo

asked by anonymous 16.06.2014 / 21:49

3 answers

1

$(document).ready(function(){
    $(document).scroll(function() {

        var bottomDiv = $('#div-alvo').height() + $('#div-alvo').offset().top;
        var bottomWindow = $(window).height() + $(window).scrollTop());

        if (bottomWindow > bottomDiv ) {

            //Requisição


        } // fim do if
    }); // fim scroll
});

bottomDiv is the position in pixels from where the target div ends. bottomWindow is the bottom of the user's screen.

When the bottom of the user's screen exceeds the target div's bottom, a new request must be made.

I hope I have helped.

28.06.2016 / 21:15

-1

10

document.getElementById ("bcen"). style.align="center"; // Center document.getElementById ("bcen") style.width = "300px"; // Size document.getElementById ("bcen"). style.align="center"; // Center document.getElementById ("bcen"). style.height = "200px"; // Size

27.07.2018 / 01:09

How to import data from excel pro R? Polymorphism in Java

score 8 · Accepted Answer

The technique you seek is called content on demand or infinite scroll.

Let's say you have in your code a div that loads your content

<div id="conteudo">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
</div>

And this div has a fixed height and overflow-y:scroll :

#conteudo{
    height:200px;
    overflow-y:auto;
}

Then you implement a jQuery code, so that whenever the scroll reaches the end of div , an ajax request is made to select more posts:

$(document).ready(function() {
    $("#conteudo").scroll(function() { 
      if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
        //requisição ajax para selecionar postagens
        $.ajax({
           url:'minha_pagina_acesso_banco.php', //Página PHP que seleciona postagens
           type:'POST', // método post, GET ...
           data: 'limit=10&offset=0', //seus paramêtros
           success: function(data){ // sucesso de retorno executar função
             $('#conteudo').append(data); // adiciona o resultado na div #conteudo
           } // fim success
        }); // fim ajax
      } // fim do if
    }); // fim scroll
}); // fim document ready

In your code that selects the postings you can make LIMIT , OFFSET

SELECT * FROM postagens LIMIT 10 OFFSET 0 ORDER BY DESC;

In your PHP page, treat the parameters received by ajax to perform the query

<?php 
$sql = "SELECT * FROM postagens LIMIT ? OFFSET ?";
$stm = $pdo->prepare($sql);
$stm->execute(array($_POST['limit'],$_POST['offset']));
$post = $stm->fetchAll(PDO::FETCH_ASSOC);

if(!$post){
    print_r($pdo->errorInfo());
} 
foreach ($post as $posts){
    echo $posts['ID']; echo "<br>";
} ?>

And according to scroll you increment these values in the ajax request to select more posts.

Here's a simple example of the jQuery code