Como puedo actualizar un div cada X segundos usando Prototype

[kaninox]

Hola estimado(a)s, alguien me podria decir como puedo actualizar un div cada X segundos pero usando la libreria prototype, se que hay muchos ejemplos usando jquery, pero la web donde quiero implementarlo usa prototype, y no he encontrado algo parecido al setInterval :/, probe con el no.conflict pero no funciona tampoco.

Alguna idea?
Saludos cordiales.

[Alexis88]

La función setInterval() es propia del lenguaje, no de ninguna librería o framework.

[kaninox]

Interesante, pero si por ejemplo.

este codigo lo realizo con Jquery me funciona no así con Prototype.
De hecho si me lo planteas así, entonces sin niunguna librería deberia funcionar, pero no me resulta :(.

Código:

<script type="text/javascript">
function actualiza(){
    $("#capa").load("zhtml.php");
  }
  setInterval( "actualiza()", 10000 );
</script>

<div id="capa" style="border:1px solid #066; width:600px; height:250px;">TEXTO PLANO</div>

[Alexis88]

La única parte que deberías reemplazar es la de $("#capa").load("zhtml.php"); por su equivalente en el framework que usas. Básicamente sería el método .load(), teniendo como opción equivalente al método Ajax.Request(). Para el tema del selector, $("#capa"), con el modo de no-conflicto debería bastar. Si no lo logras, échale un vistazo a este ejemplo.

[kaninox]

O soy muy ñurdo pero no logro entender donde hago el cambio de la capa a prototype?
me mire el metodo Ajax.Request() que es el que reemplaza a load() se gún me mencionas con mi libreria, pero no se como agregarle que me actualice la capa cada X segundos

[Alexis88]

Si aíslas correctamente los bloques de código de jQuery y Prototype, de lo único que deberías preocuparte es de .load("zhtml.php").

Siguiente el ejemplo del enlace que te señalé:

Código Javascript:

function actualiza(){
    new Ajax.Request("zhtml.php", {
        onSuccess: function(response) {
            $("#capa").html(response);
        }
    });
}
 
setInterval(actualiza, 10000);
 

[kaninox]

Si ejecuto esto con prototype o jquery solo deberia correr?
por que no me funciona :(
de hecho yo habia intentado:

Código:

new Ajax.Request('capa', 'zhtml.php',{ onSuccess: function(response){
	   setInterval(actualiza, 1000);
	    } });

ya que mi idea no es usar jquery, si se pudiera realizar la actualización solo usando prototype? es posible?
Porque veo en tu code que el set inval no lo puedo pasar dentro del on Success, veo que esta mal :(

Gracias :)

[Alexis88]

Dos preguntas:

1. ¿Aislaste los bloques de código de jQuery y Prototype como se muestra en el ejemplo del último enlace que te dejé en mi penúltima respuesta?

2. ¿Probaste con el ejemplo que te he mostrado en mi última respuesta?

El método setInterval() ejecuta una función o conjunto de instrucciones cada cierto tiempo de forma repetitiva. No es necesario que lo ejecutes como parte de la función; su accionar se dispara automáticamente.

Quizá estás confundido porque tienes que esperar diez segundos para que se ejecute la función. Lo que podrías hacer es ejecutar la función por fuera solo al inicio (cuando haya terminado de carga el documento) y luego ejecutarías el temporizador o bien dentro de la función o por fuera.

Código Javascript:

//Forma 1
 
function actualiza(){
    new Ajax.Request("zhtml.php", {
        onSuccess: function(response) {
            $("#capa").update(response);
        }
    });
}
 
actualiza();
setInterval(actualiza, 10000);
 
//Forma 2
function actualiza(){
    new Ajax.Request("zhtml.php", {
        onSuccess: function(response) {
            $("#capa").update(response);
            setInterval(actualiza, 10000);
        }
    });
}
 
actualiza();
 

Cualquiera de ambas formas funcionará. No olvides aislar los bloques de código jQuery y Prototype.

[kaninox]

Hola Alexis88, primero quiero agradecer tu paciencia y tiempo :) de verdad gracias.
Mira probe tu codigo, de hecho lo estoy ejecutando en una pagina sola, para no confundir ninguna funcion ajena, solo quiero actualizar la capa, esto es lo unico que tengo.

mi pagina se llama zhtml.php

Código HTML:

<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
 
<script type="text/javascript">
 function actualiza(){
        new Ajax.Request("zhtml.php", {
            onSuccess: function(response) {
                $("#capa").update(response);
            }
        });
    }
     
    actualiza();
    setInterval(actualiza, 10000);
</script>
</head>
<body>
889
<div id="capa" style="border:1px solid #066; width:600px; height:250px;">
TEXTO PLANO
</div>
</body>
</html>
 

Pero no hay caso que me refresque la capa, por cierto, como mencione, sera posible lograr esto pero sin recurrir al Jquery y el no.conflict(), y hacerlo con solo la libreria prototype?

Saludos

[Alexis88]

Tengo otras dos preguntas que hacerte:

1. ¿Estás utilizando la librería jQuery en otra parte del documento o del proyecto para que necesariamente tengas que incluirla en ese documento?

2. ¿Por qué no realizas el aislamiento del código como se muestra en el ejemplo del enlace que te dejé?

Parece que solo te estás limitando a copiar y pegar el código.

De cualquier forma, si no necesitas usar la librería jQuery en otra parte de ese documento, simplemente sácala y todo debería empezar a funcionar.

Para que la ejecución y finalización se realice de forma exitosa, te recomiendo realizar el llamado a la función cuando haya terminado de cargar el documento:

Código Javascript:

function actualiza(){
    new Ajax.Request("zhtml.php", {
        onSuccess: function(response) {
            $("#capa").update(response);
            setInterval(actualiza, 10000);
        }
    });
}
 
document.observe("dom:loaded", actualiza);
 

O bien podrías colocar todo el código original debajo de los elementos del documento, es decir, justo antes de </body>. Y si sigues teniendo problemas, dirígete hacia la consola del navegador (F12 >> "Console" en Chrome o "Consola" en Firefox) y observa el mensaje de error o advertencia que se muestra.