Como no perder valor de parámetros pasados a funciones javascript

[jmsolerdenia]

Hola amigos,

estoy teniendo unos problemas programanado una función javascript, os pongo a continuación el código y os digo lo que me pasa.

function leerBD(p){

var url = "ajax.php";
var params = "p="+p;
var http = new XMLHttpRequest();
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
alert(p);
http.onreadystatechange = function() {//Call a function when the state changes.



if(http.readyState == 4 && http.status == 200) {

var registros=http.responseText;
alert(registros);
alert("arriba de if");


if(p==1){

alert("en if");
/*Declaraciones*/
var h3 = document.createElement("h3");
var h2 = document.createElement("h2");
var p = document.createElement("p");
var enlace = document.getElementById("enlacesub1");
p.innerHTML=registros;
var subbox = document.getElementById("subbox1");
subbox.appendChild(p);
h3.innerHTML = "Experimento 1";
enlace.parentNode.insertBefore(h3,enlace); //insertamos antes del enlace
enlace.parentNode.inserteBefore(p,enlace);
}

}
http.send(params);
}
}

Entonces, el problema está en que se pierde el valor de la variable p cuando entra en

http.onreadystatechange = function()

. En mi código html le paso un 1, y el valor no se pierde hasta donde he dicho.
¿Por qué puede ser? ¿Qué puedo hacer?

Gracias!

[IsaBelM]

es un problema de scope (ámbito de variable)

[Jorge_sa]

El problema está en esta linea

Código:

var p = document.createElement("p");

En javascript no existe el ámbito de bloque y la variable p es local en toda la función onreadystatechange, aunque este declarada en un bloque después de usarla. Y por lo tanto oculta la variable p del ámbito superior.

Por ejemplo:

Código:

var p=1;

function f() {
    alert(p);             // p = undefined
    if (0) {
	var p;
    }
}

f();

[IsaBelM]

Iniciado por Jorge_sa

El problema está en esta linea

Código:

var p = document.createElement("p");

perdona que te corrija, pero el problema está aquí

if(p==1){

[jmsolerdenia]

Muchas gracias por sus contestaciones, pero cómo podría solucionar esto? porque dependiendo del valor de p hago una cosa u otra, y claro es valor necesito saberlo. Muchas gracias a todos :)

[jmsolerdenia]

el problema está solucionado, o eso parece. Parece ser que es por la razón que decía Jorge_sa ;).Gracias a los dos de nuevo

[jmsolerdenia]

Buenas de nuevo, ahora me ha surgido otro problema, os lo pongo a continuación. Como os he dicho antes, dependiendo del valor de p hago una cosa u otra, vale hasta ahí todo correcto. Lo que pasa es que ahora sólo me imprime una vez en el html dependiendo de p. Os pongo el código js y html para que lo veais.

function leerBD(p){
alert(p);
var url = "ajax.php";
var params = "p="+p;
var http = new XMLHttpRequest();
var h3;
var pr;
var enlace;
var subbox;
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.

if(http.readyState == 4 && http.status == 200) {
p2 = p;
alert("yejee"+p2);
var registros=http.responseText;
alert(registros);
alert("arriba de if");

alert(p);
if(p==1){

alert("en if");
/*Declaraciones*/
h3 = document.createElement("h3");
h2 = document.createElement("h2");
pr = document.createElement("p");
enlace = document.getElementById("enlacesub1");
pr.innerHTML=registros;
var subbox = document.getElementById("subbox1");
subbox.appendChild(pr);
h_3.innerHTML = "Experimento 1";
enlace.parentNode.insertBefore(h3,enlace); //insertamos antes del enlace


}//if

if(p==2){
alert("en if");
/*Declaraciones*/
h3 = document.createElement("h3");
h2 = document.createElement("h2");
pr = document.createElement("p");
enlace = document.getElementById("enlacesub2");
pr.innerHTML=registros;
subbox = document.getElementById("subbox2");
subbox.appendChild(pr);
h3.innerHTML = "Experimento 2";
enlace.parentNode.insertBefore(h3,enlace); //insertamos antes del enlace
}

}

}
http.send(params);
}

y el código html

<script>
leerBD(1);
leerBD(2);
</script>

entonces si p=1 me debería de imprimir en div concreto, si p=2 en otro, pero todo a la vez, el problema está en que sólo me imprime si p=2.

Muchas gracias

[WeSoRz]

Si sólo llamas a leerBD(1); te imprime en el div 1 o no te imprime nada? Si te imprime en el div 1, luego prueba con leerBD(2); únicamente, y por último llamando primero a leerBD(2) y luego leerBD(1) a ver si en ésta ocasión te imprime en el div1 únicamente.

[jmsolerdenia]

Iniciado por WeSoRz

Si sólo llamas a leerBD(1); te imprime en el div 1 o no te imprime nada?

Me imprime bien.

Iniciado por WeSoRz

Si te imprime en el div 1, luego prueba con leerBD(2)únicamente,

Me imprime bien, es decir en el div que corresponde

Iniciado por WeSoRz

y por último llamando primero a leerBD(2) y luego leerBD(1) a ver si en ésta ocasión te imprime en el div1 únicamente.

sólo me imprime en el div1, es decir se machaca lo del div 2

¿Ves el error?

Muchas gracias

[WeSoRz]

Pues parece que el error es que no puedes hacer dos peticiones tan seguidas. Prueba ahora a meter en un botón en el evento onclick por ejemplo el leerBD(2); a ver si primero carga automáticamente el 1 y luego al darle al 2 carga el 2 xD

Ahora mismo no sabría decirte si hay alguna forma de poner en "cola" sin "machacar" peticiones... a ver si alguien puede comentar su experiencia al respecto, de mientras voy a ver si encuentro algo.

[jmsolerdenia]

la primera solución que me propones creo que iría pero no es lo que busco, estoy pensando en traer todos los datos a lo burro en texto y descomponerlos, es que otra solución no se me ocurre.

Gracias de nuevo ;)

[WeSoRz]

No era una solución, era para comprobar lo que te comentaba jeje

He estado ojeando y el problema está en la sincronía/asincronía del Ajax. Por defecto las peticiones se hacen asíncronas, por lo que se van machacando unas a otras sin esperar a que termine, de ahí que únicamente se muestre la última.

Para solucionar el problema lo que hay que hacer son peticiones síncronas, lo cual se consigue modificando la siguiente línea:

Código Javascript:

http.open("POST", url, false);
 

(true por false)

Haciendo éste cambio podemos omitir la parte de comprobación de respuesta:

Código Javascript:

http.onreadystatechange = function() {//Call a function when the state changes.
 
if(http.readyState == 4 && http.status == 200) {
 

Ésto es debido a que el JS no se continuará ejecutando hasta que no haya respuesta de servidor, asi que evidentemente no necesitarías un callback a una función cuando recibas respuesta.

[jmsolerdenia]

Iniciado por WeSoRz

No era una solución, era para comprobar lo que te comentaba jeje

He estado ojeando y el problema está en la sincronía/asincronía del Ajax. Por defecto las peticiones se hacen asíncronas, por lo que se van machacando unas a otras sin esperar a que termine, de ahí que únicamente se muestre la última.

Para solucionar el problema lo que hay que hacer son peticiones síncronas, lo cual se consigue modificando la siguiente línea:

Código Javascript:

http.open("POST", url, false);
 

(true por false)

Haciendo éste cambio podemos omitir la parte de comprobación de respuesta:

Código Javascript:

http.onreadystatechange = function() {//Call a function when the state changes.
 
if(http.readyState == 4 && http.status == 200) {
 

Ésto es debido a que el JS no se continuará ejecutando hasta que no haya respuesta de servidor, asi que evidentemente no necesitarías un callback a una función cuando recibas respuesta.

Muchas gracias por todo ;)

[WeSoRz]

De nada, espero que te haya servido de ayuda :)