List/Menu com mysql e ajax

[ddlightw 0]

Estou utilizando um select que é preenchido com dados do Mysql, provavelmente o BD nunca vai ficar vazio, mas se estivesse eu queria que aparecesse alguma coisa e já tentei colocar uns if e não deu certo:

 

<?php
$id_tipo=intval($_GET['tipo']); ---> isso não funciona, tem um site que fala para utilizar que é para evitar sql injections
?>

<script>
function MandaID(abc) {
alert(abc)
}
</script>

<select name="zona" id="zona" onchange="mandaID(this.value)">
<?php if ($id_tipo == "" ) {
    echo "<option value=''>Selecione uma zona</option>";
 } else {
$sql = "SELECT zona FROM imoveis WHERE tipo ='".$id_tipo."'";
$resultado = mysql_query($sql); 
while ($linha = mysql_fetch_array($resultado)){
$zona = $linha["zona"];
echo "<option value='$zona'>$zona</option>";
} 
} 
?>
</select>

Tentei fazer algo semelhante a isso:

 

// Successful query?
    if($result = mysql_query($queryitem))  {

      // More than 0 results returned?
      if($success = mysql_num_rows($result) > 0) {

        // For each result returned, display it
        while ($row = mysql_fetch_array($result)) echo $row[serial];
      }
      // Otherwise, no results, tell user
      else { echo "No results found."; }
    }

Link do código completo

[ddlightw 0]

Não expliquei direito, eu estou montando uma busca.

 

Está tudo funcionando só falta acertar esses list/menu para quando selecionar a opção tipo carrega o que foi cadastrado na zona e ao selecionar a zona aparece o bairro.

 

Até aí tudo certo, mas se não tem nada cadastrado ele retorna vazio e se aparece uma só opção em zona é como se não tivesse nenhuma opção selecionada (usei o Distinct para não aparecer 10 zona norte do cadastro) e ele não atualiza o bairro.

 

É como esse exemplo:

 

Combobox

 

Tudo isso faz parte do site que eu tenho que montar.

[João Batista Neto 448]

É como esse exemplo:

Combobox

 

Certo, a primeira coisa que você precisa é criar as tabelas, seguindo o exemplo que você passou, teríamos 3 tabelas:

 

CREATE TABLE `group` (
`idGroup` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(10) NOT NULL,
PRIMARY KEY (`idGroup`) USING BTREE,
KEY `names` (`name`)
);

CREATE TABLE `subgroup` (
`idSubgroup` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
`idGroup` mediumint(8) unsigned NOT NULL,
`name` varchar(10) DEFAULT NULL,
PRIMARY KEY (`idSubgroup`) USING BTREE,
KEY `subgroupof` (`idGroup`,`name`)
);

CREATE TABLE `category` (
`idCategory` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
`idSubgroup` mediumint(8) unsigned NOT NULL,
`name` varchar(15) DEFAULT NULL,
PRIMARY KEY (`idCategory`) USING BTREE,
KEY `categoryof` (`idSubgroup`,`name`)
);

 

Com as tabelas criadas, populamos os dados fazendo as referências:

group

mysql> select * from `group`;
+---------+----------+
| idGroup | name 	|
+---------+----------+
| 	1 | Vehicles |
| 	2 | Games	|
| 	3 | Fruits |
| 	4 | Colors |
+---------+----------+
4 rows in set (0.00 sec)

subgroup

mysql> select * from `subgroup`;
+------------+---------+----------+
| idSubgroup | idGroup | name 	|
+------------+---------+----------+
| 	1 | 	4 | Yellow |
| 	2 | 	4 | Red 	|
| 	3 | 	4 | Green	|
| 	4 | 	4 | Blue 	|
| 	5 | 	3 | Orange |
| 	6 | 	3 | Mango	|
| 	7 | 	3 | Banana |
| 	8 | 	3 | Apple	|
| 	9 | 	1 | Trucks |
| 	10 | 	1 | Train	|
| 	11 | 	1 | Cars 	|
| 	12 | 	1 | Bikes	|
| 	13 | 	2 | Tennis |
| 	14 | 	2 | Football |
| 	15 | 	2 | Cricket |
| 	16 | 	2 | Baseball |
+------------+---------+----------+
16 rows in set (0.00 sec)

category

mysql> select * from `category`;
+------------+------------+----------------+
| idCategory | idSubgroup | name 	|
+------------+------------+----------------+
| 	1 | 	1 | Yellow Line	| 
| 	2 | 	1 | Yellow Card	| 
| 	3 | 	2 | Red Light 	| 
| 	4 | 	2 | Red Zone 	| 
| 	5 | 	4 | Blue Light 	| 
| 	6 | 	4 | Blue Deep 	| 
| 	7 | 	3 | Green Light	| 
| 	8 | 	3 | Green Color	| 
| 	9 | 	6 | Mango bad 	| 
| 	10 | 	6 | Mango good 	| 
| 	11 | 	7 | Banana hot 	| 
| 	12 | 	7 | Banana sweet | 
| 	13 | 	8 | Apple sour 	|
| 	14 | 	8 | Apple sweet	|
| 	15 | 	5 | Orange Sour	|
| 	16 | 	5 | Orange sweet |
| 	17 | 	13 | Tennis table |
| 	18 | 	13 | Tennis Long	|
| 	19 | 	16 | Base ball game |
| 	20 | 	16 | Base Ball team |
| 	21 | 	14 | Football world |
| 	22 | 	14 | Football team |
| 	23 | 	15 | Cricket test |
| 	24 | 	15 | Cricket Oneday |
| 	25 | 	11 | Cars small 	|
| 	26 | 	11 | Cars Big 	|
| 	27 | 	9 | Trucks Big 	|
| 	28 | 	9 | Trucks small |
| 	29 | 	12 | Bike small 	|
| 	30 | 	12 | Bikes sports |
| 	31 | 	10 | Train fast 	|
| 	32 | 	10 | Train slow 	|
+------------+------------+----------------+
32 rows in set (0.00 sec)

Bom, com os dados nas tabelas, criamos o código que irá ler esses dados:

 

combos.php

<?php
$type = isset( $_GET[ 'type' ] ) ? $_GET[ 'type' ] : 'group';
$id = isset( $_GET[ 'id' ] ) ? (int) $_GET[ 'id' ] : null;

$pdo = new PDO( 'mysql:host=127.0.0.1;dbname=nomedobancodedados' , 'usuariodobanco' , 'senha' );
$ret = new stdClass();
$ret->success = false;
$ret->data = array();

switch ( $type ){
case 'group':
	$ret->success = true;
	$stmt = $pdo->prepare( 'SELECT `idGroup` "value",`name` from `group` order by `name`;' );
	break;
case 'subgroup':
	if ( $id ){
		$ret->success = true;
		$stmt =& $pdo->prepare( 'SELECT `idSubgroup` "value",`name` from `subgroup` where `idGroup`=:idGroup order by `name`;' );
		$stmt->bindParam( ':idGroup' , $id , PDO::PARAM_INT );
	}

	break;
case 'category':
	if ( $id ){
		$ret->success = true;
		$stmt = $pdo->prepare( 'SELECT `idCategory` "value",`name` from `category` where `idSubgroup`=:idSubgroup order by name;' );
		$stmt->bindParam( ':idSubgroup' , $id , PDO::PARAM_INT );
	}

	break;

}

if ( $ret->success && $stmt->execute() ){
while ( ( $row = $stmt->fetch( PDO::FETCH_OBJ ) ) !== false ){
	$ret->data[] = $row;
}
}

echo json_encode( $ret );

 

Agora criando o HTML que conterá os campos:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Recuperando os dados do PHP usando JQuery</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="combos.js"></script>
</head>
<body>
	<form action="#">
		<select id="group"><option value="0">Aguarde...</option></select>
		<select id="subgroup"><option value="0">Selecione um grupo</option></select>
		<select id="category"><option value="0">Selecione um subgrupo</option></select>
	</form>
</body>
</html>

 

Veja que estamos usando JQuery, você encontrará o fonte do JQuery no site oficial.

 

Agora o nosso Javascript que fará a recuperação dos dados:

combos.js

function populate( type , id ){
	var obj = {
		type	: type == undefined ? 'group' : type,
	};
	
	if ( id != undefined ) obj.id = id;
	
	$.ajax( {
		type		: "GET",
		url			: "combos.php",
		data		: obj,
		async		: true,
		dataType	: "json",
		success		: function( ret ){
			if ( ret.success ){
				var options = [ '<option value="0">Selecione</option>' ];
				
				for ( var i = 0 , t = ret.data.length ; i < t ; ++i ){
					options.push( [ '<option value="' , ret.data[ i ].value , '">' , ret.data[ i ].name , '</option>' ].join( '' ) );
				}
				
				$( [ '#' , type ].join( '' ) ).replaceWith( [ '<select id="' , type , '">' , options.join( '' ) , '</select>' ].join( '' ) );
				$( [ '#' , type ].join( '' ) ).change( function(){
					switch ( type ){
						case 'group':
							populate( 'subgroup' , $(this).val() );
							break;
						case 'subgroup':
							populate( 'category' , $(this).val() );
							break;
					}
				} );
			}
		}
	} );
}

$( function(){
	populate( 'group' );
} );

Caso não consiga implementar e precise do fonte é só falar que coloco ele online para download.

 

;)

[ddlightw 0]

Opa, valeu!

 

Eu vou estudar com calma e tentar fazer.

 

Eu ainda estou modificando o banco de dados, mas por enquanto as tabelas são:

 

Tipo de imóvel, zona, bairro e qtde de dormitorios

 

Os dados dessas tabelas que serão utilizados na busca.

 

Dependendo eu ainda terei que colocar Estado e cidade.

 

Eu vi um tutorial que citava o json, precisa baixar alguma coisa?

JQuery eu conheço, estou aprendendo.

O que eu estava utilizando nesse código que eu postei era só Ajax.

[ddlightw 0]

Fiz esse seu exemplo, só que o código do PHP que deu problema, está aparecendo:

 

{"success":true,"data":[{"value":"4","name":"Colors"},{"value":"3","name":"Fruits"},{"value":"2","name":"Games"},{"value":"1","name":"Vehicles"}]}

 

 

em cima dos combos, eu fechei o <?php no final do código.

 

No editor está apontando para alguma coisa nessa linha:

 

$id = isset( $_GET[ 'id' ] ) ? (int) $_GET[ 'id' ] : null;

[João Batista Neto 448]

Fiz esse seu exemplo, só que o código do PHP que deu problema, está aparecendo:

 

{"success":true,"data":[{"value":"4","name":"Colors"},{"value":"3","name":"Fruits"},{"value":"2","name":"Games"},{"value":"1","name":"Vehicles"}]}

hehehe, se o PHP retornou isso ai, então está 100% !!!

 

Era exatamente isso que o PHP deveria retornar.

 

Você baixou o JQuery e incluiu ele ???

[ddlightw 0]

 

Fiz esse seu exemplo, só que o código do PHP que deu problema, está aparecendo:

 

{"success":true,"data":[{"value":"4","name":"Colors"},{"value":"3","name":"Fruits"},{"value":"2","name":"Games"},{"value":"1","name":"Vehicles"}]}

hehehe, se o PHP retornou isso ai, então está 100% !!!

 

Era exatamente isso que o PHP deveria retornar.

 

Você baixou o JQuery e incluiu ele ???

 

 

Já, esse código aparece na página.

[Weudes 0]

Boa noite a todos,

 

entao isso que voce quer e algo bem comum usando hj. De uma olhada aqui no artigo de nosso amigo Julio e bem simples e esclarece sua duvida.

 

Ajax e PHP

Carregando dados sem refresh

 

Boa Sorte!

 

Abracos....