Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Léo Lemos

Carregando conteúdo dentro de uma 'div'

Por , em Javascript

Recommended Posts

Léo Lemos    0

Léo Lemos
Postado

Fala galera,

Já começo dizendo que não sou tão bom em javascript ainda, então... hahaha

Peguei um método parecido com o 'infinitescroll' para lançar o conteúdo de um banco de dados mysql para dentro de uma div, porém, neste código que estou usando, não consigo de forma alguma lançar o conteúdo infinito dentro da div, apenas é possível se for no corpo da página. Colocando o 'overflow:auto', simplesmente apenas carrega uma quantidade de postagens e pára ali. Deu para entender mais ou menos? hahaha

Segue os códigos:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="ativos/jquery-1.9.0.min.js"></script>
<style>
body,td,th {font-family: Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#test{width: 500px; height:600px; margin-right: auto;margin-left: auto; background:#0C3; overflow:auto}
#results{width: 480px;}
#resultst ol{margin: 0px;padding: 0px;}
#results li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}
</style>
</head>

<body>
 <?php
			include("config.php");
			$results = $mysqli->query("SELECT COUNT(*) as t_records FROM ciadoar");
			$total_records = $results->fetch_object();
			$total_groups = ceil($total_records->t_records/$items_per_group);
			$results->close(); 
			?>    
            
            <script type="text/javascript">
				$(document).ready(function() {
				var track_load = 0; //total loaded record group(s)
				var loading  = false; //to prevents multipal ajax loads
				var total_groups = <?php echo $total_groups; ?>; //total record group(s)
				
				$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group
				
				$(window).scroll(function() { //detect page scroll
					
					if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
					{
						
						if(track_load <= total_groups && loading==false) //there's more data to load
						{
							loading = true; //prevent further ajax loading
							$('.animation_image').show(); //show loading image
							
							//load data from the server using a HTTP POST request
							$.post('autoload_process.php',{'group_no': track_load}, function(data){
												
								$("#results").append(data); //append received data into the element
			
								//hide loading image
								$('.animation_image').hide(); //hide loading image once data is received
								
								track_load++; //loaded group increment
								loading = false; 
							
							}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
								
								alert(thrownError); //alert with HTTP error
								$('.animation_image').hide(); //hide loading image
								loading = false;
							
							});
							
						}
					}
				});
			});
		</script>
        
        
        <div id="test">
	        <div id="results"></div>
        </div>
<div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div>
</body>
</html>


config.php

<?php
$db_username 	= '';
$db_password 	= '';
$db_name 		= 'test';
$db_host 		= 'localhost';
$items_per_group = 5;
$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);
?>


auto_lload_process.php

<?php
include("config.php"); //include config file

if($_POST)
{
	//sanitize post value
	$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
	
	//throw HTTP error if group number is not valid
	if(!is_numeric($group_number)){
		header('HTTP/1.1 500 Invalid number!');
		exit();
	}
	
	//get current starting point of records
	$position = ($group_number * $items_per_group);
	
	//Limit our results within a specified range. 
	$results = $mysqli->query("SELECT * FROM ciadoar ORDER BY id DESC LIMIT $position, $items_per_group");
	
	if ($results) { 
		//output results from database
		
		while($obj = $results->fetch_object())
		{
			echo '<li id="item_'.$obj->id.'"> - '.$obj->id.' - <strong>'.$obj->txt.'</strong></span> — <span class="page_message">'.$obj->med.'</span></li>';
		}
	
	}
	unset($obj);
	$mysqli->close();
}
?>

Se puderem me dar uma ajudinha, ficarei grato!

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito