no aparece el resultado

MasQueUnIntento · #1 (**permalink**) 06/01/2011, 12:32

Hola amigos, les cuento que tengo un problemon , a ver si alguien tiene idea...el tema es el siguiente...

tengo un ajax que llama a un objeto java(este se encarga de traer la info de la base)
y tengo un div en donde el ajax coloca ese conjunto de resultados...
A tener en cuenta, siempre hay datos que mostrar, siempre...

Pero por alguna extraña razon en ocaciones me da la impresion "visual" de que la llamada o algo en mi ajax no funciona correctamente...

Aqui va el codigo:
Codigo.js

Código:

function traerdatos(url, id_contenedor, suc, suser, idoculto){
    var nro  = Math.round(Math.random()*10000);
    var ur   = url + '?s='+suc+'&dat='+nro+'&us='+suser;
    var ajax = getXmlHttpRequest();

    ajax.open("GET",ur,true);
    ajax.setRequestHeader("Content-type","application/x-www-for-urlencoded");
    ajax.send(null);
    ajax.onreadystatechange = function(){
 if((ajax.readyState == 4) && (ajax.status == 200 || window.location.href.indexOf("http")==-1)){
 var resp = ajax.responseText;
 if(resp != ""){
 document.getElementById(idoculto).value = resp; 
 document.getElementById(id_contenedor).innerHTML = resp; }} }
}

------------------------------------------------------------------------------
Datos.jsp:

Código:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page session="true"%>
<%@page import="javax.servlet.http.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="es-ES">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Expires" CONTENT="0">
        <meta http-equiv="Cache-Control" CONTENT="no-cache">
        <meta http-equiv="Pragma" CONTENT="no-cache">
        <script type="text/javascript" src="js/codigo.js"></script>
        <script type="text/javascript">
        if (navigator.appVersion.indexOf("Linux") !=-1)
        {   document.write("<link rel='stylesheet' href='css/estilos.css' type='text/css'>");
        }else{
            if (navigator.appName == "Netscape")
            {   document.write("<link rel='stylesheet' href='css/estilos.css' type='text/css'>");
            }else{
                document.write("<link rel='stylesheet' href='css/estilos_ie.css' type='text/css'>");
            }
        }
        </script>
        <script type="text/javascript">
        function Actualiza(){
            document.getElementById('datos').innerHTML = "<p style='color: maroon'>loading...</p>";
            document.getElementById('botonver').style.visibility='hidden';
            var suc     = window.document.getElementById('sucursalid').value;
            var suser   = window.document.getElementById('usuario').value;
            var url     = 'srvlPosicion';
            var conten  = 'datos';

            if (document.getElementById('seg').disabled ==true){
                window.close();
            }else{
                    traerdatos( url,conten  ,  suc   , suser, 'txtOculto');
                    alert("trajodatos");
            }
            document.getElementById('botonver').style.visibility='visible';
            document.getElementById("cuenta").value = 0;
        }
        </script>
    </head>
    <body onload="mueveReloj();resolucion();"class="principal_posicion">
        <table width="437" border="0" cellspacing="0">
            <tr>
                <td width="274" class="divsuc" >Sucursal:
                    <input id="sucursalid" name="sucursalid" type="text"  size="1" value="">
                    <input id="botonver" style="cursor: pointer"  name="botonver"   type="image" class="png" onClick="Actualiza();" value="Click to display Report" src="css/img/versucursal.png" >
                    <input id="usuario"    name="usuario"    type="text"  style="visibility:hidden" value=<%=request.getSession().getAttribute("usuario")%>>
              </td>
            </tr>
        </table>
        <div class="datos" id="datos"></div>
        <input type="text" name="txtOculto" id="txtOculto" style=" visibility: visible" />
    </body>
</html>

Noten que tengo un alert("trajodatos"); bueno.. lo de impresion visual lo digo por que se me ejecuta el alert y aun en el div no aparecio nada... espero unos segundos mas y aparece...

Lo que estoy necesitando es que el alert no salga hasta tanto el div esté cargado..
El tema del alert es a modo de debug por que en realidad tengo que realizar otra tarea una vez este cargado el div 'datos' con la informacion..

Mil gracias chicos,. este tema me esta sacando canas verdes y soy recontra nueva en todo esto...

perryjr · #2 (**permalink**) 06/01/2011, 16:25

Lo que te pasa en el código es que AJAX es asíncrono. Es decir, la función traerdatos() llama a funciones AJAX, que son asincronas y van a su ritmo; y seguidamente sigue con el resto de tu página (el alert en este caso) sin esperar a que las llamadas ajax terminen.

Si quieres ejecutar un código cuando se cargue AJAX, introducelo en codigo.js:

Código Javascript:

Ver original...
document.getElementById(id_contenedor).innerHTML = resp
llamada_a_otras_funciones();
alert('prueba');
cualquier_otra_cosa();
...
}}

Recuerda siempre eso, que AJAX es asíncrono, independiente del resto de la página.

MasQueUnIntento · #3 (**permalink**) 07/01/2011, 07:06

Hola perryjr! Gracias!
Despues de tu respuesta pase todo el codigo javascript al .js
Te cuento luego cuales fueron los resultados.. Saludos!