Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como puedo actualizar un div cada X segundos usando Prototype

Estas en el tema de Como puedo actualizar un div cada X segundos usando Prototype en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/07/2017, 09:48
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 11 años, 10 meses
Puntos: 49
Sonrisa Como puedo actualizar un div cada X segundos usando Prototype

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.
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #2 (permalink)  
Antiguo 14/07/2017, 10:20
Avatar de Alexis88
Colaborador
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.187
Antigüedad: 5 años, 8 meses
Puntos: 845
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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

__________________
«Haz por los demás lo que quisieras que los demás hagan por ti. Nunca hagas a los demás lo que no quieres que los demás te hagan».
  #3 (permalink)  
Antiguo 14/07/2017, 10:57
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 11 años, 10 meses
Puntos: 49
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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>
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #4 (permalink)  
Antiguo 14/07/2017, 11:36
Avatar de Alexis88
Colaborador
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.187
Antigüedad: 5 años, 8 meses
Puntos: 845
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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.

__________________
«Haz por los demás lo que quisieras que los demás hagan por ti. Nunca hagas a los demás lo que no quieres que los demás te hagan».
  #5 (permalink)  
Antiguo 17/07/2017, 15:25
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 11 años, 10 meses
Puntos: 49
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #6 (permalink)  
Antiguo 17/07/2017, 17:56
Avatar de Alexis88
Colaborador
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.187
Antigüedad: 5 años, 8 meses
Puntos: 845
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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:
Ver original
  1. function actualiza(){
  2.     new Ajax.Request("zhtml.php", {
  3.         onSuccess: function(response) {
  4.             $("#capa").html(response);
  5.         }
  6.     });
  7. }
  8.  
  9. setInterval(actualiza, 10000);

__________________
«Haz por los demás lo que quisieras que los demás hagan por ti. Nunca hagas a los demás lo que no quieres que los demás te hagan».
  #7 (permalink)  
Antiguo 18/07/2017, 08:57
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 11 años, 10 meses
Puntos: 49
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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 :)
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #8 (permalink)  
Antiguo 18/07/2017, 10:21
Avatar de Alexis88
Colaborador
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.187
Antigüedad: 5 años, 8 meses
Puntos: 845
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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:
Ver original
  1. //Forma 1
  2.  
  3. function actualiza(){
  4.     new Ajax.Request("zhtml.php", {
  5.         onSuccess: function(response) {
  6.             $("#capa").update(response);
  7.         }
  8.     });
  9. }
  10.  
  11. actualiza();
  12. setInterval(actualiza, 10000);
  13.  
  14. //Forma 2
  15. function actualiza(){
  16.     new Ajax.Request("zhtml.php", {
  17.         onSuccess: function(response) {
  18.             $("#capa").update(response);
  19.             setInterval(actualiza, 10000);
  20.         }
  21.     });
  22. }
  23.  
  24. actualiza();

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

__________________
«Haz por los demás lo que quisieras que los demás hagan por ti. Nunca hagas a los demás lo que no quieres que los demás te hagan».

Última edición por Alexis88; 18/07/2017 a las 14:32 Razón: Método equivocado
  #9 (permalink)  
Antiguo 18/07/2017, 14:44
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 11 años, 10 meses
Puntos: 49
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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:
Ver original
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  3. <script type="text/javascript">
  4. jQuery.noConflict();
  5.  
  6. <script type="text/javascript">
  7.  function actualiza(){
  8.         new Ajax.Request("zhtml.php", {
  9.             onSuccess: function(response) {
  10.                 $("#capa").update(response);
  11.             }
  12.         });
  13.     }
  14.      
  15.     actualiza();
  16.     setInterval(actualiza, 10000);
  17. </head>
  18. 889
  19. <div id="capa" style="border:1px solid #066; width:600px; height:250px;">
  20. TEXTO PLANO
  21. </div>
  22. </body>
  23. </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
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #10 (permalink)  
Antiguo 18/07/2017, 15:21
Avatar de Alexis88
Colaborador
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.187
Antigüedad: 5 años, 8 meses
Puntos: 845
Respuesta: Como puedo actualizar un div cada X segundos usando Prototype

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:
Ver original
  1. function actualiza(){
  2.     new Ajax.Request("zhtml.php", {
  3.         onSuccess: function(response) {
  4.             $("#capa").update(response);
  5.             setInterval(actualiza, 10000);
  6.         }
  7.     });
  8. }
  9.  
  10. 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.

__________________
«Haz por los demás lo que quisieras que los demás hagan por ti. Nunca hagas a los demás lo que no quieres que los demás te hagan».

Última edición por Alexis88; 18/07/2017 a las 15:28 Razón: Console



La zona horaria es GMT -6. Ahora son las 04:33.