Dropdown dinamica

[NaDa]

Boas,

Queria uma ajudinha aqui na optimização de um script, se alguém puder dar uma mãozinha 😉

Queria umas dropdowns dinamicas, pesquisei um script fácil visto que javascript ainda estou bem leste.. Encontrei um que faz o que quero, mas tem um senão..

	<script type="text/javascript">
	function verDinamico(opcao, nome){
		var xmlhttp;
		if (opcao==""){
		  document.getElementById("txtHint").innerHTML="";
		  return;
		}
		if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		}
		else{// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
				document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","index.php?pag=actions&action=ajax_dropdown&opcao="+opcao+"&nome="+nome,true);
		xmlhttp.send();
	}
	</script>

Na segunda vez(segunda div) ela simplesmente desaparece para aparecer a nova..

Entao alterei para criar uma div e nao escrever por cima..

                var newdiv = document.createElement('div');
			 newdiv.innerHTML=xmlhttp.responseText;
			 document.getElementById(nomeDoDiv).appendChild(newdiv);

Mas caso eu numa dropdown escolha uma opção e depois vá la e escolha outra, todas as dropdowns desaparecem e tem de começar da primeira dowpdown..

Há uma maneira fácil de resolver isto? :S

Desde já obrigado e bom sábado 😉

Edited April 20, 2013 at 04:20 PM by NaDa

[brunoais]

Se queres otimizar, tens muito ainda para fazer.

1º Assume que o IE6 e IE5 não existem, por isso, apaga aquele if que veirfica isso e usa só o XMLHttpRequest().

2º Não executes código desnecessariamente. Usa o evento load (atributo onload, só para n haver chatices com o IE7 e IE8, senão seria o addEventListener())

Por exemplo:

xmlhttp.onload = function (){
   // faz aqui o que tens a fazer. 
}

Usando o código que tens aí só para identificares melhor o tipo de coisa para meteres ali:

xmlhttp.onload = function (){
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}

Nota que isto está muito errado se queres otimização.

O melhor que podes fazer é só enviar pela rede a informação mínima e necessária para apresentar o que queres apresentar. E não andar a procurar por um elemento no DOM sempre que se quer fazer algo a ele.

Neste caso, o melhor que podes fazer é enviar pares chave-valor para identificares a que dados é que se refere.

Para tornar o processo mais fácil (e mais cross browser), podes bem usar um documento XML de que podes fazer parse (basta usares o valor xmlhttp.responseXML) no js. Depois é só percorreres o XML e obteres os dados que queres.

Esta parte já tem muito tempo e acho que, excecionalmente, o w3s pode ajudar. Vê aqui:

http://www.w3schools.com/dom/dom_nodes_navigate.asp

Se quiseres mais ajuda, eu posso ajudar, mas acho que já tens bastante por onde começar.

Edited April 22, 2013 at 10:28 AM by brunoais