Ir para conteúdo

POWERED BY:

Arquivado

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

edmauromorais

PHP, MYSQL e Jquery Botão de Carregar mais itens

Por , em PHP

Recommended Posts

edmauromorais    0

edmauromorais
Postado

Pessoal por favor preciso de ajuda, não consigo resolver esse simples problema, tenho uma página que é para ser listado uma categoria e seus produtos, isso até consegui fazer, mais preciso que na pagina tenha um botão para carregar mais itens dessas categorias e subcategorias, para não ficar pesada na hora de carregar por exemplo se a página tiver 1000 itens e esses itens forem com imagem, quero carregar 10 e depois que for clicado o botão no final da página ele carregue mais 10 ou 20 após o clique no botão isso com jquery, ajax para que não seja necessário reludar a página, vou postar o código que estou tentando fazer isso.

 

As tabelas são as seguintes com suas colunas:

 

categorias = id, descricao;

medida = id, descricao;

item = id, descricao, idCategoria, idMedida, imagem;

 

Nessa tabela item é onde está os itens cadastrados com os id da determina categoria e medida, gostaria de pegar esses dados dessa tabela e jogar eles na tela divididos por categoria, exemplo categoria comida com o id = 1 e bebida com id = 2, foi cadastrado os itens pastel, coxinha, suco e refrigerante com os seguinte dados :

 

coxinha = idcategoria = 1;

pastel = idcategoria=1;

suco = idcategoria=2;

refrigerante = idcategoria=2;

 

Quero que na tela mostre em estilo de lista

 

COMIDA

coxinha

pastel

BEBIDA

suco

refrigerante

 

E que quando clicar em mais itens no botão logo a baixo disso ele carregue mais itens por exemplo se na categoria bebida

tiver 20 itens e ele só tiver carregado 10 que ele carregue os outros 10 sem colocar a categoria bebida novamente.

Segue os códigos que estou usando no momento só coloquei no sql duas tabelas e não as 3 para não complicar tanto mais se poderem colocar algum exemplo alguma coisa já com as 3 tabelas agradeceria ainda mais.

 

Arquivo index.php

 

<?php
include('conexao1.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=iso-8859-1" />
	  <title>Twitter Style load more results.</title>
	  <link href="frame.css" rel="stylesheet" type="text/css">
	  <link rel="stylesheet" href="bootstrap.css">
	  <link rel="stylesheet" href="style.css">

	  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

        //AQUI TA A PARTE DO AJAX PARA PASSAR O POST PARA A OUTRA PAGINA PARA CARREGAR MAIS
	<script type="text/javascript">
	$(function() {
	  //More Button
	  $('.more').live("click",function() {
	    var ID = $(this).attr("id");
	    if(ID)
	    {
		$("#more"+ID).html('<img src="moreajax.gif" />');
		$.ajax({
	   	  type: "POST",
		  url: "ajax_more.php",
		  data: "lastmsg="+ ID, 
		  cache: false,
		  success: function(html){
		   $(".rowPrincipal").append(html);
		   $("#more"+ID).remove();
		  }
		});
	     }
   	     else
	     {
		$(".morebox").html('The End');
	     }
		return false;
	   });
	});
	</script>
  </head>

<body>
	
	<div style="padding:4px; margin-bottom:10px; border-bottom:solid 1px #333333; ">
		<h3>
			Teste botão mais categorias
		</h3>
	</div>

        
	<div class='container'>
           <div class="rowPrincipal">

	     <?php
                //AQUI É ONDE ESTÁ A PARTE DO CARREGAMENTO DOS PRIMEIROS ITENS NA TELA
		$sql = mysqli_query($conexao, "SELECT categorias.*, item.descricao as item
		      	FROM categorias 
		      	INNER JOIN item  
		     	ON categorias.id = item.idCategoria where (item.idEstab=1 and categorias.descricao != 'SEM CATEGORIA')
                       	ORDER BY categorias.descricao, item.idCategoria DESC LIMIT 4");
						
		$li = '<ul>';
		while ($dados = mysqli_fetch_object($sql)) 
		{
						
		   $msg_id=$dados->id;

   		   if( $dados->descricao!=$categoria_nome )
		   {
		     if( !empty( $categoria_nome ) )
			$li .= '</ul></li>';	

			$categoria_nome = $dados->descricao;	
			$li .= '<li><h4>'.$categoria_nome.'</h4><ul>'."\n";
		   }
		   $li .= '<li>'.$dados->item.descricao.'</li>'."\n";
		}
		$li .= '</ul>'."\n".'</li></ul>';

		echo $li;					
	    ?>
             
		<div id="more<?php echo $msg_id; ?>" class="morebox">
	 	   <a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
		</div>
	</div> <!--End Container-->
</body>
</html>
Arquivo ajax_more.php

<?php
include("conexao1.php");

if(isSet($_POST['lastmsg']))
{
        //AQUI É ONDE NÃO SEI O QUE FAZER PARA ELE CARREGAR O RESTANTE DOS ITENS
        //DE ACORDO COM O QUE JÁ VEIO DA PÁGINA INDEX AQUI ELE CARREGARIA O 
        //RESTANTE DE ITENS.
	$lastmsg=$_POST['lastmsg'];
	$sql = mysqli_query($conexao, "SELECT categorias.*, item.descricao as item
		      	FROM categorias 
		      	INNER JOIN item  
		      	ON categorias.id = item.idCategoria where (item.id<'$lastmsg' )
            	ORDER BY categorias.descricao, item.idCategoria DESC LIMIT 4");
			
		$li = '<ul>';
		while ($dados = mysqli_fetch_object($sql)) 
		{			
			$msg_id=$dados->id;

			if( $dados->descricao!=$categoria_nome )
			{
				if( !empty( $categoria_nome ) )
				$li .= '</ul></li>';	

				$categoria_nome = $dados->descricao;	
				$li .= '<li><h4>'.$categoria_nome.'</h4><ul>'."\n";
			}
		   $li .= '<li>'.$dados->item.descricao.'</li>'."\n";
		}
		$li .= '</ul>'."\n".'</li></ul>';

		echo $li;

	?>
	<div id="more<?php echo $msg_id; ?>" class="morebox">
		<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
	</div>
<?php
}
?>
Realmente estou precisando solucionar isso, se vocês tiverm outro exemplo que eu possa implementar de maneira fácil pode postar aí que eu vou ficar muito agradecido em colocar ele para resolver o meu problema, desde de já muito obrigado a todos que contribuírem para essa solução.

Compartilhar este post

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

Informação importante

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

  Aceito