4

Preciso de ajuda para concluir um código que estou desenvolvendo.

Como eu posso fazer, para que, quando o usuário entrar na página já aparecer os 8 últimos posts, e, quando o usuário der o scroll, carregar os posts, dentro de um loop, e ao fim mostrar a mensagem "Não há mais nada aqui!". Isto é o que tenho inicialmente:

.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);
            });
        }
    }
});

carrega.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...
5
  • 1
    Como o scroll é infinito se existe uma mensagem que identifica o limite?
    – Lollipop
    7/03/2015 às 1:56
  • Você quer que os posts surjam de acordo com a rolagem do scroll e quando todos forem apresentados, surge a mensagem?
    – Lollipop
    7/03/2015 às 1:57
  • 1 - scroll infinito não ao pé da letra, hehe. 2 - Sim, @Lollipop De preferência, de 8 em 8 posts, após todos serem apresentados mostrar a mensagem.
    – Igor
    7/03/2015 às 2:05
  • Essa resposta pode ajudar. Ajustando ao seu caso, basta começar com um evento que faça um load com PG=1. 7/03/2015 às 2:16
  • Eu já tentei mostrar as 8 últimas antes da rolagem, mas nada acontece. Segue o código: pastebin.com/gP5nVQyB porém, ao entrar na página nada acontece, nenhuma mensagem é carregada e não retorna erro algum no console.
    – Igor
    7/03/2015 às 2:25

1 Resposta 1

2

Vou mostrar uma implementação onde a conexão não é via PDO, mas trata-se de responder sua pergunta que não é sobre conexão segura:

TESTE

Crie uma tabela no banco chamada post

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

Quando houver rolagem para baixo, o script ($(window).scroll) acha que você está na parte inferior e chama o ultimo_post_funtion(). Dê uma olhada em $.post(""), por exemplo: $.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;
  }

Fonte

5
  • Obrigado por se disponibilizar a ajudar, eu já havia visto essa postagem no 9lessons, porém queria fazer algo "na unha", somente na lógica sem códigos de nenhum lugar, por isso das dúvidas. Bem, vou tentar entender a lógica e continuar com meu código.
    – Igor
    7/03/2015 às 2:54
  • Boa sorte, man!!
    – Lollipop
    7/03/2015 às 2:57
  • 3
    Muito obrigado @Lollipop! Pela força! Persisti com meu código e consegui desenvolver. Estou tão orgulhoso de mim mesmo (pois agora que estou me familiarizando com php) uhuuull!!! Deus te abençoe pelo apoio haha!
    – Igor
    7/03/2015 às 3:25
  • 2
    @Igor, parabéns por escolher o caminho mais 'longo'. A persistência é mais importante que obter uma resposta pronta. :) 7/03/2015 às 3:29
  • 1
    Com certeza, @PapaCharlie, muito obrigado também!
    – Igor
    7/03/2015 às 3:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .