Passagem de parametros - propriedade onreadystatechange

[ViníciusJF 0]

Olá pessoal, bom dia

 

Tenho um problema com o sistema que estou desenvolvendo. Sou iniciante em javascript e estou precisando da ajuda de vcs pq não achei nada, em nenhuma literatura, a respeito. É o seguinte...

 

Possuo um formulário com 30 linhas e 2 colunas (segue a imagem abaixo para melhor visualização - ela esta simplificada).

Na 1ª linha esta a combo onde eu seleciono um fornecedor. A ação esperada é que, quando seu seleciono determinado fornecedor, o AJAX consulte na base de dados todos as marcas relativas ao respectivo e me as disponibilize, na 2ª combo, para eu escolher.

 

 

Bom para eu fazer o que eu pretendo, consegui um código, que executa com perfeição a primeira linha da tabela... São dois arquivos:

 

// JavaScript Document ajax.func.js
	function list_dados(valor,elementosx){
		http.open("GET", "result.php?id=" + valor, true);
		http.onreadystatechange = handleHttpResponse;
/*Aqui começa meu problema... como são várias linhas, pensei em passar o id de cada objeto através de parametros da função list_dados. O problema é que a propriedade ONREADYSTATECHAGE chama a função, mas NÃO aceita argumento algum. Veja na função ELEMENTO() abaixo, que tenho que colocar o argumento manualmente...*/


		http.send(null);
	}
	
	function elemento(){
		var elemento = 1;
								/*AQUI É O PROBLEMA: Observe que o nº 1 foi colocado manualmente para representar o elemento 1 do formuário (COMBO 2 DA LINHA 1), mas é necessário que isso seja feito de forma automática pelo sistema.*/


		return elemento;
	}
	
	function handleHttpResponse(){
		elementos = elemento();
/*Aqui é chamada a função elemento que pega o arqumento e o transforma em variável a ser usada na linha abaixo*/


		campo_select = document.forms[0].elements[elementos];
		if (http.readyState == 4) {
			campo_select.options.length = 0;
			results = http.responseText.split(",");
			for( i = 0; i < results.length; i++ ) {
				string = results[i].split( "|" );
				campo_select.options[i] = new Option( string[0], string[1] );
			}
		}
	}
	
	function getHTTPObject() {
		var req;
		try {
			if (window.XMLHttpRequest) {
				req = new XMLHttpRequest();
				if (req.readyState == null) {
					req.readyState = 1;
					req.addEventListener("load", function () {
						req.readyState = 4;
						if (typeof req.onReadyStateChange == "function")
							req.onReadyStateChange();
						}, false);
				}
				return req;
			}
			
			if (window.ActiveXObject) {
				var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
				for (var i = 0; i < prefixes.length; i++) {
					try {
						req = new ActiveXObject(prefixes[i] + ".XmlHttp");
						return req;
					} catch (ex) {};
				}
			}
		} catch (ex) {}
		
		alert("XmlHttp Objects not supported by client browser");
	}
	var http = getHTTPObject();
	/* Logo após fazer a verificação, é chamada a função e passada o valor à variável global http.*/

Bom, no arquivo abaixo não existe problema algum, só vou coloca-lo para facilitar o entendimento de vocês...

 

<?
	include "../../conecta.php";
	$con = mysql_connect("localhost", $usuario1, $senha1);
	
	// Selecionando  base de dados, no caso se chama indexc_ajax
	mysql_select_db($bd1);
	
	// Guardando o id passado pelo form select
	// Trim remove os espaços no inicio e final
	// addslashes Retorna uma string com barras invertidas antes de caracteres
	// que precisam ser escapados para serem escapados em query a banco de dados
	$categoria = addslashes(trim($_GET["id"]));
	
	// Fazendo nosso selec para todas subcategorias que pertencem à categoria presente
	// na variavel $categoria acima
	$consulta = mysql_query("SELECT * FROM marcas WHERE id_fornecedor = '$categoria' ORDER BY nome_marca ASC");
	 while( $row = mysql_fetch_assoc($consulta) ){
	 
	 	// subcategoria será apresentada da forma "NOME|CODIGO,..."
		// Maneira a ser tratada no JavaScript
		// Vale lembrar que estamos contatenando o "nome" com a "|" com o "codigo" e com a ","  
		echo $row["nome_marca"] . "|" . $row["id_fornecedor"] . ",";
	}
?>

Bom pessoal, tentei explicar da melhor maneira. Será que alguém já passou por um desafio destes? Preciso de ajuda de quem já possui essa experiencia. Estou com meu desenvolvimento parado por causa disso.

 

Abraços a todos

[Leonardo Oliveira 0]

Vinicius, Segue abaixo um exemplo de como eu uso o Ajax em minhas aplicações.

 

Primeiro: No codigo HTML deve ser defido um numero para cada linha e passa como parametro na função list_dados

 

// JavaScript Document ajax.func.js
function list_dados(valor,numLinha){ 
	http.open("GET", "result.php?id=" + valor, true); 
	http.onreadystatechange = function(){handleHttpResponse(numLinha);}
	http.send(null);        
}                

function handleHttpResponse(numLinha){  
        //para usar getElementById dever ser definido a propriedade ID da combo
	campo_select = document.getElementById("ID_Da_Segunda_Combo" + numLinha);
	if (http.readyState == 4) {
		campo_select.options.length = 0;
		results = http.responseText.split(","); 
		for( i = 0; i < results.length; i++ ) {
			string = results[i].split( "|" );
			campo_select.options[i] = new Option( string[0], string[1] )
		}
	}
}