Ayuda con Ajax.PeriodicalUpdater

andruxand · #1 (**permalink**) 17/03/2011, 09:51

Hola todos foreros, espero ande todo bien.... pues le comento mi duda.. resulta que estoy usando la libreria prototype para poder utilizar el metodo de Ajax.PeriodicalUpdater, para actualizar cada n segundos una pagina que se muestra en un div, hasta ahi todo correcto, tengo la pagina principal dos botno y un div, de estos dos botones cada uno llama a una pagina diferente para que se cargue e el div. el boton A llama la pagina A y el boton B la pagina B. el problema es que quiero usar el periodicalupdater para que actualize la pagina dependiendo de cual sea o mejor dicho llame a traves del boton, es por eso que hago un llamado a la funcion de periodicalupdater a traves del evento onclick del boton, en el llamdo de la funcion envio dos parametros 1. es la pagina a llmar para que cargue solo la pagina que se haya llamado con el boton y 2. y 2. el id del boton para poner el atributo onclic del otro boton como ' ', ta que igual se seguia ejecutando y me ocasionaba conflicto de cambiaban las paginas automaticamente. Aqui les dejo lo que tengo y espero me pueda guiar.

Código Javascript:

Ver original<script type="text/javascript" 
   src="../js/prototype.js">
   </script>
<script>
 
function timer(page, id)
{
   document.getElementById(id).onClick = '';
   new Ajax.PeriodicalUpdater('contenido', page, {
     method: 'get', frequency: 1, decay: 2
   });
 
}
</script>

Código HTML:

Ver original<body style="padding-top:1%;">
<div id="hero-slider" >
  <form name="form1"><table width="160" border="0" align="center">
    <tr>
      <td width="75" height="96">
<input type="button" id="boton1" class="boton2" onclick="timer('alertas.php', this.id)" name="Submit" value="" />
        <div class="Estilo3" style="position:relative; bottom:10%; width: 75px;">
          <div align="center">Radicacion</div>
      </div></td>
      <td width="75" height="96">
<input type="button" id="boton2" class="boton2" onclick="timer('alertas_com.php', this.id)" name="Submit2" value="" />
<div class="Estilo5" style="position:relative; bottom:10%; width:75" >
    <div align="center">Licencia</div>
  </div></td>
    </tr>
  </table></form>
  
  <div id="contenido" align="center" style="padding-top:2%">
<div id="precarga" align="center"></div>
  </div>
        <!-- .mask -->
</div> <!-- #hero-slider -->
</body>

De antemano muchas gracias por su atencion.

masterpuppet · #2 (**permalink**) 17/03/2011, 10:26

Que tal andruxand,

Por un lado, que bueno ver algo diferente de jQuery y por otro estas utilizando Prototype a medias, si son dos botones nada mas, podrias hacer algo asi(sustitui la funcion timer por lo que sigue y elimina los onclick de los elementos):

Código Javascript:

Ver originalvar updater = function(target, url, params) {
    return new Ajax.PeriodicalUpdater(target, url, params || {
        method: 'get', frequency: 1, decay: 2
    });
}
document.observe('dom:loaded', function() {      
    $('boton1').observe('click', function(e){                               
        e.stop();
        this.stopObserving('click');                            
        updater('contenido', 'alertas.php');                
    });             
    $('boton2').observe('click', function(e){                               
        e.stop();
        this.stopObserving('click');                            
        updater('contenido', 'alertas_com.php');                
    }); 
});

Saludos.

andruxand · #3 (**permalink**) 17/03/2011, 10:38

hola masterpuppet.

Antes que nada muchas gracias por tu respuesta; pues quería decirte que hice los pasos que me mencionaste anteriormente pero mira que no me funciona, no se que pueda ser, espero me guíes y disculpa mi ignorancia y de antemano muchas gracias nuevamente por tu ayuda

masterpuppet · #4 (**permalink**) 17/03/2011, 11:12

A ver vamos de nuevo, entre los tags head tenes que tener algo asi:

Código HTML:

Ver original<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript">
var updater = function(target, url, params) {
    return new Ajax.PeriodicalUpdater(target, url, params || {
        method: 'get', frequency: 1, decay: 2
    });
}
document.observe('dom:loaded', function() {      
    $('boton1').observe('click', function(e){                               
        e.stop();
        this.stopObserving('click');                            
        updater('contenido', 'alertas.php');                
    });             
    $('boton2').observe('click', function(e){                               
        e.stop();
        this.stopObserving('click');                            
        updater('contenido', 'alertas_com.php');                
    }); 
});
</script>

y el html deberia ser asi:

Código HTML:

Ver original<body style="padding-top:1%;">
<div id="hero-slider" >
  <form name="form1"><table width="160" border="0" align="center">
    <tr>
      <td width="75" height="96">
<input type="button" id="boton1" class="boton2" name="Submit" value="" />
        <div class="Estilo3" style="position:relative; bottom:10%; width: 75px;">
          <div align="center">Radicacion</div>
      </div></td>
      <td width="75" height="96">
<input type="button" id="boton2" class="boton2" name="Submit2" value="" />
<div class="Estilo5" style="position:relative; bottom:10%; width:75" >
    <div align="center">Licencia</div>
  </div></td>
    </tr>
  </table></form>
  
  <div id="contenido" align="center" style="padding-top:2%">
<div id="precarga" align="center"></div>
  </div>
        <!-- .mask -->
</div> <!-- #hero-slider -->
</body>

si te sigue sin funcionar, hace un alert en el click de los botones, para comprobar que se setearon correctamente los eventos, asi:

Código Javascript:

Ver original...
$('boton1').observe('click', function(e) {                               
    alert('__CLICKED__');
    e.stop();
    this.stopObserving('click');                            
    updater('contenido', 'alertas.php');                
});

bueno proba y nos comentas.

andruxand · #5 (**permalink**) 17/03/2011, 11:28

masterpuppet de nuevp gracias pero mira que sin resultados

.

realize la combprobacion para verificar que los eventos se setearon correctamente a traves del alerta al hacer clic en un boton y nada, no se que tendra esto

masterpuppet · #6 (**permalink**) 17/03/2011, 11:33

Mmmm raro, podes pegar el html completo generado ?

andruxand · #7 (**permalink**) 17/03/2011, 11:34

mira aqui esta:

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Create a Custom Content Slider with jQuery</title>
 
      <script type="text/javascript" src="../js/prototype.js"></script>
      <script type="text/javascript">
      var updater = function(target, url, params) {
          return new Ajax.PeriodicalUpdater(target, url, params || {
              method: 'get', frequency: 1, decay: 2
          });
      }
      document.observe('dom:loaded', function() {      
          $('btn1').observe('click', function(e){                              
              e.stop();
              this.stopObserving('click');                            
              updater('contenido', 'alertas.php');                
          });            
          $('btn2').observe('click', function(e){                              
              e.stop();
              this.stopObserving('click');                            
              updater('contenido', 'alertas_com.php');                
          });
      });
      </script>
</head>
      <body style="padding-top:1%;">
      <div id="hero-slider" >
        <form name="form1"><table width="160" border="0" align="center">
          <tr>
            <td width="75" height="96">
      <input type="button" id="btn1" class="boton2" name="Submit" value="" />
              <div class="Estilo3" style="position:relative; bottom:10%; width: 75px;">
                <div align="center">Radicacion</div>
            </div></td>
            <td width="75" height="96">
      <input type="button" id="btn2" class="boton2" name="Submit2" value="" />
      <div class="Estilo5" style="position:relative; bottom:10%; width:75" >
          <div align="center">Licencia</div>
        </div></td>
          </tr>
        </table></form>
 
        <div id="contenido" align="center" style="padding-top:2%">
      <div id="precarga" align="center"></div>
        </div>
              <!-- .mask -->
      </div> <!-- #hero-slider -->
      </body>
</html>

masterpuppet · #8 (**permalink**) 17/03/2011, 11:40

Me funciona correctamente en ff y chrome, en que navegador lo estas probando ?, mira en firebug a ver si te tira algun error, y comproba que la ruta a la libreria de prototype este bien.

andruxand · #9 (**permalink**) 17/03/2011, 11:47

lISTO SOLUCIONADO

... UTILIZE EL FIREBUG Y VI QUE HABIA UN ERROR AL COMPILAR EL SCRIPT QUE ME PASASTE JUSTO EN LA LINEA 15... ME ENTRO LA DUDA QUE TALVES PODRIA SER LA VERION DEL PROTOTYPE, ASI QUE ME DESCARGUE DE NUEVO LA LIBRERIA Y PRECISO ESO ERA...

DE VERDAD QUE PENA CONTIGO, PERO TE AGRADEZCO MUCHO POR TU AYUDA

UN SALUDO MUY GRANDE DESDE COLOMBIA

edito: aun presenta incosistencias al cargar las pagina en el div... cargo una al dar clic en el boton ok.. doy clic en el toro boton para cargar otra y aparece pero luego aparece la primera y vuelve y aparece a la que recie abri y asi... voy a intentar ver que pasa

andruxand · #10 (**permalink**) 17/03/2011, 12:13

ya carga correctamente las paginas pero solo tiene el problema de que por ejemplo cargo por segunda vez una pagina en el div y este luego de tres segundos aproximadamente carga la otra y asi sucesivamente, la verdad no se a que se pueda deber

masterpuppet · #11 (**permalink**) 17/03/2011, 12:16

Es que de esa forma lo haz planteado, si el contenedor es el mismo y clickeas los dos botones, uno sobreescribe al otro continuamente, no deberian ser dos contenedores diferentes ? o cuando seleccionas uno pare el otro ?

andruxand · #12 (**permalink**) 17/03/2011, 12:25

me imagino que la mas acertada es cuando doy clic en el botan A me cargue la pagina A y de ahi en adelante siga actualizandola cada n segundos, eso mientra me encuentre en la pagina A. asi cuando haga clic en el boton B cargue la pagina B y solo actulize cada n segundo la pagina B y asi sucesivamente,no que pase el pequeño problema que llega el momento que automaticamente carga la otra pagina sin haber dado clic e ningun boton.