Este es mi PHP resumido desde donde hago la llamada con ajax...
Código PHP :
<?php
ob_start();
require_once('class/template.php');
require_once('class/strings.php');
require_once('class/images.php');
$template = new template;
$template->load_cont=$_GET['l'];
$string = new strings;
$img = new images;
unset($_SESSION["cantidadcargadas"]);
$url = $string->separate_strings('?',$_SERVER['REQUEST_URI']);
//error_reporting('E_ALL & ~E_NOTICE');
?>
<!-- / -->
<!doctype html>
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- / -->
<title><?php echo $template->web_title; ?> - Servicios</title>
<link rel="shortcut icon" href="img/fav-icon.png" type="image/png">
<!-- / -->
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"> <!-- Bootstrap -->
<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet"> <!-- Bootstrap Theme -->
<link href="css/animate.css" rel="stylesheet" type="text/css"> <!-- Animate.css -->
<link href="css/productos.css" rel="stylesheet" type="text/css"> <!-- Theme Web -->
<!-- / -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="conten-warp">
<div class="container-fluid">
<div class="col-sm-10">
<h1 class="text-center title">PRODUCTOS</h1>
<div id="infinite_scroll">
<ul id="lista_productos" class="row-fluid">
<?php
if(isset($_GET['categoria'])){
$q1="
SELECT * FROM producto, producto_categoria
WHERE producto_categoria.categoria='".$_GET['c']."'
ORDER BY producto.Id DESC LIMIT 0,10
";
}else{
$q1="SELECT * FROM producto ORDER BY Id DESC LIMIT 0,10";
}
$r1=mysql_query($q1);
while ($f1=mysql_fetch_array($r1)){
$query_pics = mysql_query("SELECT * FROM producto_fotos WHERE modelo='".$f1['modelo']."'");
$data_pics = mysql_fetch_array($query_pics);
$Pimg = $data_pics["ruta"];
$img->img = $Pimg;
?>
<li class="thumbnail col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="<?php echo $data_pics["ruta"] ?>" class="img-responsive">
<div class="caption">
<h3><?php echo $f1["nombre"]; ?> <br><small><?php echo strip_tags($f1["modelo"]); ?></small></h3>
<p><?php echo $string->short_string(60, $f1["descripcion"],'...') ?></p>
<button class="btn btn-primary btn-block"><span class="glyphicon glyphicon-eye-open"></span> Ver</button>
</div>
</li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</section>
<!-- FILES JS -->
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <!-- jQuery -->
<script src="js/bootstrap.min.js" type="text/javascript"></script> <!-- Bootstrap -->
<script type="text/javascript" src="js/jquery.scrollExtend.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#infinite_scroll').scrollExtend( {
target: '#lista_productos',
type: 'GET',
url: 'class/productos.php',
data: 'c=<?php echo $_GET['c'] ?>'
});
});
</script>
<script src="js/functions.js" type="text/javascript"></script> <!-- Functions Web -->
<!-- END FILES JS -->
</body>
</html>
<?php
ob_end_flush();
?>
La pagina productos.php :
Código PHP :
<?php
/* ARCHIVO SCROLL.PHP */
session_start();
require_once("conect.php");
require_once('strings.php');
require_once('images.php');
$string = new strings;
$img = new images;
if (!isset($_SESSION["cantidadcargadas"])) $_SESSION["cantidadcargadas"]=10;
if(isset($_GET['c'])){
$q1="
SELECT * FROM producto, producto_categoria
WHERE producto_categoria.categoria='".$_GET['c']."'
ORDER BY producto.Id DESC LIMIT ".$_SESSION["cantidadcargadas"].",10
";
}else{
$q1="SELECT * FROM producto ORDER BY Id DESC LIMIT ".$_SESSION["cantidadcargadas"].",10";
}
mysql_select_db('...');
$r1=mysql_query($q1);
while ($f1=mysql_fetch_array($r1)){
$query_pics = mysql_query("SELECT * FROM producto_fotos WHERE modelo='".$f1['modelo']."'");
$data_pics = mysql_fetch_array($query_pics);
$Pimg = $data_pics["ruta"];
$img->img = $Pimg;
?>
<li class="thumbnail col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="<?php echo $data_pics["ruta"] ?>" class="img-responsive">
<div class="caption">
<h3><?php echo $f1["nombre"]; ?> <br><small><?php echo strip_tags($f1["modelo"]); ?></small></h3>
<br><p><?php echo $string->short_string(60, $f1["descripcion"],'...') ?></p>
<button class="btn btn-primary btn-block"><span class="glyphicon glyphicon-eye-open"></span> Ver</button>
</div>
</li>
<?php
}
$_SESSION["cantidadcargadas"]+=10;
?>
Les agradecería la ayuda ya que no estoy muy familiarizado con javascript y mucho menos con ajax =S
Este sistema lo tome de este tutorial:
http://www.martiniglesias.eu/blog/listado-de-registros-con-scroll-infinito-en-php-ajax-y-jquery/169
Este es el javascript de scrollExtend:
Código Javascript :
/*
* jQuery scrollExtend plugin v1.0.1
*
* Copyright (c) 2009 Jim Keller
* Context - http://www.contextllc.com
*
* Dual licensed under the MIT and GPL licenses.
*
*/
//
// onScrollBeyond
//
jQuery.fn.onScrollBeyond = function(callback, options) {
var domTargetElement = this;
//
// Special actions
//
if ( callback == 'disable' ) {
jQuery(domTargetElement).data('onScrollBeyond-disabled', true);
return;
}
if ( callback == 'enable' ) {
jQuery(domTargetElement).data('onScrollBeyond-disabled', false);
return;
}
//
// Main Body
//
var settings = {
'buffer': 20,
'fireOnDocEnd': true,
'fireOnBeyondElement' : true
};
jQuery.extend(settings, options);
jQuery(window).bind('scroll',
function() {
var fire = false;
var jqTargetElement = jQuery(domTargetElement);
if ( jqTargetElement.data('onScrollBeyond-disabled') == true ) {
return;
}
if ( settings.fireOnBeyondElement ) {
// if element has scrolled off the screen, even if other elements exist below it
if ( jQuery(document).scrollTop() > (jqTargetElement.position().top + jqTargetElement.height()) ) {
fire = true;
}
}
if ( !fire && settings.fireOnDocEnd ) {
var amt_scrolled = jQuery(document).scrollTop() - jqTargetElement.position().top ;
// if the amount of the element we already scrolled beyond + its top position on the document + the window height + some buffer is greater than the total doc height
if ( (amt_scrolled + jqTargetElement.position().top + jQuery(window).height() + settings.buffer) > jQuery(document).height() ) {
fire = true;
}
}
if ( fire ) {
callback.call(this, domTargetElement);
}
}
);
return this;
};
//
// scrollExtend
//
jQuery.fn.scrollExtend = function(options) {
//
// Special actions
//
if ( options == 'disable' ) {
jQuery(this).data('scrollExtend-disabled', true);
return;
}
if ( options == 'enable' ) {
jQuery(this).data('scrollExtend-disabled', false);
return;
}
var settings = {
'url': null,
'beforeStart': null,
'onSuccess': null,
'target': null,
'loadingIndicatorEnabled': true,
'loadingIndicatorClass': 'scrollExtend-loading',
'newElementClass': '',
'ajaxSettings': {}
};
var url;
var localAjaxSettings = {};
var ajaxSettings = settings.ajaxSettings;
jQuery.extend(settings, options);
jQuery.extend(ajaxSettings, settings.ajaxSettings);
jQuery(this).onScrollBeyond(
function(container) {
var jqContainerElem = jQuery(container);
//
// Make sure scrollExtend wasn't explicitly disabled,
// and that we're not already loading a new element
//
if ( jqContainerElem.data('scrollExtend-disabled') != true &&
jqContainerElem.data('scrollExtendLoading') != true ) {
jqContainerElem.data('scrollExtendLoading', true);
if ( typeof(settings.beforeStart) == 'function' ) {
var ret = settings.beforeStart.call(this, container);
if ( !ret ) {
jqContainerElem.data('scrollExtendLoading', false);
return;
}
}
//
// Check the disabled flag again in case
// it was changed during the beforeStart callback
//
if ( jqContainerElem.data('scrollExtend-disabled') == true ) {
jqContainerElem.data('scrollExtendLoading', false);
return;
}
//
// Set the URL
//
if ( typeof(settings.url) == 'function' ) {
url = settings.url.call(this, container);
}
else {
url = settings.url;
}
ajaxSettings.url = url;
//
// Set up our new element
//
var target = ( settings.target ) ? settings.target : container;
var new_elem = ( container.is('table') ) ? jQuery('<tbody/>') : jQuery('<div/>');
if ( settings.newElementClass != '' ) {
jQuery(new_elem).addClass( settings.newElementClass );
}
//
// Add loading indicator
//
if ( settings.loadingIndicatorEnabled ) {
var jqLoadingElem = jQuery('<div></div>');
jqLoadingElem.addClass( settings.loadingIndicatorClass );
jqLoadingElem.appendTo(target);
}
//
// Set up the AJAX request
//
localAjaxSettings = {
'success': function(data, textStatus) {
var target = ( settings.target ) ? settings.target : container;
jQuery(new_elem).html(data);
jQuery(new_elem).appendTo(target);
if ( typeof(settings.onSuccess) == 'function' ) {
settings.onSuccess.call( this, container, new_elem );
}
jQuery(container).data('scrollExtendLoading', false);
if ( settings.loadingIndicatorEnabled ) {
jqLoadingElem.remove();
}
}
}
jQuery.extend(ajaxSettings, localAjaxSettings);
//
// Run the AJAX request
//
jQuery.ajax( ajaxSettings );
}
},
settings
);
return this;
};
