Retornar data grid a partir de seleção em uma combobox Ajax+PHP+MySQL

[Leco RP 6]

Olá pessoal,

 

Criei um data grid que retorna os registros de uma consulta no MySQL e uma combo que vai servir de filtro para essa tabela, até aí tudo certo.

 

Agora a dúvida: como aplicar esse filtro para a consulta no data grid (em Ajax) para que que não haja refresh na página?

 

Para exemplificar, essa combo exibe apenas os clientes inadimplentes. A partir da seleção na combo, carregaria esse data grid somente com os débitos desse cliente, ou seja, passaria um parâmetro para essa busca. Inicialmente só seria exibida essa combo e só depois que o usuário selecionasse o cliente seria exibidos seus débitos e a cada seleção do cliente na combo atualizaria seu débito.

 

Agradeço desde já.

 

Abraços.

[Ricardo Saraiva 84]

O que você ja tem pronto? e sua duvida seria especificamente em relação qual parte?

[Leco RP 6]

Olá Ricardo,

 

Já tenho pronto a combo que lista os inadimplentes e o data grid (table) que lista quais são os débitos.

Minha dúvida é como passar o parâmetro (ID) do cliente (da combo) para filtrar o data grid de acordo com o cliente selecionado.

 

 

Obrigado.

 

 

Alguma luz pessoal?

[Edgard Hufelande 27]

Pode postar o código para eu poder ter uma ideia do que você fez e como prosseguir?

[Ricardo Saraiva 84]

Aqui estes link's podem le ajudar:

http://imasters.com.br/artigo/14982/ajax/ajax-com-jquery-metodo-load/

http://imasters.com.br/artigo/3918/javascript/ajax-e-php-carregando-dados-sem-refresh/

http://imasters.com.br/artigo/12749/ajax/phpjquery--ajax-mais-facil/

[Leco RP 6]

Edgar,

 

Meu código da combo:

	<label for="cod_clientes" style="font-family:Verdana, Geneva, sans-serif;font-size:12px;color: #000000;font-weight:bold;">Cliente:</label>
	<select name="cod_clientes" id="cod_clientes">
		<option value=""></option>
		<?php
			$query = "SELECT * 
				FROM cobranca 
				WHERE stcobranca=0";
			$res = mysql_query( $query );
			while ( $row = mysql_fetch_assoc( $res ) ) {
				echo '<option value="'.$row['clicod'].'">'.$row['clinome'].'</option>';
			}
		?>
	</option></select>

 

E o código para criar o data grid:

		$sql = "SELECT cobranca.*, clientes.*, servicos.* 
				FROM cobranca 
				INNER JOIN clientes ON cobranca.clicod = clientes.clicod 
				INNER JOIN servicos ON cobranca.sercod = servicos.sercod 
				AND cobranca.numfatura = 0";
	        $resultado = mysql_query($sql);
		$resultado = @mysql_num_rows($resultado);
		if ($resultado != "0"){	
			echo "<p>";
			echo "<p class='Titulo_Interno'>Cobranças em aberto</p>";
			echo "<p>";
			echo "<table width='100%'  bgcolor='#ffffff'>";
			echo "<thead>";
			echo "<tr>";
			echo "<th>Faturar?<input type='checkbox' name='todos' id='todos' value='todos' onclick='marcardesmarcar();' /></th>";
			echo "<th>Cliente</th>";
			echo "<th>Serviço</th>";
			echo "<th>Data</th>";
			echo "<th>Valor</th>";
			echo "</tr>";
			echo "</thead>";				
			$cadastro = mysql_query($sql);
				while ($linha = mysql_fetch_array($cadastro)) {
					$numcobranca = $linha['idcobranca'];
					$cliente 	 = $linha['clinomfan'];
					$servico 	 = $linha['sernom'];	
					$data  		 = substr($linha['data'],8,2) . "/" .  substr($linha['data'],5,2) . "/" .   substr($linha['data'],0,4);
					$valor       = number_format($linha['valor'], 2, ",", "");
					echo "<tbody>";
					echo "<tr onmouseover='seleciona(this)' onmouseout='fora(this)' style='cursor:help'>";
					echo "<td>";
					echo "<input name='numcobranca[]' type='checkbox' class='marcar' value='$numcobranca'>";				
					echo "</td>";
					echo "<td>$cliente</td>";
					echo "<td>$servico</td>";
					echo "<td>$data</td>";
					echo "<td>R$ $valor</td>";	
					echo "</tr>";				
				}	
			echo "</tbody>";
			echo "</table>";

		} else {
			
			echo "<p class='Titulo_Interno'>Não há cobranças em aberto.</p>";
		}			

Se observar, hoje a combo não está relacionada com o data grid (criei apenas para iniciar a solução da minha dúvida) e só está me retornando os clientes que a cobrança é "igual a zero".

O que eu quero é selecionar o cliente da combo (que já me retorna os clientes que estão com cobrança em aberto) e passar o parâmetro "clicod" para o data grid para que eu possa a partir daí fazer a condição para meu select, ou seja, fazer a cláusula "AND clientes.clicod = 'IDSELECIONADONACOMBO'".

Não sei se conseguir ser claro na dúvida... :joia:

 

Obrigado.

[Ricardo Saraiva 84]

Segue um modelo simples de consulta com ajax utilizando jquery, neste exemplo é passadoo atributo value de um select.

<script type="text/javascript">
    $(document).ready(function(){
        $('#minha_select').change(function(){
            var meu_id = $('#minha_select  option:selected').val();//pega o valor do campo select troque #minha_select pelo id correspondente ao select
            $.ajax({
              url: 'recebe.php',//pagina que vai ser feita a requisição ajax
              type: 'POST',//metodo de envio
              dataType: 'xml/html/script/json/jsonp',
              data: {id: meu_id},//parametro que sera enviado.
              success: function(data, textStatus, xhr) {
                //sucesso na requisição

                $('body').html(data);//exibi o retorno dentro da tag body, troque pelo id da div em que sera exibido o conteudo

              },
              error: function(xhr, textStatus, errorThrown) {
                //erro na requisição
              }
            });
        });
    });
</script>

 

 

Lembrando que no comentario #6 tem exemplos mais detalhados...

[Edgard Hufelande 27]

Este exemplo que o Ricardo postou é funcional, tente fazer caso houver dúvidas retorne a este tópico. c:

[Leco RP 6]

Ricardo,

 

Sua solução deu certo! Obrigado pela ajuda.

 

Agora, me surgiu outra dúvida: o data grid está sendo exibido com todo os registros corretamente. Como faço agora para aplicar um filtro, por exemplo, por data sem refresh?

 

 

Obrigado novamente.

[Ricardo Saraiva 84]

Asim se a duvida for somente sobre como passar o paramentro de data é simples.

data: {id: meu_id,data: minha_data},//você pode colocar mais parametros se necessario

[Edgard Hufelande 27]

Dê uma olhada sobre o DataTables. (:

[Leco RP 6]

 

Asim se a duvida for somente sobre como passar o paramentro de data é simples.

data: {id: meu_id,data: minha_data},//você pode colocar mais parametros se necessario

 

Ricardo,

 

Na verdade essa dica me serviu também mas ainda não é isso que eu queria...

Mas, talvez você possa me ajudar. Utilizando os exemplos que me mandou, cheguei a esse código para a combo:

    $(document).ready(function(){	$('#gridcobrancas').hide();	$('#carregando').hide();        $('#cod_clientes').change(function(){		$('#carregando').ajaxStart(function(){			$('#carregando').show();			});		$('#carregando').ajaxStop(function(){			$('#carregando').hide();			});            var clicod = $('#cod_clientes  option:selected').val();            $.ajax({              url: 'monta_gridcobrancas.php',              type: 'POST',              dataType: 'xml/html/script/json/jsonp',              data: {id: clicod},              success: function(data, textStatus, xhr) {				$('#gridcobrancas').show();                $('#gridcobrancas').html(data);              },				error: function(xhr, textStatus, errorThrown) {              }            });        });    });

Agora quais alterações preciso fazer para que sejam passados dois parâmetros a partir de um botão do tipo "submit"?

Ou seja, quero criar dois campos texto e um botão e ao clicar nesse botão passar o valor desses textbox para ser filtrado.

 

 

Obrigado.

 

Dê uma olhada sobre o DataTables. (:

 

Obrigado pela dica, Edgard.

 

Abs

 

 

Atualizando...

 

 

 

Fazendo algumas buscas na internet, cheguei a esse código:

	<script type="text/javascript">	jQuery(document).ready(function(){		jQuery('#ajax_form').submit(function(){			var dados = jQuery( this ).serialize();			jQuery.ajax({				type: "POST",				url: "monta_gridcobrancas_data.php",				data: dados,				success: function( data )				{					alert( data );				}			});			return false;		});	});	</script>

Ele funciona e me retorna os valores do post no "alert" corretamente. Mas não consegui modifica-lo para que retornasse na div como o exemplo anterior da combo.

 

Agradeço desde já.

 

 

Agora deu certo:

 

jQuery(document).ready(function(){		jQuery('#ajax_form').submit(function(){			var dados = jQuery( this ).serialize();			jQuery.ajax({				type: "POST",				url: "monta_gridcobrancas_data.php",				data: dados,				success: function( data )				{				$('#grid').show();                                $('#grid').html(data);				}			});			return false;		});	});

Obrigado pela ajuda.

 

 

Cá estou eu novamente.

 

 

 

Me surgiu outra dúvida agora (essa eu não consegui achar solução): seguindo a mesma linha de raciocínio, como passar o parâmetro (pode ser via GET) a partir de um link dinâmico?

 

Link no padrão:

<a href='editar.php?id={$row['id']}'>Editar</a>

Agradeço desde já.

 

 

Alguma luz pessoal?

[Edgard Hufelande 27]

Você já tem o valor do $row['id']?

 

Se já tiver basta um

<a href="editar.php?id=<?=$row['id']?>">Editar</a>

[Leco RP 6]

Olá Edgard,

 

A dúvida não é essa (esse link eu já tenho).

A questão é como passar esse parâmetro via GET (com Ajax) para outra página php para trata-lo.

 

Por exemplo, via POST de um formulário estou fazendo assim:

jQuery(document).ready(function(){		jQuery('#ajax_form').submit(function(){			var dados = jQuery( this ).serialize();			jQuery.ajax({				type: "POST",				url: "monta_grid.php",				data: dados,				success: function( data )				{				$('#grid').show();                                $('#grid').html(data);				}			});			return false;		});	});

Agora queria saber como passar da mesma forma só que a partir de um link dinâmico utilizando GET.

 

Abraços.

 

 

Ainda não consegui achar uma solução...

 

 

 

Alguém teria alguma ajuda?

 

Agradeço novamente.