Insertar condigo PHP en Javascript en la funcion document.getElementById

[pablokru]

Hola,

Estoy intentando insertar una variable php en javascript de esta forma, pero algo debe estar mal ya que no logro actualizar el contenido del div. Ven algun error?

Codigo HTML + PHP:

<div id="<?php echo'resultado'.$i;?>" style="width: 10px">

Codigo Javascript:


<script>
.
.
.
document.getElementById("<?php echo'resultado'.$i;?>").style.width = '20px';
</script>

Gracias!

[caricatos]

Hola:

Lo que puede actualizarse depende de los eventos, por ejemplo con un click del ratón... si no indicas como hacer esa modificación programando algún evento, no conseguirás nada.

Saludos

[pablokru]

Hola, amplio el ejemplo asi se entiende:

Código PHP:

  <?php 
$i=1 
while ( $i <= 100) { 
?> 
<div id="<?php echo'resultado'.$i;?>" style="width: 10px"><p>Hola</p></div>  

Código:

<script>
var xhr;
function ajax<?=$i?>(){

var pos= <?php echo $i;?>;
    
xhr.open("GET","modificar.php?pos="+pos);
	
	xhr.onreadystatechange=callback; 
	xhr.send();
}
function callback(){
	if(xhr.readyState==4){
		if(xhr.status==200){

document.getElementById("<?php echo'resultado'.$i;?>").style.width = '10px';
		}
	}
}
</script>

Código PHP:

  <?php 
$i++; 
} 
?>   

Si yo en document.getElementById escribo entre parentesis resultado1 o resultado2 o resultado97 funciona. El problema es que no funciona cuando coloco ("<?php echo'resultado'.$i;?>")

[chwc]

para que nescesitas crear 100 funciones ???
por ejemplo haz la función ajax, y agregale una entrada, como

Código Javascript:

function ajax(id){}
 

y despues lo cambias asi en la funcion

Código Javascript:

document.getElementById("resultado"+id).style.width = '10px';
 

y entonces para cambiar el que es id 1, haces la funcion ajax(1)

[pablokru]

Hola,

No entiendo en tu respuesta como hacer por ejemplo que me llame al id 1?

Yo en la pagina tengo 100 registros para los cuales si por ejemplo quiero modificar el registro 57 no quiero que se me recargue toda la pagina. Con la funcion onclick llamo al ajax57 porque para esa instancia del while el $i sera 57.

Lo que me falta es que ajax me modifique el div con el id resultado57, por ejemplo para este caso.

Espero se entienda. Muchas gracias!

Código PHP:

  <?php  
$i=1  
while ( $i <= 100) {  
?>  
<div id="<?php echo'resultado'.$i;?>" style="width: 10px"><p>Hola</p></div> 
<li onclick="ajax<?=$i?>();"><a class="one-star">1</a></li>  

Código:

<script>
var xhr;
function ajax<?=$i?>(){

var pos= <?php echo $i;?>;
    
xhr.open("GET","modificar.php?pos="+pos);
	
	xhr.onreadystatechange=callback; 
	xhr.send();
}
function callback(){
	if(xhr.readyState==4){
		if(xhr.status==200){

document.getElementById("<?php echo'resultado'.$i;?>").style.width = '10px';
		}
	}
}
</script>

Código PHP:

  <?php  
$i++;  
}  
?>   

[chwc]

mira, no hace falta haver 100 funciones en javascript para modificar cada campo, las funciones pueden tener variables de entrada, puede tener la variable de campo de entrada.

Código Javascript:

var xhr;
function ajax(pos){
    
xhr.open("GET","modificar.php?pos="+pos);
    
    xhr.onreadystatechange=callback; 
    xhr.send();
}
function callback(){
    if(xhr.readyState==4){
        if(xhr.status==200){
 
document.getElementById("resultado"+pos).style.width = '10px';
        }
    }
}
 

nescesitas tener solo esta funcion para los 100 campos SOLO ESTA
entonces en vez de hacer ajax66(), haces ajax(66)

y en el archivo php

Código PHP:

<?php  
$i=1  
while ( $i <= 100) {  
?>  
<div id="<?php echo'resultado'.$i;?>" style="width: 10px"><p>Hola</p></div> 
<li onclick="ajax(<?=$i?>);"><a class="one-star">1</a></li>
 

entiendes ? saludos

[pablokru]

Hola, hice tal cual me dices pero obtengo el siguiente error en la consola del firefox:

pos is not defined

Que es lo que me esta faltando?

Gracias!

[chwc]

modifica esto, no me di cuenta que no se pasaba correctamente la variable pos entre las funciones

Código Javascript:

var xhr;
function ajax(pos){
xhr.open("GET","modificar.php?pos="+pos);
xhr.onreadystatechange=callback(pos); 
xhr.send();
}
function callback(pos){
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("resultado"+pos).style.width = '10px';
}
}
}
 

si te sigue sin funcionar, hace una cosa, pone en la consola ajax(2), y fijate si si se ejecuta correctamente, si se logra, entonces debe ser un problema de que en el php, no se imprime <?=$i?>, entonces prueba reemplazandolo por <?php echo $i; ?>.

[pablokru]

Hola, ahora no tira ningun error, pero no me actualiza ni la base de datos, ni me modifica el div un width de 10px.

Probe con <?php echo $i; ?> pero tampoco funciona. No estara faltando algo mas en el codigo? Lo repaso pero no encuentro el error. =(

[chwc]

mira, proba con jquery, esto si me resulto ( lo probe en mi maquina)
inicio.php

Código HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
function ajax(entrada){
$.ajax({
url:"modificar.php?pos="+entrada,
type:"POST"
}).done(function() { 
document.getElementById("resultado"+entrada).style.width = '10px';
});
}
</script>
<?php
$i=1;
while ($i<= 100) {  ?>
<div id="<?php echo'resultado'.$i;?>"><p>Hola</p></div> 
<li onclick="ajax(<?php echo $i; ?>);"><a class="one-star">1</a></li>
<?php
$i++;
}
?>
 

y el archivo modificar.php tendria que existir por lo menos, pero lo que si que el ajax funciona.
si tenes problemas en modificar.php, pasa tu archivo

igual no te das cuenta la diferencia de width, podrias ponerle algo como .background = '#333333' para diferenciarlo mejor ;)

[pablokru]

Hola, gracias por tu respuesta, el ajax me funciono!...Lo que no me esta funcionando ahora es modificar.php al querer actualizar la base de datos. Tambien te consulto como seria, si quisiera pasar mas de una variable, o sea $i y $x por ejemplo?

Tengo inicio.php

Código PHP:

  <?php   
$i=1 
$x=3 
while ( $i <= 100) {   
?>   
<div id="<?php echo'resultado'.$i;?>" style="width: 10px"><p>Hola</p></div>  
<li onclick="ajax(<?=$i?>);"><a class="one-star">1</a></li> 
<?php 
$i++; 
$x++; 
?>   

Código HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
function ajax(entrada){
$.ajax({
url:"modificar.php?pos="+entrada,      //ACA TAMBIEN QUISIERA PASAR LA VARIABLE $X
type:"POST"
}).done(function() { 
document.getElementById("resultado"+entrada).style.width = '20px';
});
}
</script> 

modificar.php es asi:

Código PHP:

  <?php 
$link = mysql_connect("localhost","root",""); 
mysql_select_db("phpbd",$link); 
 
// Lleno las variables con los datos. 
$pos = $_POST['pos']; 
$equis = $_POST['eq']; 
 
mysql_query("INSERT INTO phpbd.notas (pos,equis) VALUES('$pos','$equis)"); 
     
?>   

[emprear]

modificar.php?pos="+entrada
x
modificar.php?pos="+entrada+"&otravar="+variable2

Si estás trabajando con un form, también podés hacer
$("form").serialize()
con lo cual los campos que tengan definido un name, se agregan a la query


Saludos

[pablokru]

Hola,

Y en

Código HTML:

<li onclick="ajax(<?=$i?>);"><a class="one-star">1</a></li> 

Como agrego la variable $x para que la pase al codigo jquery?

Modificar.php esta bien? porque me sigue sin actualziar la base de datos... =(

Gracias!

[pablokru]

Hola,

Ya lo resolvi,

Código HTML:

<li onclick="ajax(<?=$i?>,<?=$x?>);"><a class="one-star">1</a></li> 

Y en jquery:

Código HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
function ajax(entradai,entradax){
$.ajax({
url:"modificar.php?pos="+entradai+"&la_otra_var="entradax,
type:"POST"
}).done(function() { 
document.getElementById("resultado"+entradai).style.width = '10px';
});
}
</script> 

Gracias @chwc y @caricatos!!