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