entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Problema con setinterval y un for()

Hola, tengo este codigo que hace que se refresque una pagina de mi web dentro de un div:

$(function(){ 
            $(".comment").load("ajaxchatgr.php?id=<?=$id?>"); 
          });
          $(document).ready(function() {
           var refreshId = setInterval(function() {
            $(".comment").load('ajaxchatgr.php?id=<?=$id?>');
}, 10000);
          $.ajaxSetup({ cache: false });
          });

El codigo funciona bien pero dentro de esa pagina tengo links que quiero convertir a HTML y no hay manera que funcione porque al principio funciona pero al cabo de 10 segundos ya no funciona, aqui el codigo:

 var comentd = document.getElementsByClassName('contentlinkvideoimg');
          for(var i=0;i < comentd.length;i++) {
          var comenyd = comentd[i];
          var str = comenyd.innerHTML;
          var exp = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])(?=([^"']*["'][^"']*["'])*[^"']*$)/ig;
          var exp2 = /((https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]+\.(?:jpe?g|gif|png))(?=([^"']*["'][^"']*["'])*[^"']*$)/ig;
          var exp3 = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/ig;
          var images = str.replace(exp2, "<img src='$1' alt='$1' class='image-chat'>");
          var youtube = images.replace(exp3,"<div id='maxwidthyo'><div class='videoWrapper'><iframe frameborder='0' allowfullscreen src='http://www.youtube.com/embed/$1'></div></div>");
          var links = youtube.replace(exp,"<a href='$1' target='_blank'>$1</a>");
          comenyd.innerHTML = links
          }

Lo que hace es que los links que esten dentro de contenedores con la clase 'contentlinkvideoimg' se conviertan en HTML, pero como he dicho solo funciona los 10 primeros segundos.
He probado con poner el codigo en la pagina que se muestra dentro del div o poniendolo dentro de de la funcion de setinterval pero no lo consigo

1 Respuesta

1voto

mrczrt Puntos6920

Hola que tal, según entiendo la distribución de tu código tu for solo se ejecuta una sola vez, vuelve tu procedimiento una función y llamala con un callback para que los elementos ya existan cuando tu funcion los busque.

Para esto cambia tu load por un $.get :

$.get( "ajaxchatgr.php?id=<?=$id?>", function( data ) {
   $(".comment").html( data );
   funcionfor();
 });

Y vuelve una función tu codigo:

var funcionfor = function(){
    var comentd = document.getElementsByClassName('contentlinkvideoimg');
    .
    .
         comenyd.innerHTML = links
    }
 };// fin de funcionfor

Es importante saber cuando tus elementos ya estan disponibles para ser usados en el DOM, en local talvez te funcione los primeros 10 segundos pero en producción tu código no funcionaria ni siquiera la primera vez.

Saludos.

0voto

Jaumesv comentado

Y como puedo hacerlo para que no me vuelva a cargar los elementos en el div si el get es igual al que ya cargo?

0voto

mrczrt comentado

Hola, creas una variable global :

var anterior = '';

Despues esta la compraras con data si son iguales no hace nada, en caso contrario continua remplazas el contenido del div y actualizas tu variable:

$.get( "ajaxchatgr.php?id=<?=$id?>", function( data ) {
      if (data===anterior) return;
      anterior = data;
      $(".comment").html( data );
      funcionfor();
});

Saludos.

0voto

Jaumesv comentado

Donde pongo la variable 'anterior'? Es que a mi no me funciona, la variable anterior la tengo asi:

var anterior = document.getElementsByClassName('comment')[0].innerHTML;

pero me da como si no fuera igual y si que lo es

0voto

mrczrt comentado

La variable anterior solo es de control, ponla despues de la linea $(function(){, declarala como un string vacío como te lo puse en el ultimo ejemplo : var anterior = '';, con eso bastara para que funcione, recuerda que solo debe almacenar lo que recibe de data por eso se compara con el para saber si va a cambiar su valor o continua con el valor anterior y no cambia el valor de tu div, saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta