Remarcar cambios al recargar contenido

neodani · #1 (**permalink**) 01/03/2010, 13:04

Buenas,

Tengo el siguiente código abro inciso ¿se puede de alguna manera más optima? cierro inciso

En este pequeño ejemplo muestro el contenido de una tabla dentro de un DIV llamado "tabla1", y cada 5 segundos recarga la tabla.

La tabla de ejemplo tiene una celda que es el precio esta es la zona que puede variar. Mi intención es marcar de alguna forma cuando el precio baje o suba.

La pregunta... creéis que esto lo debo hacer en el propio código donde se crea la tabla (datos_ajax.php) o en el script principal que llama a la función ajax (script.php)?

La siguiente sería, cómo implementarlo, alguna idea?

La tabla se generaría de forma automática leyendo los datos de la base de datos, tendría que hacer un script que cada 5 segundos me generase el fichero datos_ajax.php verdad?
Pero si tuviese que tener 200 tablas de precios, tendría que cada 5 segundos generar los 200 ficheros uno para cada tabla distinta? ¿se hace así en la realidad? o me estoy flipando... xD me parece muy heavy!

Muchas gracias de antemano!

datos_ajax.php

Código HTML:

Ver original<table border="1">
<tbody>
<tr>
    <th>Producto</th>
    <th>Precio</th>
</tr>
<tr>
    <td>Manteca</td>
    <td>4.00</td>
</tr>
<tr>
    <td>Leche</td>
    <td>2.50</td>
</tr>
</tbody>
</table>

script.php

Código PHP:

Ver original<html>
  <head>
  <title>Obteniendo datos con AJAX sin recargar pagina</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="javascript"  type="text/javascript">
var RequestObject = false; 
  var Archivo = 'datos_ajax.php'; //directorio donde tenemos el archivo ajax.php 
  window.setInterval("actualizacion_reloj()", 5000); // el tiempo X que tardará en actualizarse 
  if (window.XMLHttpRequest) // 
RequestObject = new XMLHttpRequest();
if (window.ActiveXObject)   
  RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function ReqChange() {
// Si se ha recibido la información correctamente
  if (RequestObject.readyState==4) {
  // si la información es válida 
      if (RequestObject.responseText.indexOf('invalid') == -1) 
      { 
      // obtener la respuesta 
      var msgs = RequestObject.responseText.split('|');
      // Buscamos la div con id online 
      document.getElementById("tabla1").innerHTML = msgs[0];
      }
      else {
      // Por si hay algun error 
      document.getElementById("tabla1").innerHTML = "Error llamando";
      }
  }
}
function llamadaAjax() {
 // Mensaje a mostrar mientras se obtiene la información remota...
  //document.getElementById("tabla1").innerHTML = "";
  // Preparamos la obtención de datos 
  RequestObject.open("GET", Archivo , true);
  RequestObject.onreadystatechange = ReqChange;
  // Enviamos 
  RequestObject.send(null); 
  }
  function actualizacion_reloj() {
    llamadaAjax();
  }
</script>
<body onload="llamadaAjax();">
<h2>Obteniendo datos con AJAX sin recargar pagina </h2>
  <div id="tabla1"></div>
</body>
</html>

sloy · #2 (**permalink**) 01/03/2010, 13:49

Todavía soy principiante, pero a ver si te puedo ser algo de ayuda al menos.
Suponiendo que los productos sean estáticos, sólo varíe el precio. Personalmente, lo que yo haría sería asignarle un id a cada celda de la tabla que contiene el precio de un producto. Y por ajax, en vez de cargar tooda la tabla, obtener los datos en forma de arrays asociativos. Y luego con Javascript comparar el nuevo valor con el que está en la tabla. Si varía, lo modifica y resalta con algún efecto, y si no pues nada.
También usaría algún framework como jQuery, tanto para la parte de AJAX como para los efectos (el effecto highlight de jQuery sería ideal).

El tema de las 200 tablas, ya no sabría que decirte.

Perdona que no escriba algún código de ejemplo, pero no tengo demasiado tiempo.
A ver si alguien tiene alguna idea mejor.
Un saludo!

neodani · #3 (**permalink**) 01/03/2010, 15:09

Cita:

Iniciado por sloy

Suponiendo que los productos sean estáticos, sólo varíe el precio. Personalmente, lo que yo haría sería asignarle un id a cada celda de la tabla que contiene el precio de un producto. Y por ajax, en vez de cargar tooda la tabla, obtener los datos en forma de arrays asociativos.

Me parece una idea interesante, los id a cada celda deberían ser también dinamicos o estaticos? me refiero porque la tabla cambiará es dinamica pueden aparecer nuevas filas dependiendo de lo que devuelva la consulta SQL :S

Cita:

Iniciado por sloy

El tema de las 200 tablas, ya no sabría que decirte.

Perdona que no escriba algún código de ejemplo, pero no tengo demasiado tiempo.
A ver si alguien tiene alguna idea mejor.
Un saludo!

Yo tambien, sigo sin ver la forma optima de realizarlo a gran escala :P

Se aceptan opiniones!

Muchas gracias