0

Hola buenas Noches ó Días tengan hoy bueno el problema que tengo con este codigo es para cargar contenido cuando mueves la barra del navegador a la parte de abajo y lo que yo quiero hacer y no puedo es que funcione dentro del un div usando el scroll asi como el chat de Facebook espero que me puedan ayudar con eso y Gracias por adelantado

ajax.js

$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
        if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
            $.ajax({
                type:'POST',
                url:'datos.php',
                data:'id='+lastID,
                beforeSend:function(html){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#postList').append(html);
                }
            });
        }
    });
});

dbConfig.php

<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'shareiv';

//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Unable to connect database: " . $db->connect_error);
} 
?>

index.php

<?php
//Include DB configuration file
include('dbConfig.php');
?>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<script src="ajax.js"></script>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="post-list" id="postList">
            <?php
            //get rows query
            $query = $db->query("SELECT * FROM chat WHERE post=1 ORDER BY id DESC LIMIT 7");
            if($query->num_rows > 0){ 
                while($row = $query->fetch_assoc()){ 
                    $postID = $row["id"];
            ?>
                <div class="list-item"><a href="javascript:void(0);"><h2><?php echo $row['mensaje']; ?></h2></a></div>
            <?php } ?>
            <div class="load-more" lastID="<?php echo $postID; ?>" style="display: none;">
                <img src="https://cdn.dribbble.com/users/503653/screenshots/3143656/fluid-loader.gif"/>
            </div>
            <?php } ?>
            </div>
        </div>
    </div>
</div>

datos.php

<?php
if(isset($_POST["id"]) && !empty($_POST["id"])){

//Include DB configuration file
include('dbConfig.php');

//Get last ID
$lastID = $_POST['id'];

//Limit on data display
$showLimit = 5;

//Get all rows except already displayed
$queryAll = $db->query("SELECT COUNT(*) as mensaje FROM chat WHERE id < ".$lastID." ORDER BY id DESC");
$rowAll = $queryAll->fetch_assoc();
$allNumRows = $rowAll['mensaje'];

//Get rows by limit except already displayed
$query = $db->query("SELECT * FROM chat WHERE id < ".$lastID." ORDER BY id DESC LIMIT ".$showLimit);

if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){ 
        $postID = $row["id"]; ?>
        <div class="list-item"><a href="javascript:void(0);"><h2><?php echo $row["mensaje"]; ?></h2></a></div>
<?php } ?>
<?php if($allNumRows > $showLimit){ ?>
    <div class="load-more" lastID="<?php echo $postID; ?>" style="display: none;">
        <img src="loading.gif"/>
    </div>
<?php }else{ ?>
    <div class="load-more" lastID="0">
        That's All!
    </div>
<?php }
    }else{ ?>
    <div class="load-more" lastID="0">
        That's All!
    </div>
<?php
    }
}
?>

css.css

.post-list{ 
    margin-bottom:20px;
}
div.list-item {
    border-left: 4px solid #7ad03a;
    margin: 5px 15px 2px;
    padding: 1px 12px;
    background-color:#F1F1F1;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    height: 60px;
}
div.list-item p {
    margin: .5em 0;
    padding: 2px;
    font-size: 13px;
    line-height: 1.5;
}
.list-item a {
    text-decoration: none;
    padding-bottom: 2px;
    color: #0074a2;
    -webkit-transition-property: border,background,color;
    transition-property: border,background,color;-webkit-transition-duration: .05s;
    transition-duration: .05s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.list-item a:hover{text-decoration:underline;}
.load-more {
    margin: 15px 25px;
    cursor: pointer;
    padding: 10px 0;
    text-align: center;
    font-weight:bold;
}
.list-item h2{font-size:25px; font-weight:bold;text-align: left;}

2 respuestas 2

2

Usa prepend, en vez de usar el tipico append

$('#div').prepend("html");

Aqui tienes funciones jquery

5
  • tienes razon gracias
    – Shareiv
    Commented el 30 nov. 2017 a las 5:08
  • amigo tengo otra pergunta no se si me puedes ayudar tengo una recompensa de 50 puntos
    – Shareiv
    Commented el 30 nov. 2017 a las 5:09
  • es.stackoverflow.com/questions/119761/…
    – Shareiv
    Commented el 30 nov. 2017 a las 5:09
  • Ahora lo reviso. Commented el 30 nov. 2017 a las 5:13
  • gracias amigos :)
    – Shareiv
    Commented el 30 nov. 2017 a las 5:16
1

Algo como...

  if ( $("#div").scrollTop() < 10 ) {

    ... traer mensajes ...

  } 
3
  • no me funciona tu code
    – Shareiv
    Commented el 30 nov. 2017 a las 4:31
  • no mi error si funciona pero el contenido sale a abajo como hago que este ariba? up
    – Shareiv
    Commented el 30 nov. 2017 a las 4:35
  • Revisa mi otra respuesta, creo que a eso te refieres. Commented el 30 nov. 2017 a las 5:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.