Recargar DIV con ajax

[email protected] · #1 (**permalink**) 10/11/2010, 12:18

Originalmente tengo un programa que me genera un html a partir de datos de Archivos planos.

Código HTML:

<!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=utf-8" />
<title>Pagina Principal de Compras</title>
<script>
 function nuevoAjax()
 {  
    var xmlhttp=false;  
    try {  
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch (e) {  
    try {  
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } catch (E) {  
    xmlhttp = false;  
    }  
    }  
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {  
    xmlhttp = new XMLHttpRequest();
    }  
    return xmlhttp;
 }

 function procesar_formulario(url, formid)
 {
    var Formulario=document.getElementById(formid);
    var longitudFormulario=Formulario.elements.length;
    var cadenaFormulario="";
    var sepCampos;
    sepCampos = "";
    for(var i=0; i <= Formulario.elements.length-1;i++)
    {
       cadenaFormulario+= sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
       sepCampos="&";
    }
    alert(cadenaFormulario);
    ajax=nuevoAjax();
    //usamos el metodo Post - Archivo que realiza la actualizacion 
    ajax.open("post","../../cgi-bin/grabmodest.sh",true);
    ajax.setRequestHeader('Content-Type', 'aplication/x-www-form-urlencoded; charset=ISO-8859-1');
    ajax.send(cadenaFormulario);
    ajax.onreadystatechange=function(){
    if(ajax.readyState==4 && (ajax.status == 200 || window.location.href.indexOf ("http") == -1 || location.reload() ))
    {
        document.getElementById(mensaje).innerHTML = ajax.responseText;
    }
   }
 }
</script>
</head>

<body>
<table width=725px border=1 cellspacing=0 cellpadding=2>
 <div id="mensaje">
   <form id="form001">
    <tr>
     <td>4428170</td>
     <td>PRENSA EMBR."LUK"BAJA 1.5 75-DU-UNO-FIO.</td>
     <td>Cajas</td>
     <td><input name="unicaj" type="text" value="5" size="5" maxlength="5"></td>
     <td>50</td>
     <td>50</td>
     <td>
      <select name="estante" id="estante" onChange="procesar_formulario('alerta.php','form001');">
       <option value=0 selected>UBICACION</option>
       <option value=X41X>X41X</option>
      </select>
     </td>
     <td><!-- Si estado = 0 muestro imagen1 o estado = 1 muestro imagen2 -->
        <img src='img/imagen1.gif' alt='Sin Estanteria'>
     </td>
     <td><img src='img/camara.gif' border='0'></td>
    </tr> 
       <input type="hidden" name="estado"   value="0"> <!-- indica que no tiene estanteria por ende imagen es imagen1.gif -->
       <input type="hidden" name="codigo"   value="4428170">
       <input type="hidden" name="cantidad" value="000050">
       <input type="hidden" name="tipo"     value="NP">
       <input type="hidden" name="numero"   value="00002548">
       <input type="hidden" name="local"    value="09">
       <input type="hidden" name="wrecep"   value="1">
       <input type="hidden" name="prefix"   value="@queule:/indra/dat">
       <input type="hidden" name="servidor" value="queule">
       <input type="hidden" name="empre"    value="I">
       <input type="hidden" name="logname"  value="gherrera">
   </form>
 </div>
 <div id="mensaje">
   <form id="form002">
    <tr>
     <td>4428170</td>
     <td>PRENSA EMBR."LUK"BAJA 1.5 75-DU-UNO-FIO.</td>
     <td>Cajas</td>
     <td><input name="unicaj" type="text" value="5" size="5" maxlength="5"></td>
     <td>50</td>
     <td>50</td>
     <td>
      <select name="estante" id="estante" onChange="procesar_formulario('alerta.php','form002');">
       <option value=0 selected>UBICACION</option>
       <option value=X41X>X41X</option>
      </select>
     </td>
     <td><!-- Si estado = 0 muestro imagen1 o estado = 1 muestro imagen2 -->
        <img src='img/imagen1.gif' alt='Sin Estanteria'>
     </td>
     <td><img src='img/camara.gif' border='0'></td>
    </tr> 
       <input type="hidden" name="estado"   value="0"> <!-- indica que no tiene estanteria por ende imagen es imagen1.gif -->
       <input type="hidden" name="codigo"   value="4428170">
       <input type="hidden" name="cantidad" value="000050">
       <input type="hidden" name="tipo"     value="NP">
       <input type="hidden" name="numero"   value="00002548">
       <input type="hidden" name="local"    value="09">
       <input type="hidden" name="wrecep"   value="1">
       <input type="hidden" name="prefix"   value="@queule:/indra/dat">
       <input type="hidden" name="servidor" value="queule">
       <input type="hidden" name="empre"    value="I">
       <input type="hidden" name="logname"  value="gherrera">
   </form>
 </div>
 <div id="mensaje">
   <form id="form003">
    <tr>
     <td>4428170</td>
     <td>PRENSA EMBR."LUK"BAJA 1.5 75-DU-UNO-FIO.</td>
     <td>Cajas</td>
     <td><input name="unicaj" type="text" value="5" size="5" maxlength="5"></td>
     <td>50</td>
     <td>50</td>
     <td>
      <select name="estante" id="estante" onChange="procesar_formulario('alerta.php','form003');">
       <option value=0 selected>UBICACION</option>
       <option value=X41X>X41X</option>
      </select>
     </td>
     <td><!-- Si estado = 0 muestro imagen1 o estado = 1 muestro imagen2 -->
        <img src='img/imagen1.gif' alt='Sin Estanteria'>
     </td>
     <td><img src='img/camara.gif' border='0'></td>
    </tr> 
       <input type="hidden" name="estado"   value="0"> <!-- indica que no tiene estanteria por ende imagen es imagen1.gif -->
       <input type="hidden" name="codigo"   value="4428170">
       <input type="hidden" name="cantidad" value="000050">
       <input type="hidden" name="tipo"     value="NP">
       <input type="hidden" name="numero"   value="00002548">
       <input type="hidden" name="local"    value="09">
       <input type="hidden" name="wrecep"   value="1">
       <input type="hidden" name="prefix"   value="@queule:/indra/dat">
       <input type="hidden" name="servidor" value="queule">
       <input type="hidden" name="empre"    value="I">
       <input type="hidden" name="logname"  value="gherrera">
   </form>
 </div>
</table>
</body>
</html>

Existe un <FORM> Por cada linea de datos, a cada linea debo asignarle una estanteria (estante) mediante el evento Onchange.
Los datos son capturados correctamente alert(cadenaFormulario).
Los datos son enviados via CGI a programa que me realiza las actualizaciones.
(cambiando la imagen1 x la imagen2); pero al obtener el resultado del DIV aun me muestra la imagen1 a pesar que se actualizaron los datos correctamente.

Por esta razon agrege un location.reload() que me actualiza la pagina; pero no es lo que necesito porque el tiempo de actualizacion dependera de la cantidad de datos mostrados desde la pagina principal y si son 1000 los que debo mostrar el tiempo de recarga se elevara.

Tengo forma de mostrar solamente el DIV actuualizado, con la imagen correspondiente.

Espero darme a entender, de ante mano Gracias.

[email protected] · #2 (**permalink**) 11/11/2010, 07:30

No existe nadie que me oriente sobre el tema. Talvez no me explique correctamente.

chicohot20 · #3 (**permalink**) 11/11/2010, 10:34

Primero en tu codigo hay varios div con el mismo id="mensaje" eso esta mal el id es unico.
Segundo como controlas el estado?, es decir en que parte de tu codigo haces el cambio de imagenes? no lo veo.
Tercero, en esta parte: document.getElementById(mensaje).innerHTML = ajax.responseText; Buscas un elemento por id, id que debes estar almacenado en la variable mensaje, en que parte esta declarado la variable mensaje, no lo veo.

Podemos verlo online?, o adjunta imagenes.