Retornar valores com Ajax + PHP

Buthy · Novembro 8, 2012

Olá pessoal!

Queria saber se alguém poderia me ajudar na seguinte questão:

Possuo um <select> que lista categorias, no evento onChange dele eu pegaria o valor que está no value e passaria pelo método GET para um arquivo .php. Até aí tudo bem...

No meu arquivo .php eu faria um select no banco de dados filtrando os dados pelo id da categoria.

Aí que vem a dúvida: como eu retornaria os valores encontrados pelo select?

Além disso, possuo outras dúvidas:

- Como eu deixaria dados sendo exibidos por padrão, caso nenhuma categoria tenha sido selecionada ainda?

- Teria como no evento onchange alterar a url para arquivo.php?id=value? Isso para que quando alguém compartilhasse a url o visitante caísse na categoria selecionada no id da url...

- Como eu faria para exibir um "carregando"?

Segue o meu código:

<script type="text/javascript">
$(function () {
	$("#categorias").selectbox({
		onChange: function (val, inst) {
			$.ajax({
				type: "GET",
				data: {id_categoria: val},
				url: "portfolio_ajax.php",
				success: function (data) {
					$("ul#lista").html(data);
				}
			});
		},
		effect: "slide"
	});
});
$(function() {
   	/* initiate plugin */
   	$("div.holder").jPages({
      	containerID: "lista",
      	perPage      : 2,
        first       : "PRIMEIRA",
        previous    : "ANTERIOR",
        next        : "PRÓXIMA",
        last        : "ÚLTIMA"
   	});
 	});
</script>

<section id="portfolio">

			<div class="fleft _30 mbottom_30">
				<select name="categorias" id="categorias" tabindex="1">
					<option value="0">-- Selecione uma categoria --</option>
					<?php

					$sql = mysql_query("SELECT * FROM portfolio_categoria ORDER BY titulo_categoria ASC");
					while ($cat = mysql_fetch_array($sql)){

					?>

						<option value="<?php echo $cat['id_categoria']; ?>"><?php echo $cat['titulo_categoria']; ?></option>

					<?php

					}

					?>
				</select>
			</div>

			<div class="paginacao fright right _60 mbottom_40">
				<div class="holder"></div>
			</div>

			<div class="clear"></div>

			<ul id="lista">

				<?php

				$cont = 1;
				$sql = mysql_query("SELECT * FROM portfolio ORDER BY id_portfolio DESC");
				if (mysql_num_rows($sql) == 0){
					echo '<p>Até o momento nenhum trabalho foi cadastrado em nosso portfólio.</p>';
				}else{
					while ($row = mysql_fetch_array($sql)){
						$sql_categoria = mysql_query("SELECT * FROM portfolio_categoria WHERE id_categoria = ".$row['id_categoria']." LIMIT 1");
						$categoria = mysql_fetch_array($sql_categoria);
				?>

						<li class="<?php if ($cont % 2 == 0){ echo 'fright'; }else{ echo 'fleft'; } ?>">

							<a href="index.php?pag=detalhes-portfolio&id=<?php echo $row['id_portfolio']; ?>">

								<div class="p_5">

									<figure class="img fleft">

										<div class="detalhe"></div>

										<div class="mais"></div>

										<img src="uploads/portfolio/sacola.png" alt="" />

									</figure>

									<div class="categoria">
										<?php echo $categoria['titulo_categoria']; ?>
									</div>

									<div class="dados fright">

										<h2><?php echo $row['titulo_portfolio']; ?></h2>

										<article class="texto mtop_5">

											<?php echo $row['descricao_portfolio']; ?>

										</article>

									</div>

								</div>

							</a>

						</li>

				<?php

						$cont++;
					}

				}

				?>

			</ul>

			<div class="clear"></div>

		</section> <!-- portfolio -->

portfolio_ajax.php

<?php

include("adm/db/conecta.php");

$id = $_GET['id_categoria'];

$sql = mysql_query("SELECT * FROM portfolio WHERE id_categoria = ".$id." ORDER BY id_portfolio DESC");
while ($row = mysql_fetch_array($sql)){

}

?>

Fico no aguardo!

Muito obrigado!

Alguém pode me ajudar ou simplesmente me passar algum tutorial que me ajude a fazer isso? Já procurei em vários lugares, mas não achei muita coisa!

Buthy · Novembro 9, 2012

Então, consegui avançar um pouco no projeto...

Quando mudo a opção do select ele retorna os dados corretamente na página...

Mas algumas dúvidas e problemas seguem:

- Como eu deixaria dados sendo exibidos por padrão, caso nenhuma categoria tenha sido selecionada ainda? Eu executei um SQL na página, e quando seleciona algo no select ele somente sobrepoe esses dados pelos novos...

- Teria como no evento onchange alterar a url para arquivo.php?id=value? Isso para que quando alguém compartilhasse a url o visitante caísse na categoria selecionada no id da url...

O problema que estou enfrentando agora é com o jPages (paginador que eu uso). Ao selecionar algo no select e executar o evento onChange que alimenta a ul#lista os dados são exibidos normalmente, mas a quantidade de páginas não é atualizada. Alguém tem alguma luz?

Segue o código:

<script type="text/javascript">
$(function () {
	$("#categorias").selectbox({
		onChange: function (val) {
			$("ul#lista").html('Carregando...');
			$.ajax({
				type: "GET",
				data: {id_categoria: val},
				url: "portfolio_ajax.php",
				success: function (data) {
					$("ul#lista").html(data);
				}
			});
		},
		effect: "slide"
	});
});
$(function() {
   	/* initiate plugin */
   	$("div.holder").jPages({
      	containerID: "lista",
      	perPage      : 2,
        first       : "PRIMEIRA",
        previous    : "ANTERIOR",
        next        : "PRÓXIMA",
        last        : "ÚLTIMA"
   	});
 	});
</script>

<section id="principal">

<div class="centro">

	<?php include("slider.php"); ?>

</div> <!-- centro -->

<header class="header-title">

	<div class="centro">

		<h1>PORTFÓLIO</h1>

	</div>

</header> <!-- header-title -->

<div class="centro bg-white">

	<div class="padding">

		<section id="portfolio">

			<div class="fleft _30 mbottom_30">
				<select name="categorias" id="categorias" tabindex="1">
					<option value="0">-- Selecione uma categoria --</option>
					<?php

					$sql = mysql_query("SELECT * FROM portfolio_categoria ORDER BY titulo_categoria ASC");
					while ($cat = mysql_fetch_array($sql)){

					?>

						<option value="<?php echo $cat['id_categoria']; ?>"><?php echo $cat['titulo_categoria']; ?></option>

					<?php

					}

					?>
				</select>
			</div>

			<div class="paginacao fright right _60 mbottom_40">
				<div class="holder"></div>
			</div>

			<div class="clear"></div>

			<ul id="lista">

					<?php

					$cont = 1;
					$sql = mysql_query("SELECT * FROM portfolio ORDER BY id_portfolio DESC");
					if (mysql_num_rows($sql) == 0){
						echo '<p>Até o momento nenhum trabalho foi cadastrado em nosso portfólio.</p>';
					}else{
						while ($row = mysql_fetch_array($sql)){
							$sql_categoria = mysql_query("SELECT * FROM portfolio_categoria WHERE id_categoria = ".$row['id_categoria']." LIMIT 1");
							$categoria = mysql_fetch_array($sql_categoria);
					?>

							<li class="<?php if ($cont % 2 == 0){ echo 'fright'; }else{ echo 'fleft'; } ?>">

								<a href="index.php?pag=detalhes-portfolio&id=<?php echo $row['id_portfolio']; ?>">

									<div class="p_5">

										<figure class="img fleft">

											<div class="detalhe"></div>

											<div class="mais"></div>

											<img src="uploads/portfolio/sacola.png" alt="" />

										</figure>

										<div class="categoria">
											<?php echo $categoria['titulo_categoria']; ?>
										</div>

										<div class="dados fright">

											<h2><?php echo $row['titulo_portfolio']; ?></h2>

											<article class="texto mtop_5">

												<?php echo $row['descricao_portfolio']; ?>

											</article>

										</div>

									</div>

								</a>

							</li>

					<?php

							$cont++;
						}

					}

					?>


			</ul>

			<div class="clear"></div>

		</section> <!-- portfolio -->

	</div> <!-- padding -->

</div>

</section>

<?php

include("adm/db/conecta.php");

$id = $_GET['id_categoria'];

$sql = mysql_query("SELECT * FROM portfolio WHERE id_categoria = ".$id." ORDER BY id_portfolio DESC");
if (mysql_num_rows($sql) == 0){
	echo '<p>Nenhum dado encontrado.</p>';
}else{
	$cont = 1;
	while ($row = mysql_fetch_array($sql)){
		$sql_categoria = mysql_query("SELECT * FROM portfolio_categoria WHERE id_categoria = ".$row['id_categoria']." LIMIT 1");
		$categoria = mysql_fetch_array($sql_categoria);

		echo '<li class="';
		if ($cont % 2 == 0){ echo 'fright'; }else{ echo 'fleft'; }
		echo '">
				<a href="index.php?pag=detalhes-portfolio&id='.$row['id_portfolio'].'">

					<div class="p_5">

					<figure class="img fleft">

						<div class="detalhe"></div>

						<div class="mais"></div>

						<img src="uploads/portfolio/sacola.png" alt="" />

					</figure>

					<div class="categoria">'.
						$categoria['titulo_categoria']
					.'</div>

					<div class="dados fright">

						<h2>'.$row['titulo_portfolio'].'</h2>

						<article class="texto mtop_5">

							'.$row['descricao_portfolio'].'

						</article>

					</div>

				</div>

			</a>

		</li>';


	$cont++;
}

}
?>

Obrigado!

granhani · Janeiro 26, 2013

depois de sofrer horrores consegui assim:

h = screen.height;

w = screen.width;

document.cookie="telaheight =" + h;

document.cookie="telawidth =" + w;

</script>

<?

$heightTela = $_COOKIE['telaheight'];

$widthTela = $_COOKIE['telawidth'];

?>

matthee · Janeiro 26, 2013

Boa Tarde, então velho enquanto a url eu não sei como te ajudar mas, a questão de pegar alguma coisa sem ter uma categoria selecionada é facil, só fazer uma função para quando for carregada você já fazer uma consulta aleatoria, faz uma pequena fórmula para pegar alguns conteudos de categorias diferentes.

Entrar

Arquivado

Retornar valores com Ajax + PHP

Recommended Posts

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buthy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

granhani 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

matthee 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante