Problema ComboBox

Bergamaschi. · 6 de dezembro de 2012

Boa tarde a todos.

Estou com um pequeno erro numa ComboBox. Antes de tudo, deixa eu explicar como é que funciona aqui.

Na pagina index, tenho uns filtros que o usuario vai clicar (links normais) e vai filtrar os posts da maneira que ele quiser (Mais novos, mais comentados, mais gostados, etc). Para isso, fiz uma função em JavaScript/Ajax que faz uma DIV atualizar automaticamente, sem atualizar a página. E ela funciona, atualiza a DIV trazendo os posts conforme a query escrita.

O problema é, que além desses filtros, também quero colocar um numero pre-determinado de posts que um usuário pode chamar por filtro, também sem atualizar a página. É uma ComboBox! Exemplo:

Mostrar [ComboBox, valores: 5, 10, 25, 50] posts

Filtros: Novos, Antigos, Mais gostados.

Daí dependendo de qual valor da ComboBox o usuário escolher e do filtro, será mostrado o resultado.

O PROBLEMA:

Eu não estou conseguindo fazer com que a propriedade "selected" da ComboBox mude para o ultimo valor selecionado. Ela por padrão começa na opção 1 (5 posts). NA TEORIA, quando o usuário clicasse no numero 25, a propriedade "selected" estaria marcada na opção 25. E é aí que preciso de ajuda.

Vou passar os códigos:

Parte do PHP


					    <div id='ComboBox'> Show <select name='AparecerNumeroPosts' size='1' style='background-color: black; color: white; font-weight: bold;'>
		";
						$NumeroPosts = array(1, 2, 3, 4, 10);
						foreach ($NumeroPosts as $Valor)
						{
							if ($Selecionado == false)
							{
							  $AtualValor = $Valor;
						  	   echo "<option value='$AtualValor' selected='selected'>$AtualValor</option>";
							  $Selecionado = true;
							}
							else
						  	  echo "<option value='$Valor'>$Valor</option>";
						}
		echo"
					    </select> posts/div>

Codigo Ajax para atualizar DIV automatico.


		function alterarDDL(opcao)
		{
			var url = opcao;

			xmlRequest.onreadystatechange = AlterarOpcao;
			xmlRequest.open("GET",url,true);
			xmlRequest.send(null);

			if (xmlRequest.readyState == 1)
			{
			document.getElementById("ComboBox").innerHTML = "<img src='imgs/Like.png'>";
			}

			return url;
		}

		function AlterarOpcao()
		{
			if (xmlRequest.readyState == 4)
			{
			  document.getElementById("ComboBox").innerHTML = xmlRequest.responseText;
			}
		}

Como fazer? Só funcionaria em Ajax mesmo?

Obrigado, necessito dessa ajuda, gastei a manhã inteira perdendo tempo nisso e não consegui nada.

Ninguém pode ajudar não? Por favor :(

DiF · 7 de dezembro de 2012

Olá,

Não sei se você tem dificuldades com o jquery, como eu já havia comentado com você em outro tópico. esse tipo de coisa, é muito melhor usar o jquery e requisição ajax. vou te mostrar os principais códigos e no fim, poderás baixar os arquivos para testar aí na sua máquina. o exemplo só aborda o número de posts na pagina.. depois com a mesma lógica podes implementar a outra opção do filtro!.

o jquery usado foi:


<script type="text/javascript">
$(document).ready(function() {
    $("#filtrar").click(function(e) {
        e.preventDefault();
        var opcao = $("#form").serialize();
    	$.ajax({
				url: "processa.php",
				data: opcao,
				type: "POST",
				dataType: "html",
				success: function(data){

					$("#reg").html(data);			
				},
				error: function(data){
					$("#reg").html(data);
					}
        	});      
    });
});
</script>

Html:


<form action="#" id="form">
		<fieldset id="posts">	
		Mostrar
			<select id="mostrar" name="mostrar">
				<option value="5"> 5 </option>
				<option value="10"> 10 </option>
				<option value="25"> 25 </option>
				<option value="50"> 50 </option>
			</select>
		posts
		<input type="submit" id="filtrar" value="Filtrar">
		</fieldset>

	</form>

	<div id="reg">

			<?php 
				include 'conn.php';

				$sql = mysql_query("select id, post from post");

				while($linha = mysql_fetch_array($sql))
				{
					echo "
					      <div class='post'>
					      	<div class='id'>
					      		Post id: $linha[id]
					      	</div>	
				              $linha[post] 
				          </div>      
					";
				}

			?>
	</div>

processa.php:


<?php 
include 'conn.php';

$opcao = $_POST["mostrar"];

$sql = mysql_query("select id, post from post limit 0, $opcao");

if($sql)
{
	while($linha = mysql_fetch_array($sql))
	{
		echo "
			<div class='post'>
				<div class='id'>
					Post id: $linha[id]
				</div>
				$linha[post]
			</div>";
	}	
}
else
{
	echo "Ops.. Houve um erro.  ";
}

Baixe aqui os arquivos para testar

Abraço

Bergamaschi. · 11 de dezembro de 2012

Olá dif.

Desculpa pela demora em responder o post. Seu exemplo deu a luz para a solução aqui, fiz algumas mudanças no JQuery e no arquivo .php que ele é processado, e está funcionando perfeitamente.

Também ajustei o filtro por conta. Muito bom mesmo, espero manjar logo de JQuery, porque acho ele muito importante.

Obrigado pela a ajuda, abraços!