Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
olá galera. peguei este tutorial no site do imasters
http://www.imasters.com.br/artigo/3918/jav...os_sem_refresh/
porem gostaria de customiza-lo para 3 niveis de acesso e me ocorre um problema não consigo passar a variavel empresa para a outra página
seguem as páginas
test1.php
<?phpinclude("inc/functions.php");conectar();?><script type="text/javascript">function Dados(valor) { //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].unidade.options.length = 1; idOpcao = document.getElementById("opcoes"); ajax.open("POST", "unidades.php", 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 = "--Primeiro selecione a empresa--"; } } } //passa o código do empresa escolhido var params = "empresa="+valor; ajax.send(params); } } function processXML(obj){ //pega a tag unidade var dataArray = obj.getElementsByTagName("unidade"); //total de elementos contidos na tag unidade if(dataArray.length > 0) { //percorre o arquivo XML paara extrair os dados for(var i = 0; i < dataArray.length; i++) { var item = dataArray[i]; //contéudo dos campos no arquivo XML var codigo = item.getElementsByTagName("id")[0].firstChild.nodeValue; var descricao = item.getElementsByTagName("nome")[0].firstChild.nodeValue; idOpcao.innerHTML = "--Selecione uma das opções abaixo--"; //cria um novo option dinamicamente var novo = document.createElement("option"); //atribui um ID a esse elemento novo.setAttribute("id", "opcoes"); //atribui um valor novo.value = codigo; //atribui um texto novo.text = descricao; //finalmente adiciona o novo elemento document.forms[0].unidade.options.add(novo); } } else { //caso o XML volte vazio, printa a mensagem abaixo idOpcao.innerHTML = "--Primeiro selecione a empresa--"; } }</script><span class="titulo">CADASTRO DE FUNCIONÁRIO</span><table border="0" align="center"><form action="" method="POST" name="frmAjax"><input type="hidden" name="id_func" id="id_func"><tr> <td class="direita">Empresa</td> <td colspan=2 class="esquerda"><select name="empresa" onChange="Dados(this.value);"><option value=0>---Selecione Abaixo---</option><?php $sql="select e.id_empresa, e.nome_empresa from empresa as e";$resultado=pg_exec($sql);while($linha = pg_fetch_array($resultado)){$id_empresa = $linha["id_empresa"];$nome_empresa = $linha["nome_empresa"];echo "<option value=\"$nome_empresa\">$nome_empresa</option>\n";}?></select></td></tr><tr> <td class="direita">Unidade</td> <td colspan=2 class="esquerda"><select name="unidade"><option id="opcoes" value=0>---Selecione Abaixo---</option></select></td></tr><tr> <td class="direita">Departamento</td> <td colspan=2 class="esquerda"><select name="depto"><option value=0>---Selecione Abaixo---</option></select></td></tr></form></table><?phpinclude("inc/functions.php");conectar();//RECEBE PARÃMETRO $empresa = $_POST["empresa"]; //QUERY $sql = "SELECT u.id_unidade, u.nome_unidade FROM unidade as u, empresa as e WHERE e.nome_empresa = '$empresa' ORDER BY u.nome_unidade"; echo $sql; //EXECUTA A QUERY $resp = pg_exec($sql); $row = pg_num_rows($resp); //VERIFICA SE VOLTOU ALGO if($row) { //XML $xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n"; $xml .= "<unidades>\n"; //PERCORRE ARRAY for($i=0; $i<$row; $i++) { $id = pg_result($resp, $i, "id_unidade"); $unid = pg_result($resp, $i, "nome_unidade"); $xml .= "<unidade>\n"; $xml .= "<id>".$id."</id>\n"; $xml .= "<nome>".$unid."</nome>\n"; $xml .= "</unidade>\n"; }//FECHA FOR $xml.= "</unidades>\n"; //CABEÇALHO Header("Content-type: application/xml; charset=iso-8859-1"); }//FECHA IF (row) //PRINTA O RESULTADO echo $xml; ?>aguardo a ajuda de todos abraço
SOLUÇÃO
para resolver o meu problema utilizei o mesmo script apenas alterei as variaveis
segue script do ajax.sp
os outros são iguais
abraços
ajax.js
function Dados(valor) { //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].unidade.options.length = 1; idOpcao = document.getElementById("opcoes"); ajax.open("POST", "unidades.php", 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 = "--Primeiro selecione a empresa--"; } } } //passa o código do empresa escolhido var params = "empresa="+valor; ajax.send(params); } } function processXML(obj){ //pega a tag unidade var dataArray = obj.getElementsByTagName("unidade"); //total de elementos contidos na tag unidade if(dataArray.length > 0) { //percorre o arquivo XML paara extrair os dados for(var i = 0; i < dataArray.length; i++) { var item = dataArray[i]; //contéudo dos campos no arquivo XML var codigo = item.getElementsByTagName("id")[0].firstChild.nodeValue; var descricao = item.getElementsByTagName("nome")[0].firstChild.nodeValue; idOpcao.innerHTML = "--Selecione uma das opções abaixo--"; //cria um novo option dinamicamente var novo = document.createElement("option"); //atribui um ID a esse elemento novo.setAttribute("id", "opcoes"); //atribui um valor novo.value = codigo; //atribui um texto novo.text = descricao; //finalmente adiciona o novo elemento document.forms[0].unidade.options.add(novo); } } else { //caso o XML volte vazio, printa a mensagem abaixo idOpcao.innerHTML = "--Primeiro selecione a empresa--"; } } function CreateRequest1(valor) { //verifica se o browser tem suporte a ajax try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch(ex) { try { request = new XMLHttpRequest(); } catch(exc) { alert("Esse browser não tem recursos para uso do Ajax"); request = null; } } } //se tiver suporte ajax if(request) { //deixa apenas o elemento 1 no option, os outros são excluídos document.forms[0].depto.options.length = 1; idOption = document.getElementById("opceos"); request.open("POST", "depto.php", true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.onreadystatechange = function() { //enquanto estiver processando...emite a msg de carregando if(request.readyState == 1) { idOption.innerHTML = "Carregando...!"; } //após ser processado - chama função processXML que vai varrer os dados if(request.readyState == 4 ) { if(request.responseXML) { processXML1(request.responseXML); } else { //caso não seja um arquivo XML emite a mensagem abaixo idOption.innerHTML = "--Primeiro selecione a unidade--"; } } } //passa o código do empresa escolhido var parametros = "unidade="+valor; request.send(parametros); } } function processXML1(obj1){ //pega a tag unidade var d_Array = obj1.getElementsByTagName("depto"); //total de elementos contidos na tag unidade if(d_Array.length > 0) { //percorre o arquivo XML paara extrair os dados for(var j = 0; j < d_Array.length; j++) { var itens = d_Array[j]; //contéudo dos campos no arquivo XML var codig0 = itens.getElementsByTagName("codi")[0].firstChild.nodeValue; var descrica0 = itens.getElementsByTagName("dept")[0].firstChild.nodeValue; idOption.innerHTML = "--Selecione uma das opções abaixo--"; //cria um novo option dinamicamente var nnew = document.createElement("option"); //atribui um ID a esse elemento nnew.setAttribute("id", "opceos"); //atribui um valor nnew.value = codig0; //atribui um texto nnew.text = descrica0; //finalmente adiciona o novo elemento document.forms[0].depto.options.add(nnew); } } else { //caso o XML volte vazio, printa a mensagem abaixo idOption.innerHTML = "--Primeiro selecione a empresa--"; } }>
SOLUÇÃO
para resolver o meu problema utilizei o mesmo script apenas alterei as variaveis
segue script do ajax.sp
os outros são iguais
abraços
Legal você ter postado a solução.Tem que por também no segundo select:
onChange="CreateRequest1(this.value);"So q tem um probleminha. O terceiro select só muda se o segundo for selecionado.O certo seria: Se o usuário mudar o 1º ou 2º select o terceiro teria que mudar também.E como mudar a cor do texto de "Carregando...!" Por exemplo?
Como fazer, Caso ainda nenhuma opção do 1º select tenha sido escolhida, os selects restantes aparecerem como disabled="disabled" ??
alguem sabe?? To lendo sobre javascript mas nao sei como fazer isso.
Fala amigo, cara até agora ninguém me ajudou na minha dúvida, veja se você pode me dar uma atenção, pq me parece que os nossos problemas são parecidos.
não entendi o problema Kowalske
poste o problema que alguem ajudará
abraço
JAVASCRIPT
function Dados(valor) { //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].unidade.options.length = 1;
document.forms[0].unidade.disabled = true;
document.forms[0].depto.disabled = true;
document.forms[0].depto.options.length = 1;
/*
document.forms[0].depto.options.length = 1;
idOptions = document.getElementById("opcos");
var pega_texto = getText(idOptions);
var texto = "";
if(pega_texto != " "){
var texto = replaceText(idOptions, " ");
var pega_texto = "";
idOptions.innerHTML = "";
}
*/
idOpcao = document.getElementById("opcoes");
ajax.open("POST", "unidades.php", 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...!";
document.forms[0].unidade.disabled = false;
}
//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 = "--";
document.forms[0].unidade.disabled = true;
}
}
}
//passa o código do empresa escolhido
var params = "empresa="+valor;
ajax.send(params);
}
}
function processXML(obj){
//pega a tag unidade
var dataArray = obj.getElementsByTagName("unidade");
//total de elementos contidos na tag unidade
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var codigo = item.getElementsByTagName("id")[0].firstChild.nodeValue;
var descricao = item.getElementsByTagName("nome")[0].firstChild.nodeValue;
idOpcao.innerHTML = "--";
//cria um novo option dinamicamente
var novo = document.createElement("option");
//atribui um ID a esse elemento
novo.setAttribute("id", "opcoes");
//atribui um valor
novo.value = codigo;
//atribui um texto
novo.text = descricao;
//finalmente adiciona o novo elemento
document.forms[0].unidade.options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "--";
document.forms[0].unidade.disabled = true;
}
}
function CreateRequest1(valor) {
//verifica se o browser tem suporte a ajax
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex) {
try {
request = new XMLHttpRequest();
}
catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
request = null;
}
}
}
//se tiver suporte ajax
if(request) {
//deixa apenas o elemento 1 no option, os outros são excluídos
document.forms[0].depto.options.length = 1;
document.forms[0].depto.disabled = true;
idOption = document.getElementById("opceos");
request.open("POST", "depto.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(request.readyState == 1) {
idOption.innerHTML = "Carregando...!";
document.forms[0].depto.disabled = false;
}
//após ser processado - chama função processXML que vai varrer os dados
if(request.readyState == 4 ) {
if(request.responseXML) {
processXML1(request.responseXML);
}
else {
//caso não seja um arquivo XML emite a mensagem abaixo
idOption.innerHTML = "--Departamento não Cadastrado--";
document.forms[0].depto.disabled = true;
}
}
}
//passa o código do empresa escolhido
var parametros = "unidade="+valor;
request.send(parametros);
}
}
function processXML1(obj1){
//pega a tag unidade
var d_Array = obj1.getElementsByTagName("depto");
//total de elementos contidos na tag unidade
if(d_Array.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var j = 0 ; j < d_Array.length ; j++) {
var itens = d_Array[j];
//contéudo dos campos no arquivo XML
var codig0 = itens.getElementsByTagName("codi")[0].firstChild.nodeValue;
var descrica0 = itens.getElementsByTagName("dept")[0].firstChild.nodeValue;
idOption.innerHTML = "--";
//cria um novo option dinamicamente
var nnew = document.createElement("option");
//atribui um ID a esse elemento
nnew.setAttribute("id", "opceos");
//atribui um valor
nnew.value = codig0;
//atribui um texto
nnew.text = descrica0;
//finalmente adiciona o novo elemento
document.forms[0].depto.options.add(nnew);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOption.innerHTML = "--";
document.forms[0].depto.disabled = true;
}
}notem que em algumas partes desse codigo
eu inseri isso
document.forms[0].depto.disabled = true;isto serve para setar o campo como sendo disabled
document.forms[0].depto.disabled = false;e assim enable
se eu não respondi algo poste ai que quem sabe eu o ajudo
abraço
se eu não respondi algo poste ai que quem sabe eu o ajudoabraço
valeu, ajudou muito!testei aqui e funcionou beleza. Vou ler e testar mais o código.valeu http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Será que tem como você postar seu código PHP e dizer como está o esquema das tabelas?
Por exemplo:
EMPRESA
(cod,nome_empresa)
UNIDADE
(cod,cod_empresa,nome_unidade)
DEPARTAMENTO
(cod,cod_unidade,nome_departamento)
Minha tabela está da forma que mostrei acima, queria saber como devo implementar com o PHP para que busque as informações no banco de dados e fazer funcionar.
A pessoa obrigatoriamente tem que escolher a EMPRESA para formar a lista de UNIDADE
e deve escolher obrigatoriamente a UNIDADE para se formar o DEPARTAMENTO
ENTÃO:
EMPRESA
UNIDADE
DEPARTAMENTO
tem dependencia entre si.
Olha o que eu fiz
CODE
function criarFabricante(valor) { //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_fabricante.options.length = 1;
idOpcao = document.getElementById("opcoes_fabricante");
ajax.open("POST", "fabricante.php", 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 = "tipo="+valor;
ajax.send(params);
}
}
function processXML(obj){
//pega a tag cidade
var dataArray = obj.getElementsByTagName("fabricante");
//total de elementos contidos na tag cidade
if(dataArray.length > 0) {
//percorre o arquivo XML paara extrair os dados
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray*;*//contéudo dos campos no arquivo XML
* var cod_fabricante = item.getElementsByTagName("cod_fabricante")[0].firstChild.nodeValue;*
* var nome_fabricante = item.getElementsByTagName("nome_fabricante")[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 = cod_fabricante;
//atribui um texto
novo.text = nome_fabricante;
//finalmente adiciona o novo elemento
document.forms[0].select_fabricante.options.add(novo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
idOpcao.innerHTML = "--Primeiro selecione o estado--";
}
}
//
//
//
// cod_fabricantecod_fabricantecod_fabricantecod_fabricantecod_fabricantecod_fabric
antecod_fabricantecod_fabricantecod_fabricantecod_fabricante
//
//
//
//
//
//
function criarModelo(valor) {
//verifica se o browser tem suporte a modeloRequest
try {
modeloRequest = new ActiveXobjModeloect("Microsoft.XMLHTTP");
}
catch(e) {
try {
modeloRequest = new ActiveXobjModeloect("Msxml2.XMLHTTP");
}
catch(ex) {
try {
modeloRequest = new XMLHttpRequest();
}
catch(exc) {
alert("Esse browser não tem recursos para uso do modeloRequest");
modeloRequest = null;
}
}
}
//se tiver suporte modeloRequest
if(modeloRequest) {
//deixa apenas o elemento 1 no option, os outros são excluídos
document.forms[0].select_modelo.options.length = 1;
codModeloOpcao = document.getElementById("opcoes_modelo");
modeloRequest.open("POST", "modelo.php", true);
modeloRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
modeloRequest.onreadystatechange = function() {
//enquanto estiver processando...emite a msg de carregando
if(modeloRequest.readyState == 1) {
codModeloOpcao.innerHTML = "Carregando...!";
}
//após ser processado - chama função processXML que vai varrer os dados
if(modeloRequest.readyState == 4 ) {
if(modeloRequest.responseXML) {
processXML(modeloRequest.responseXML);
}
else {
//caso não seja um arquivo XML emite a mensagem abaixo
codModeloOpcao.innerHTML = "Selecione o tipo";
}
}
}
//passa o código do TIPO escolhido
var params = "tipo="+valor;
modeloRequest.send(params);
}
}
function processXML(objModelo){
//pega a tag cidade
var dataArrayModelo = objModelo.getElementsByTagName("modelo");
//total de elementos contidos na tag cidade
if(dataArrayModelo.length > 0) {
//percorre o arquivo XML paara extrair os dados
* for(var i = 0 ; i < dataArrayModelo.length ; i++) {*
* var item = dataArrayModelo**;*//contéudo dos campos no arquivo XML
* var cod_modelo = item.getElementsByTagName("cod_modelo")[0].firstChild.nodeValue;*
* var nome_modelo = item.getElementsByTagName("nome_modelo")[0].firstChild.nodeValue;*
codModeloOpcao.innerHTML = "Selecione...";
//cria um novoModelo option dinamicamente
var novoModelo = document.createElement("option");
//atribui um ID a esse elemento
novoModelo.setAttribute("id", "opcoes_modelo");
//atribui um valor
novoModelo.value = cod_modelo;
//atribui um texto
novoModelo.text = nome_modelo;
//finalmente adiciona o novoModelo elemento
document.forms[0].select_modelo.options.add(novoModelo);
}
}
else {
//caso o XML volte vazio, printa a mensagem abaixo
codModeloOpcao.innerHTML = "fabricante";
}
}
não funciona
se eu tirar a funcao criarModelo ele funciona normal os dois primeiros niveis, alguem me ajuda ai
>
Será que tem como você postar seu código PHP e dizer como está o esquema das tabelas?
...
Então, o esquema do db é igual ao artigo que foi postado pelo Pauloooo no primeiro post. Basta mudar o nome das tabelas no bloco de notas.
consegui fazer com dois niveis..
preciso aogra com mais um...
hehe
segue codigo com dois niveis
ajax.js
cad_func.php
unidades.php
agradeço quem puder ajudar!
abraço