Recargar colunna de una Tabla sin refrescar la pagina web.

lluvplay · 25 Junio 2012, 14:13 PM

Hola buenos dias respetados expertos !!
Hoy en dia me he levanto con otro problema esta ves en el desarrollo web.
Lo que yo quiero es pasar el valor calculado en mi funcion javascript a mi index.hmtl sin necesidad de recagar la pagina !!
En concreto muchos le dicen AJAX !! nose si mi concepto esta errado pero en realidad ajax trabaja asiendo peticiones del servidor yo simplente quiero hacer peticiones del cliente !!! en concreto. mi codigo es el siguiente.

Código (html4strict) [Seleccionar]

<html>
<head>
<title>Mercado Virtual</title>
<script type="text/javascript" src="codigo/programa.js"></script>
</head>
<body>
<div id="todo">
<header><h1>Mercado Virtual</h1></header>
<section>
<article>
<table border="2">
<tr>

	<td>
	<img src="frutas/naranja.jpg" onclick="calculando('naranja')"/>
	</td>
	<td>
	<img src="frutas/mango.jpg" onclick="calculando('mango')"/>
	</td>
	<td>
	<img src="frutas/papaya.jpg" onclick="calculando('papaya')"/>
	</td>
	<td>
	<img src="frutas/guineo.jpg" onclick="calculando('guineo')"/>
	</td>
	<td>
	<img src="frutas/limon.jpg" onclick="calculando('limon')"/>
	</td>
</tr>
<tr>
	<td>
	<img src="frutas/yuca.jpg" onclick="calculando('yuca')"/>
	</td>
	<td>
	<img src="frutas/ñame.jpg" onclick="calculando('name')"/>
	</td>
	<td>
	<img src="frutas/lechuga.jpg" onclick="calculando('lechuga')"/>
	</td>
	<td>
	<img src="frutas/zanahoria.jpg" onclick="calculando('zanahoria')"/>
	</td>
	<td>
	<img src="frutas/otoe.jpg" onclick="calculando('otoe')"/>
	</td>
</tr>
<table>
<table id="segunda" border="2">
<tr>
	<td>
	Producto
	</td>
	<td>
	Precio
	</td>
	<td>
	Cantidad
	</td>
</tr>
<tr>
	<td>
	Naranja
	</td>
	<td>
	0.35
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Mango
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Papaya
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Guineo
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Limon	
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Yuca	
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Ñame
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Lechuga	
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
<tr>
	<td>
	Zanahoria
	</td>
	<td>
	0.55
	</td>
	<td>
	<label id="zona"></label>
	</td>
</tr>
<tr>
	<td>
	otoe	
	</td>
	<td>
	0.55
	</td>
	<td>
	
	</td>
</tr>
</table>
</article>
</section>
</div>
</body>
</html>

Código (javascript) [Seleccionar]

// productos de la primera colunna
var naranja=0;
var mango=0;
var limon=0;
var guineo=0;
var papaya=0;
// productos de la segunda colunna
var yuca=0;
var zanahoria=0;
var name=0;
var lechuga=0;
var otoe=0;
function calculando(n)
{


// comensamos a contar cuantas veces selecciona el producto el cliente.
if(n=='naranja')
naranja+=1;

if(n=='mango')
mango+=1;

if(n=='limon')
limon+=1;

if(n=='papaya')
papaya+=1;

if(n=='guineo')
guineo+=1;

if(n=='yuca')
yuca+=1;

if(n=='zanahoria')
zanahoria=1;

if(n=='lechuga')
lechuga+=1;

if(n=='otoe')
otoe+=1;

if(n=='name')
name+=1;
}
document.getElementById('zona').innerHTML=naranja;

ley mucho como siempre antes de postear para que no me digan que san google tiene la respuesta.

bueno y lo que encontre fue lo siguiente:

Código (javascript) [Seleccionar]

document.getElementById('zona').innerHTML=naranja;

donde 'zona' es el ID del label que aparece en la segunda tabla de mi html y el metodo document.getElementById me permitira hacer lo que yo estoy buscando pero no es asi. si alguien tiene una idea que me pueda ayudar se lo boy agradecer de por vida.

WarGhost · 25 Junio 2012, 14:30 PM

getElementById lo único que hace es obtener el identificador de un elemento en el DOM, luego con innerHTML estas modificar el HTML que tiene encapsulado ese elemento. Realmente no estas conectándote al servidor en ningún sitio, todo lo estas ejecutando en el cliente, no necesitas conectarte el servidor.
Lo que debes hacer es actualizar el div según los eventos onclick en las diferentes imágenes y todo eso se hace en el cliente.

Te recomiendo que utilices debug que tiene el firebug, si verifiques cual es el error que tienes.

Por otro lado, si lo que quieres es hacer peticiones desde el servidor al cliente, deberás mantener una conexión abierta entre el cliente y el servidor web, para esto puedes usar comet.

Un saludo.

Spider-Net · 25 Junio 2012, 14:38 PM

Tu error está en que has dejado la sentencia que escribe el valor dentro de tu label "zona" fuera de la función, por lo que nunca se ejecuta xD.

Ponlo así:

Código (javascript) [Seleccionar]

// productos de la primera colunna
var naranja=0;
var mango=0;
var limon=0;
var guineo=0;
var papaya=0;
// productos de la segunda colunna
var yuca=0;
var zanahoria=0;
var name=0;
var lechuga=0;
var otoe=0;

function calculando(n)
{
// comensamos a contar cuantas veces selecciona el producto el cliente.
if(n=='naranja')
naranja+=1;
 
if(n=='mango')
mango+=1;
 
if(n=='limon')
limon+=1;
 
if(n=='papaya')
papaya+=1;
 
if(n=='guineo')
guineo+=1;
 
if(n=='yuca')
yuca+=1;
 
if(n=='zanahoria')
zanahoria=1;
 
if(n=='lechuga')
lechuga+=1;
 
if(n=='otoe')
otoe+=1;
 
if(n=='name')
name+=1;

document.getElementById('zona').innerHTML=naranja;
}

lluvplay · 25 Junio 2012, 15:03 PM

Gracias solucionado !!!

Test Foro de elhacker.net SMF 2.1

Recargar colunna de una Tabla sin refrescar la pagina web.

lluvplay

WarGhost

Spider-Net

lluvplay