[Resolvido] Ler XML com checkboxes dinamicamente

[Lossehellin 0]

Boa tarde pessoal, estou com um problema em um sisteminha que estou criando e não estou conseguindo pensar em mais nada, portanto, vou recorrer aos masters x)

 

--

Estou criando um sistema onde tenho vários produtos e estes produtos tem itens, por exemplo (meu bd XML):

 

<?xml version="1.0" encoding="utf-8"?>
<carros>
               <produto nome="Carro1" id="0">
		<item>Freio ABS</item>
		<item>Ar quente</item>
		<item>Desembaçador traseiro</item>
	</produto>

	<produto nome="Carro2" id="1">
		<item>Freio ABS</item>
		<item>Ar quente</item>
		<item>Desembaçador traseiro</item>
		<item>Direção Hidráulica</item>
		<item>Airbags</item>
	</produto>

	<produto nome="Carro3" id="2">
		<item>Freio ABS</item>
		<item>Ar quente</item>
		<item>Direção Hidráulica</item>
                       <item>Teto solar</item>
	</produto>
</carros>

 

E existe uma lista de checkboxes onde eu tenho todos estes itens do xml:

• Freio ABS
  
• Ar quente
  
• Desembaçador traseiro
  
• Direção Hidráulica
  
• Airbags
  

 

O que eu quero é, quando um usuário seleciona uma checkbox, o produto (ou os produtos) que contém tal item (Freio ABS por exemplo), aparecem em uma DIV (neste caso apareceriam os 3 carros) e isto eu já consegui fazer.

Porém, quando ele selecionar outra checkbox (Direção Hidráulica por exemplo), somente apareceriam os carros 2 e 3 (faria uma exclusão).

E também se ele selecionar todas checkbox, não apareceria nenhum carro (pois nenhum carro contém todos os itens).

 

E é isto que eu não estou conseguindo fazer. Alguém tem alguma idéia?

 

Obrigado desde já :D

[William Bruno 1501]

quando um usuário seleciona uma checkbox, o produto (ou os produtos) que contém tal item (Freio ABS por exemplo), aparecem em uma DIV (neste caso apareceriam os 3 carros) e isto eu já consegui fazer.

mostre como você fez esta parte, que prosseguimos incrementando o teu código.

[Lossehellin 0]

mostre como você fez esta parte, que prosseguimos incrementando o teu código.

 

Beleza, lá vai (vou separar por tópicos pra ficar melhor de visualizar.

 

Um exemplo de uma checkbox e sua função:

<label>
 <input type="checkbox" class="itemCarro" name="item[]" onclick="valorchk(this,'bd.xml')"  value="Freio ABS" />
 Freio ABS
</label>

function valorchk(obj, file){
	var xmlurl = file;
	var state = obj.checked;
	var value = obj.value;

	algumProd_arr = pegaAll();

	if(algumProdarr.length == 0){
		algumProd = 0;
	}else{
		algumProd = 1;
	}
               if(state == true){
		insereItem(value, xmlurl);
	}else{
		retiraItem(value, xmlurl);
	}
}

//Jquery para pegar o valor de todas as checkboxes
function pegaAll() {         
var allVals = [];
	$('#tCobertura :checked').each(function() {
		allVals.push($(this).val());
	});
	return allVals
}

function insereItem(val, xmlFile){
arr_len = array_cob.length;
array_cob[arr_len] = val;
buscaProduto(array_cob, xmlFile);
}

function retiraItem(val, xmlFile){
for(i=0;i<=arr_len;i++){
	if(array_cob[i] == val){
		array_cob[i] = '';
		buscaProduto(array_cob, xmlFile);
		break;
	}
}
}

 

--

AJAX (puxando o xml e tratando):

function GetXMLHttp() {
   if(navigator.appName == "Microsoft Internet Explorer") {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else {
       xmlHttp = new XMLHttpRequest();
   }
if (typeof ASYNC != "undefined") {
	xmlHttp.async=ASYNC;
 	xmlHttp.load(FILE);
}
   return xmlHttp;
}

function buscaProduto(array, xml){
xmlRequest = GetXMLHttp();
   var url = xml;
array_prods = array;
   xmlRequest.onreadystatechange = mostraProduto;
xmlRequest.open("GET",url,true); 
xmlRequest.setRequestHeader('Content-Type','text/xml');
xmlRequest.setRequestHeader('encoding','utf-8');
   xmlRequest.send(null);

       if (xmlRequest.readyState == 1) {
           document.getElementById("conteudo_mostrar").innerHTML = "<img src='imagens/ajax-loader.gif'>";
       }
   return url;
}


//Aqui faço o tratamento onde [b]eu já consegui fazer[/b]
function mostraProduto(){
    if (xmlRequest.readyState == 4){ 
	 if(xmlRequest.status == 200){
		var xmlDoc = xmlRequest.responseXML;
		//Pegamos o tamanho do array de itens (todas as checkboxes selecioanadas)
		arr_lenx = array_prods.length;
		//Instanciamos a variável para o erro "Nenhum carro possui estes itens"
		var algumaCob = 0;
		var contador = 0;
		//Verificamos se a radiobox Produtos para carros está selecionada
		if(document.getElementById('radioCarro').checked == true){
			//Se sim, colocamos o início e o limite do for baseados nos ID's dos produtos para carros
			var iC = 1;
			var iF = 11;
		}else{
			//Se não, colocamos o início e o limite do for baseados nos ID's dos produtos para motos
			var iC = 12;
			var iF = 15;
		}

		//Instancia da variável que atuará como uma lista, que vai para a div com os resultados
		var listaProds = '<h2>Produtos</h2></br />';
		listaProds += '<ul>';

		//Começamos o for baseados na quantidade de produtos em pessoa carros ou motos
		for(i=iC;i<=iF;i++){
			//Esta variável indica que o produto ainda não foi incluído na lista da div ***
			ok = 0;
			//Produto indexado
			var produto =  xmlDoc.getElementsByTagName("produto")[i]; 
			//CObertura do Produto indexado
			var produtocobx = produto.getElementsByTagName("item");
			//Quantidade de coberturas que o produto indexado possui
			sizeProd = produtocobx.length;

			//Começamos o for baseados na quantidade de itens que o produto possui
			// para pegarmos o nome de cada uma e checarmos com a lista de itens
			// que o usuário selecionou.
			for(ii=0;ii<=sizeProd-1;ii++){
				//Indexamos o item
				var coberturax = produto.getElementsByTagName("item")[ii];

				//Aqui verificamos o navegador, pois o Internet explorer trata o valor
				// de dentro de um nó no xml diferente do Mozilla, Opera, Chrome, etc.
				if(navigator.appName == "Microsoft Internet Explorer") {
					//Passamos o valor de dentro de um nó no xml para uma variável
					cob = coberturax.text;
				}else{
					//Passamos o valor de dentro de um nó no xml para uma variável
					cob = coberturax.textContent; 
				}

				//Começamos o for baseados na quantidade de checkboxes selecionadas para checarmos o produto
				for(iii=0;iii<=arr_lenx;iii++){

					//Passamos o atributo 'nome' do nó produto para uma variável
					prod = produto.getAttribute('nome');

					//Checamos se o item selecionado pelo usuário existe no produto indexado
					if(array_prods[iii] != '' && array_prods[iii] == cob){
							//Checamos se o produto ainda não está na lista da div (ok)
							if(ok == 0){
								//arr_prodx[contador] = prod;
								listaProds += '<li>'+prod+'</li>';
								contador += 1;
								ok = 1;
								algumaCob = 1;
							}

					}
				}
			}
		}

		//Fechamos a lista da div
		listaProds += '</ul>';

		if(algumaCob == 0 && algumProd == 1){
			listaProds += '<p style=" color:#ff0000;">Nenhum carro possui estes itens.</p>';
		}else if(algumProd == 0){
			listaProds += '<p>Selecione algum item.</p>';
		}

		//Passamos a div para uma variável para tratá-la melhor
		var container = document.getElementById("conteudo_mostrar");
		//Usamos a função para corrigir o erro do IE com a função InnerHTML 
		// (Aqui a div mostrará todos os produtos através da lista criada)
		replace_html(container, listaProds);
	}else{
		alert('Erro');
	}
 }
}

 

Não sei se está meio complexo, mas é isso aí. Eu procuro comentar meu código sempre e espero que ajude ;)

 

Cara, já estou muito grato pela sua vontade de me ajudar!

Obrigado.

[Lossehellin 0]

Deve ser algo MUITO babaca de se fazer, mas tá dificil ;/

 

Era mesmo muito babaca, consegui resolver.

 

Era só colocar um contador indicando a quantidade de itens que batiam, se essa quantidade fosse igual à quantidade de checkboxes selecionadas, o produto ia para a lista pois ele cobria todos os itens, se fosse diferente, ele não cobria.

 

Muito obrigado!