Carregar dados sem refresh em 3 niveis (mais de 2 niveis)

[Alcir Lima 0]

E ae galera, beleza?

 

Depois de tentar por muito tempo achar um tutorial que carregasse mais de dois niveis no select sem refresh. EU NAO ACHEI NADA

 

Entao resolve desenvolver baseado no script do Julio Cesar Martini no link http://imasters.com.br/artigo/3918/jav...os_sem_refresh/

 

 

DADOS DA MINHA TABELA

 

TIPO

(cod,nome)

 

FABRICANTE

(cod,cod_tipo,nome)

 

MODELO

(cod,cod_fabricante,nome)

 

 

A resposta para carregar:

 

index.php

CODE

 

<?

 

//CONECTA AO MYSQL

require_once("conecta.php");

 

//PEGA OS ESTADOS

$sql = "

SELECT t.cod as cod_tipo, t.nome as nome_tipo

FROM op_tipo t

ORDER BY t.nome";

 

//EXECUTA A QUERY

$sql = mysql_query($sql);

 

$row = mysql_num_rows($sql); ?>

 

<script type="text/javascript" src="ajax.js"></script>

 

 

 

<form name="dasodh" id="iashdi">

 

Tipo:

<select name="tipo" onLoad="criarFabricante(this.value);">

<option value="0">Selecione...</option>

<? for($i=0; $i<$row; $i++) { ?>

<option value="<? echo mysql_result($sql, $i, "cod_tipo"); ?>">

<? echo mysql_result($sql, $i, "nome_tipo"); ?></option>

<? } ?>

</select>

 

<br><br>

Fabricante:

<select name="select_fabricante" onLoad="criarModelo(this.value);">

<option id="opcoes_fabricante" value="xyz"> </option>

</select>

 

<br><br>

Modelo: 

<select name="select_modelo">

<option id="opcoes_modelo" value="xyz"> </option>

</select>

</form>

 

ajax.js

 

CODE

 

 

function criarDadosSelect(valor,select_nome,form_action) {

//verifica se o browser tem suporte a ajax

try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); }

catch(e) {

try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); }

catch(ex) { try { ajax = new XMLHttpRequest(); }

catch(exc) { alert("Esse browser não tem recursos para uso do Ajax"); ajax = null; }

}

}

 

//se tiver suporte ajax

if(ajax) {

//deixa apenas o elemento 1 no option, os outros são excluídos

document.forms[0].(select_nome).options.length = 1;

idOpcao = document.getElementById("opcoes_fabricante");

ajax.open("POST", form_action, true);

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 

ajax.onreadystatechange = function() {

 

//enquanto estiver processando...emite a msg de carregando

if(ajax.readyState == 1) { idOpcao.innerHTML = "Carregando...!"; }

 

//após ser processado - chama função processXML que vai varrer os dados

if(ajax.readyState == 4 ) {

if(ajax.responseXML) { processXML(ajax.responseXML); }

else {

//caso não seja um arquivo XML emite a mensagem abaixo

idOpcao.innerHTML = "Selecione o tipo";

}

}

}

 

//passa o código do TIPO escolhido

var params = "chave="+valor;

ajax.send(params);

}

}

 

function processXML(obj){

//pega a tag cidade

var dataArray = obj.getElementsByTagName("estrutura");

 

//total de elementos contidos na tag cidade

if(dataArray.length > 0) {

//percorre o arquivo XML paara extrair os dados

for(var i = 1 ; i < dataArray.length ; i++) {

var item = dataArray;

//contéudo dos campos no arquivo XML

var codigo = item.getElementsByTagName("codigo")[0].firstChild.nodeValue;

var nome = item.getElementsByTagName("nome")[0].firstChild.nodeValue;

 

idOpcao.innerHTML = "Selecione...";

 

//cria um novo option dinamicamente

var novo = document.createElement("option");

//atribui um ID a esse elemento

novo.setAttribute("id", "opcoes_fabricante");

//atribui um valor

novo.value = codigo;

//atribui um texto

novo.text = nome;

//finalmente adiciona o novo elemento

document.forms[0].(select_nome).options.add(novo);

}

}

else {

//caso o XML volte vazio, printa a mensagem abaixo

idOpcao.innerHTML = "--Primeiro selecione o estado--";

}

}

 

conecta.php

 

CODE

 

 

<?

 

//CONECTA AO MYSQL

$conn = mysql_connect("localhost", "root", "")

or die("Erro na conexão com a base de dados");

 

//SELECIONA A BASE DE DADOS

$db = mysql_select_db("autosimples", $conn)

or die("Erro na seleção da base de dados");

?>

 

fabricante.php

 

CODE

 

 

<?

 

 

//CONECTA AO MYSQL

require_once("conecta.php");

 

//RECEBE PARÃMETRO

$tipo = $_POST['tipo'];

 

//QUERY

$sql = "

SELECT f.cod as cod_fabricante, f.nome as nome_fabricante

FROM op_fabricante f

WHERE f.cod_tipo = $tipo

ORDER BY f.nome ";

 

$sql = mysql_query($sql);

$row = mysql_num_rows($sql);

 

 

if($row) {

 

$xml = "<?xml version="1.0" encoding="ISO-8859-1"?>n";

$xml .= "<fabricante>n";

 

 

for($i=0; $i<$row; $i++) {

$codigo = mysql_result($sql, $i, "cod_fabricante");

$descricao = mysql_result($sql, $i, "nome_fabricante");

$xml .= "<fabricante>n";

$xml .= "<cod_fabricante>".$codigo."</cod_fabricante>n";

$xml .= "<nome_fabricante>".$descricao."</nome_fabricante>n";

$xml .= "</fabricante>n";

}

 

$xml.= "</fabricante>n";

 

Header("Content-type: application/xml; charset=iso-8859-1");

}

 

echo $xml;

?>

 

modelo.php

 

CODE

 

 

<?

 

 

//CONECTA AO MYSQL

require_once("conecta.php");

 

//RECEBE PARÃMETRO

$cod_fabricante = $_POST["codfabricante"];

 

//QUERY

$sql = "

SELECT m.cod as cod_modelo, m.nome as nome_modelo

FROM op_modelo m

WHERE m.cod_fabricante = $cod_fabricante

ORDER BY m.nome ";

 

//EXECUTA A QUERY

$sql = mysql_query($sql);

 

$row = mysql_num_rows($sql);

 

//VERIFICA SE VOLTOU ALGO

if($row) {

//XML

$xml = "<?xml version="1.0" encoding="ISO-8859-1"?>n";

$xml .= "<modelo>n";

 

//PERCORRE ARRAY

for($i=0; $i<$row; $i++) {

$codigo = mysql_result($sql, $i, "cod_modelo");

$descricao = mysql_result($sql, $i, "nome_modelo");

$xml .= "<modelo>n";

$xml .= "<cod_modelo>".$codigo."</cod_modelo>n";

$xml .= "<nome_modelo>".$descricao."</nome_modelo>n";

$xml .= "</modelo>n";

}//FECHA FOR

 

$xml.= "</modelo>n";

 

//CABEÇALHO

Header("Content-type: application/xml; charset=iso-8859-1");

}//FECHA IF (row)

 

//PRINTA O RESULTADO

echo $xml;

?>

 

 

espero que ajudem voces, pois procurei pra caramba esse tutorial, que fizesse dessa forma, mastigado desse jeito e NAO CONSEGUI.

 

Abraços a todos

[william_droops 0]

Não estou conseguindo implementar, você pode me ajudar ?

[Adelar Tiemann jr 0]

Ola

bom pelo uq eu intendi o seu problema existem 2 soluçoes: vou explicalo no final

 

Primeira maneira

trocar de:

ajax.open("POST", form_action, true)

 

para

ajax.open("POST", form_action, false)

 

segunda maneira

colocar a xamada da segunda parte dentro da primeira;

colocar a xamada da terceira parte dentro da segunda;

de modo q fiquem em hierarquia.

 

 

Esse problema pode ocorrer pois o ajax esta trabalhando de forma assincrona ou seja:

ele chama o ajax e não espera o retorno dele para ai continuar

desta forma ele chama o ajax e continua com o codigo

 

e colocando o false no fim dos parametros ele ira xamar o ajax executar ele ao todo retornar o seu valor

para ai entao continuar com a interpretação de seu codigo.

 

esperto ter ajudado vlw ae