Archive for the ‘ie’ Category

Solução para update de “select” usando Ajax no IE

Monday, August 27th, 2007

Hoje, depois de um certo tempo sem postar, irei apresentar uma solução para o problema do update em tags “select” no IE, mas antes explicarei que problema é esse para quem não entendeu.
O Internet Explorer (IE) não aceita, por um bug, a inserção de nós “option” em um nó “select” usando a propriedade inneHTML do mesmo. Ao se tentar isso as opções do “select” simplesmente não aparecem, ficam todas brancas, é tosco!
por exemplo, se eu tentar executar o código abaixo as options não aparecerão no IE:

document.getElementById("id_de_um_select").innerHTML = "Opção 1";

Agora vou mostrar a solução para esse problema, ela é bem simples de entender e o método é bastante rápido e eficiente, eu mesmo que fiz depois de penar com esse bug e testar alguns métodos que encontrei por ai na net e ver que quando eles eram usados com uma lista muito grande de “options” o “select” demorava anos para ser atualizado. Nesse caso não o método funciona mais ou menos na mesma velocidade para lista de tamanhos diferentes. Eis o método, e logo abaixo a explicação do mesmo:


/**
 * Método usado para jogar conteúdo no innnerHTML de selects.
 * @param {Object} selectObj - o Select que receberá o texto.
 * @param {Object} texto -  o texto que será incorporado no objeto select.
 */
function updateSelect(selectObj,texto){
	var tempDiv = document.createElement("div");
	var attString = "";
	var att = selectObj.attributes;
	for(var i = 0 ; i < att.length ; i++)
		if(att[i].nodeValue != "" && att[i].nodeValue != null )//o IE diz que nó tem todos os atributos possíveis com valor null ou "" então temos que filtrar esses valores
			tempDiv.innerHTML = "<select "+attString+">"+texto+"</select>";
	var newSelect = tempDiv.firstChild;
	selectObj.parentNode.replaceChild(newSelect,selectObj);
	selectObj = null;tempDiv = null;
	return newSelect;
}

Como podemos ver essa função tem dois parâmetros, “selectObj” e “texto”. selectObj é o objeto select que receberá a string “texto” em seu “innerHTML”.
Bom vou pular as partes bestas…
No único “for” dessa função o que estou fazendo é jogando todos os atributos do nó “select” numa string para futuramente colocar no innerHTML de uma div temporário que é criada. Dentro da tag “select” eu coloco o parâmetro “texto” e jogo eles no innerHTML da div temporária, depois crio um select temporário que recebe o primeiro nó da div temporária (no caso é o nosso select) e substituo o select anterior por este novo.
Simples não?

Vou anexar a este post a biblioteca “max”, que foi apresentada anteriormente em outro post, já com esse novo método sendo usado automaticamente ao se tentar fazer um update em um nó “select”.
Em breve estarei postando mais um método para a biblioteca “max” que vai torná-la capaz de ser usada com o method “post”, normalmente usado em formulários.
Qualquer dúvida em como usar a biblioteca por favor me avisem! e seu comentário é muito importante!!! :D

Arquivos: