problema con document.getElementById

[m_arias_m]

Hola a todos.

Mi nombre es Moises y este es mi primer post, así que si no es el lugar correcto donde postear les agradeciera que me lo indicaran.

Bueno mi problema es el siguiente:
Estoy mostrando información dinámica en un div con ajax, mediante ajax solicito al servidor código html que coloco en div de la siguiete forma:

Código:

function carga_datos(){
	if(window.IdSol==undefined)	return;
	var divP = document.getElementById('dvDoc');
	
	var ajax=objetoAjax();
	ajax.open("POST", "php/get_update_docs.php",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			divP.innerHTML=ajax.responseText;			
		}
	}

	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");


	ajax.send("IdSol="+IdSol);
}


...
carga_datos();

if(escAux!=""){
	xField = document.getElementById("slcInst");
	if(xField!=undefined) xField.value=escAux;
}
...

y el codigo php que me regresa el html es:

Código PHP:

   
... 
echo '<div id="dvInst">'; 
echo '<table>'; 
echo '<tr>'; 
echo '<td><div align="left">Instituci&oacute;n:</div></td>'; 
echo '<td><select name="slcInst" id="slcInst" size="1">'.lstPlanteles().'</select><span class="Estilo4">*</span></td>'; 
echo '</tr>'; 
echo '</table>'; 
echo '</div>'; 
 
echo "<div align='left'>Documentos anexos:</div>"; 
echo "        <table width=\"1060\" >"; 
echo "          <tr>"; 
echo "            <td width=\"515\"><div align=\"left\">Originales:</div></td>"; 
echo "            <td width=\"10\">&nbsp;</td>"; 
echo "            <td width=\"513\"><div align=\"left\">Copias:</div></td>"; 
echo "          </tr>"; 
...  
   

Cuando trato de obtener el objeto "slcInst" con document.getelementById me dice el navegador lo siguiente:

Error: document.getElementById("slcInst") is null

Pero si existe porque en el navegador puedo ver el combobox.

Y haciendo pruebas coloque un alert para ver el contenido de la variable "escAux" de la siguiente forma:

Código:

...
if(escAux!=""){
        alert(escAux);
	xField = document.getElementById("slcInst");
	if(xField!=undefined) xField.value=escAux;
}
...

Lo raro es que después de eso, ya no me mando error y ya pude obtener el objeto y seleccionar un elemento de la lista, pero si quito el alert sigue marcando el mismo error.

Alguien me podría ayudar a resolver el problema o indicarme donde buscar.

De antemano gracias.

[caricatos]

Hola:

No estarás duplicando los "id's"... y tal vez usando explorer...

Saludos

[buzu]

esta parte:

Código Javascript:

if(escAux!=""){
    xField = document.getElementById("slcInst");
    if(xField!=undefined) xField.value=escAux;
}
 

la tienes que mover dentro de:

Código Javascript:

if (ajax.readyState==4) {
...
}
 

Justo después de haber insertado el contenido obtenido del servidor. Recuerda que ajax es asíncrono por lo que el interprete no espera a que tu función carga_datos inyecte el contenido antes de ejecutar el if()

La razón por la que el error no aparece con el alert, es por que el alert detiene la ejecución de tu código y da tiempo a que el servidor mande los datos y estos sean inyectados en tu documento.

Eso es lo que yo creo que está sucediendo.

[m_arias_m]

Efectivamente era eso, se me olvido que ajax es asincrono, y tenia que esperar a que el servidor me respondiera.

Gracias buzu...

[buzu]

Me alegro que se haya resuelto tu problema. Siempre hay que tener en cuenta ese tipo de comportamientos del lenguaje. Tenerlos presentes nos puede ahorrar tiempo y dolores de cabeza. Sin embargo, me ha pasado también que una cosa de esas me causa problemas. Aveces no se puede recordar todo al mismo tiempo. :)