Superposicion de variables

salbatore · #1 (**permalink**) 08/07/2010, 18:40

Hola amigos,

Estoy haciendo un sistema de administracion algo simple, pero que tiene batante ajax, aunque mi problema no es con el ajax, pues va bien... tengo un problema algo bastante serio, o por lo menos creo yo con las variables, jojojo.

Mirar se suelen hacer un monton de peticiones ajax y como sabeis estas peticiones necesitan tiempo para ejecutarse, cargador y toda la pesca.

El caso es la funcion con la que hago la peticion incluye tambien el lugar donde quiero mostrar los resultados. Es decir:

Código Javascript:

Ver originalfunction enviar_form(lugar_para_imprimir_la_respuesta,variables)
   {
     //conexion... llamada... cargador...
   }

El caso es que cuando hago mas de una peticion ajax la variable "lugar_para_imprimir_la_respuesta" se mezclan, es decir, se conserva la ultima variable "lugar_para_imprimir_la_respuesta" que se envio a la funcion y, por lo tanto cuando terminan las peticiones se imprimen todas en el mismo lugar.

¿Existe alguna solucion, se os ocurre algo elegante?

caricatos · #2 (**permalink**) 08/07/2010, 19:24

Hola:

Entre las posibilidades elegantes que se me ocurren, una segura es enviar estre los parámetros de la consulta, el id donde poner esa respuesta, y a la vez devolver ese id en la petición... con el formato xml es facilísimo

<listado respuesta="respuesta" >

... y luego con getElementsByTagName("listado")[0].getAttribute("respuesta")

tienes el tag donde irá esa respuesta.

Saludos

Panino5001 · #3 (**permalink**) 08/07/2010, 20:06

Ýo lo que creo que está sucediendo es algo como esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&#237;tulo</title>
<script>
onload=function(){
    var f=document.createDocumentFragment();
    for(var i=0;i<5;i++){
        var d=document.createElement('div');
        d.appendChild(document.createTextNode('test'+i));
        d.style.cursor='pointer';
        d.onclick=function(){alert(i);}
        f.appendChild(d);
    }
    document.body.appendChild(f);
}
</script>
</head>

<body>
</body>
</html>

Observarás que al hacer click sobre los elementos siempre aparece el mismo número en el alert.
Si es eso, se soluciona envolviendo la asignación del evento en una función anónima y ejecutándola dentro del bucle:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&#237;tulo</title>
<script>
/*onload=function(){
    var f=document.createDocumentFragment();
    for(var i=0;i<5;i++){
        var d=document.createElement('div');
        d.appendChild(document.createTextNode('test'+i));
        d.style.cursor='pointer';
        d.onclick=function(){alert(i);}
        f.appendChild(d);
    }
    document.body.appendChild(f);
}*/
onload=function(){
    var f=document.createDocumentFragment();
    for(var i=0;i<5;i++){
        var d=document.createElement('div');
        d.appendChild(document.createTextNode('test'+i));
        d.style.cursor='pointer';
        (function(i){
            d.onclick=function(){alert(i);}})(i);
        f.appendChild(d);
    }
    document.body.appendChild(f);
}
</script>
</head>

<body>
</body>
</html>

salbatore · #4 (**permalink**) 09/07/2010, 21:03

Hola caricatos y Panino5001,

Este problema me ha traido algo de dolor de cabeza, pues siempre suelo tener problemas con el codigo, pero siempre encuentro una solucion esquivando el problema, supongo que no es lo mas elegante del mundo pero algunas veces sino nunca terminas, jojo.

La cuestiones que si en una web que se envian muchas consultas ajax no esta controlado el tema mal andaba, jojo... he estado leyendo las respuestas.

Y tiene razon Panino5001, tal vez sabia mejor lo que me pasaba que yo mismo, el caso es que del modo en caricatos me dice hacerlo esta bien para enviar variables y luego recibirlas, aunque no me gusta duplicar informacion que ya tengo, pero bueno... era una forma, el problema era que el la funcion "ajax" dejaba de recibir, ya que se superponia la ultima llamada.

Nunca me habia ocurrido, pero el caso que al hacer varias llamadas exacatamente seguidas pues se superponia toda la funcion.

El caso es que con el codigo de Panino5001 creo que voy a solucionar el problema, que bien... ya me estaba viendo haciendo superllamadas con un monton de informacion para no tener que llamar 4 veces, jojo.

Bueno... muchisimas gracias a los dos!

Un saludo!

salbatore · #5 (**permalink**) 09/07/2010, 21:54

Hola de nuevo,

He intentado el modo de Panino5001, pero no se muy bien como implementarlo en mi codigo, mirar os pongo como hago las peticiones ajax:

Hago las peticiones:

Código Javascript:

Ver original_envio('/menu','lugar_menu',variables);
_envio('/panel','lugar_panel',variables);

(He resumido todo lo necesario las funciones:):

Código Javascript:

Ver originalfunction _envio(url,lugar,variables)
    {
        //podemos?
        req=_activo();
        if(req)
            {
                //enviamos a enviar:
                    req.onreadystatechange = function() { _cargador(lugar); }; // aca cambie
                //metodo:
                    req.open("POST",url,true);
                    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
                    req.send(variables);
            }
    }

Código Javascript:

Ver originalfunction _cargador(lugar)
    {
        if(req.readyState == 4)
            {
                if(req.status == 200)
                    {
                        alert('en: '+lugar+' - ponemos lo recibido: '+req.responseText);
                    }
            }       
    }

El problema no es que no funcione la peticion, con el FIREBUG veo que se envian las variables a sus determinadas direcciones, el problema es que la funcion "_cargador" no parece que reciba dos veces la peticion, sino que solo la ultima, pues cuando finalizan el recibo de los datos solo recibo 'lugar_panel' cuando deberia recibir dos alertas:

1- 'menu_panel'

2 - 'lugar_panel'

Debeis saber que hablamos de muy poco tiempo, pues se ejecutan al mismo tiempo y practicamente se reciben al mismo tiempo si no es a la vez.

¿Cual es el problema?... sino se entiende el problema decirme, pues creo que esta es la funcion mas importante en todo mi js.

Panino5001 · #6 (**permalink**) 09/07/2010, 22:18

El problema que tenés es diferente del que yo mencionaba. Tu problema es el siguiente:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin título</title>

<script>

onload=function(){

    document.getElementById('pp').onclick=function(){alert('uno');}

    document.getElementById('pp').onclick=function(){alert('dos');}

}

</script>

</head>

 
<body>

<div id="pp">test</div>

</body>

</html>

Como verás, sólo se ejecuta la última acción asignada (es el problema de no usar eventListeners).
Lo más sencillo en tu caso sería no usar una misma instancia del objeto AJAX sino una instancia diferente para cada petición (req=new AJAX() antes de cada petición)

salbatore · #7 (**permalink**) 09/07/2010, 23:03

He probado lo que me comentas, pero no dio resultado y viendo lo que me comentas tal vez no me este explicando correctamente. Todo esto viene de haberse logeado, cuando el usuario se autentifica una funcion llama al "menu" y a su "panel".

Para ello ejecuta esta funcion:

Código Javascript:

Ver originalfunction _datos_de_usuario()
    {
            _envio('/menu','lugar_menu',variables);
            _envio('/panel','lugar_panel',variables);
    }

Cuando he visto req=new AJAX()... ayba!... seguro que es eso... pero lo he probado y aun la funcion _cargador solo identifica una sola peticion.

La verdad es que me parece raro... pensaba que las funciones _cargador eran como un bucle.

Panino5001 · #8 (**permalink**) 09/07/2010, 23:32

Habría que ver todo el código y principalmente qué hace _activo(). req no parece ser una variable local sino global y lo más probable es que siempre estés modificando el mismo objeto req y entonces, si siempre es el mismo objeto, terminás haciendo lo mismo que en el ejemplo que te puse antes en el post #6

salbatore · #9 (**permalink**) 09/07/2010, 23:41

Habia pensado en eso... por eso he probado con introducir el mismo codigo de la funcon _activo dentro de la misma funcion _enviar:

Código Javascript:

Ver originalfunction _envio(url,lugar,variables)
    {
    XMLHTTP=false;
    if(window.XMLHttpRequest)
        {
            req= XMLHttpRequest();
        }
    else if(window.ActiveXObject)
        {
            req= ActiveXObject("Microsoft.XMLHTTP");
        }
    if(req)
        {
            //envio...

He buscado si la variable req se menciona en todo mi codigo y no es asi, asi que la variable no es global... que mala pinta.

¿Tu sueles hacer varias consultas a la vez?... es que segun creo leer por google algunos crean variables diferentes para cada peticion, en plan: req1, req2, req3...

Panino5001 · #10 (**permalink**) 09/07/2010, 23:48

Que no se repita no significa que no sea global (todas las variables que no hayas precedido con var dentro de una función serán globales a partir de la primera vez que ejecutes la función ).
Probá modificando esto:

Código PHP:

   req=_activo();

por

Código PHP:

  var req=new _activo();

salbatore · #11 (**permalink**) 10/07/2010, 00:01

He probado el cambio que dices, pero no dio resultado. Lo unico que veo que cambia es que solo ejecuta la primera peticion y el resto no.

Voy a probar a usar un nueva variable con distinto nombre en cada peticion... te digo.

salbatore · #12 (**permalink**) 10/07/2010, 00:06

Definitivamente tienes razon, es problema de usar siempre el mismo req, pues he probado a usar dos funciones _envio y _envio2 y sucedia el mismo problema hasta que he cambiado en la funcion _envio2 todos los req por req2.

Voy ha buscar por google si existe algun modo de solucionar esto de un modo elegante, pues tener dos funciones con distinto nombre y variables es un chungo, jojojo.

salbatore · #13 (**permalink**) 10/07/2010, 00:12

Pues aqui estoy de nuevo... este problema me parecio javascript puro y a desembocado en puro ajax, jojo... que paquete soy.

Bueno... he encontrado un post aqui mismo que habla largo y tendido sobre el tema:

http://www.forosdelweb.com/f77/petic...taneas-366659/

Voy a leer... aunque creo que ofrencen una solucion... la voy a probar... os cuento!.

salbatore · #14 (**permalink**) 10/07/2010, 00:24

He estado mirando el tema que sugiero en el post anterior... he probado las formas que sugieren... pero no obtengo ningun exito... jojo.

Sin duda te quedas con el concepto de que hay que crear una lista con todas las variables creadas... pero no se como hacerlo.

Tambien he encontrado este tema http://www.forosdelweb.com/f77/ejecu...s-ajax-426591/ , el cual hace lo que he comentado antes de crear dos funciones con nombres diferentes en las variables.... pero es un poco chapucero... estaria bien hacerlo con la lista array con las variables que se crean.

A ver si lo consigo...

Panino5001 · #15 (**permalink**) 10/07/2010, 00:48

No necesitás nada de eso, sólo trabajar prolijamente. Un ejemplo:

Código PHP:

  <?php if(isset($_POST['test']))die($_POST['test']); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin título</title>

<script>

function http(){

    if(typeof window.XMLHttpRequest!='undefined'){

        return new XMLHttpRequest();    

    }else{

        try{

            return new ActiveXObject('Microsoft.XMLHTTP');

        }catch(e){

            alert('Su navegador no soporta AJAX');

            return false;

        }    

    }    

}

 
function request(url,callback,params){

    var H=new http();

    if(!H)return;

    H.open('post',url+'?'+Math.random(),true);

    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    H.onreadystatechange=function(){

        if(H.readyState==4){

            callback(H.responseText);

            H.onreadystatechange=function(){}

            H.abort();

            H=null;

        }

    }

    var p='';

    for(var i in params){

        p+='&'+i+'='+escape(params[i]);    

    }

    H.send(p);

}

function c(v,id){

    document.getElementById(id).innerHTML=v;

}

onload=function(){

    request('<?php echo basename($_SERVER['PHP_SELF']) ?>',function(v){c(v,'d1');},{'test':'valor 1'});

    request('<?php echo basename($_SERVER['PHP_SELF']) ?>',function(v){c(v,'d2');},{'test':'valor 2'});

    request('<?php echo basename($_SERVER['PHP_SELF']) ?>',function(v){c(v,'d3');},{'test':'valor 3'});

    request('<?php echo basename($_SERVER['PHP_SELF']) ?>',function(v){c(v,'d4');},{'test':'valor 4'});

    request('<?php echo basename($_SERVER['PHP_SELF']) ?>',function(v){c(v,'d5');},{'test':'valor 5'});

}

</script>

</head>

 
<body>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

<div id="d4"></div>

<div id="d5"></div>

</body>

</html>

salbatore · #16 (**permalink**) 10/07/2010, 03:03

Buff... no te haces idea la de cosas que he buscado en google viendo tu codigo, jojo... pero algunas no me han quedado muy claro, por ejemplo:

¿Cual es la razon para poner entre {} 'test':'valor 1'?

Código Javascript:

Ver originalrequest('<?php echo basename($_SERVER['PHP_SELF']) ?>',function(v){c(v,'d1');},{'test':'valor 1'});

salbatore · #17 (**permalink**) 10/07/2010, 03:25

Hola Panino5001,

Que bien!... ya he conseguido integrar tu funcion en mi codigo y va de fabula!, jojo... pero lo que no entiendo realmente es la razon!, jojo... es decir...

¿La diferencia de tu funcion con la que yo usaba es que el cargador se encuentra dentro de la misma funcion y que las variables no salen de ella?

Oye!!... muchas gracias!

Panino5001 · #18 (**permalink**) 10/07/2010, 14:44

Justamente con trabajar prolijamente me refería a evitar el uso de variables globales. Y es fundamental que prestes mucha atención a eso que te mencioné: si a una variable dentro de una función no le colocás var, no bien ejecutes esa función 1 vez, esa variable será global aún cuando eso no sea tu intención (es así como funciona javascript), y eso muy probablemente en algún momento te generará un conflicto.

salbatore · #19 (**permalink**) 10/07/2010, 17:00

Ok!... leccion aprendida!