if para actualizar div solo si hay cambios

[spirron589]

Hola tengo un codigo jquery el cual me actualiza un div cada 10 segundos...pero quiero que solo lo actualic si hay cambios...osea que haga la peticion y eso...pero si la respuesta es igual a la ya mostrada entonces no actualizar...como se hace...me imagino qe eso es de un if no?

gracias dejo el codigo

Código Javascript:

<script>
 $(document).ready(function() {
     $("#todos_actualizar").load("response.php");
   var refreshId = setInterval(function() {
      $("#todos_actualizar").load('response.php?randval='+ Math.random());
   }, 10000);
                            
   $.ajaxSetup({ cache: false });
                            
});
</script>
</script>
 

[maycolalvarez]

entonces no deberías usar $().load el cual simplemente carga, usa $.ajax() y dentro de la función delegada de success (onreadystatechange) compara con if el valor devuelto del actual y actualiza en caso de diferencia

[spirron589]

maycolalvarez primero que todo hola...y gracias por responder.....y bueno es que la verdad me dejaste O.o

es que mira...la verdad no se muy bien de lo q me hablas se que es el ajax y eso...pero el bendito curso de AJAX que voy a hacer...empieza para dentro de un mes ¬¬...quien sabe si despues.....entonces no entendi muy bien lo q me dijiste...me puedes complementar el codigo que tengo o darme uno que funcione como le explique?...porfavor....y por lo q veo somos paisanos eh....usted es de venezuela tambien...:D

[spirron589]

Como lo haria compañero maycolalvarez de verdad...q lo necesito.....porfavor...ayuda

[maycolalvarez]

deberias empeñarte en buscar más información, si usas jQuery sabes que $().load() es solo un atajo de la verdadera función $.ajax() y si consultas en la API de jQuery podrás avanzar al respecto.

inténtalo, trata de hacer algo de código, verás que no es difícil y si no puedes más postea el código, de esa forma es mejor ayudarte, pero hacerte el trabajo... lo veo difícil (sí, soy cruel), suerte

[spirron589]

O.o...seguire buscando entonces....una preguntica mas para usted....porseacaso usted no sabe algun curso de jquery o ajax en maracay? porsupuesto...Venezuela...ya que usted es de caracas...pienso q alomejor sepa pero aqui en maracay

[spirron589]

compañero acabo de encontrar esta funcion...."ifModified" como la uso en mi codigo?

[maycolalvarez]

fijáte no me había percatado de ella, por lo que veo en la API es una propiedad, colocarla como true en el JSON de la función $.ajax()

http://api.jquery.com/jQuery.ajax/

de cursos en Maracay ni idea, en Caracas hay muchas empresas que ofrecen cursos: Bellinsoft, GALA, Lourtec, Keys, Itelca, etc. pero cursos específicos de jQuery lo dudo

[spirron589]

maycolalvarez y no se podria hacer...lo siguiente?: con el metodo getelementbyid rescato el contenido de div #todos_actualizar y luego con un if...comparo...si son iguales actualizar...de lo contrario no actualizar....pero trato de hacerlo y no logro nada...como deberia hacerlo =???

[maycolalvarez]

esa es precisamente la primera opción que te indique, y como tal te dije que con $().load() no podrás hacerlo, sólo con $.ajax()

la verdad es que si no lo intentas es imposible seguir ayudándote, decide de una vez, es algo muy fácil de hacer.

[spirron589]

wahhhhhhhhhh maycolalvarez ya tengo esto con la funcion $.ajax()


$.ajax({
url: 'response.php?randval=<? echo $vari=rand();?>',
success: function(data) {
$('#todos_actualizar').html(data);
}
});

ahora me falta hacerlo...que se repita cada cierto tiempo...y lo de actualizar si hay cambios o no....guieme porfavor...voy a tratar de hacer mas....

[spirron589]

maycolalvarez Hola nuevamente....y mire tengo esto...

Código Javascript:

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'post',
    url: 'response.php?randval=<? echo $vari=rand();?>',
    timeout: 2000,
    success: function(data) {
      $("#todos_actualizar").html(data);
      $("#todos_actualizar").html(''); 
      window.setTimeout(update, 1000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#todos_actualizar").html('Timeout contacting server..');
      window.setTimeout(update, 6000;
    }
}
 

hice eso compañero pero no logro que haga algo...nisiquiera muestra...digame que error tengo...y que el debo colocar para q haga lo que yo quiero de eso..que actualic solo si hay cambios.....de verdad...ya no se que mas hacer...necesito esto...y bueno le doi las gracias por hacerme pensar y pensar..pero de verdad...por los momentos hasta ese codigo puedo llegar...y nisiquiera funciona O.o....ayuda porfavor

[maycolalvarez]

te voy a comentar en el código lo que no es lógico:

Código Javascript:

function update() {
      $("#notice_div").html('Loading..'); // ¿que se supone que hace esto?: si es lo que creo no va aquí
      $.ajax({
        type: 'post',
        url: 'response.php?randval=<? echo $vari=rand();?>',
        timeout: 2000,  // ¿un máximo de espera de 2 segundos para la petición?
        success: function(data) {
          $("#todos_actualizar").html(data); //se supone que aquí comparas
          $("#todos_actualizar").html(''); // ¿NO entiendo para que borras de nuevo el contenido!!!?
          window.setTimeout(update, 1000); // ¿no es más factible usar un setInterval global?
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          $("#todos_actualizar").html('Timeout contacting server..');
          window.setTimeout(update, 6000; // ERROR de sintaxis
        }
    }
 

[spirron589]

no pues ya me doi por vencido...al parecer no lograre hacerlo bien...de todas formas gracia...

[spirron589]

maicolalvares lo consegui hacer con ajax....pero trato de hacerle el if...y no hace lo q deberia hacer...osea actualizar si hay cambios si no no.....

Código Javascript:

<script>
 
var RequestObject = false; 
  var Archivo = ' response.php?randval=<? echo $vari=rand(); ?>'; 
 
  window.setInterval("actualizacion_reloj()", 5000); // el tiempo X que tardará en actualizarse 
  if (window.XMLHttpRequest) 
RequestObject = new XMLHttpRequest();
if (window.ActiveXObject)   
  RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function ReqChange() {
 
  if (RequestObject.readyState==4) {
 
      if (RequestObject.responseText.indexOf('invalid') == -1) 
      { 
 
      var msgs = RequestObject.responseText.split('|');
 
      document.getElementById("todos_actualizar").innerHTML = msgs[0];
 
 
      }
      else {
   
      document.getElementById("todos_actualizar").innerHTML = "###";
      }
  }
}
function llamadaAjax() {
 
  RequestObject.open("GET", Archivo , true);
  RequestObject.onreadystatechange = ReqChange;
 
  RequestObject.send(null); 
  }
  function actualizacion_reloj() {
    llamadaAjax();
  }
  
</script>
 

pienso que el if deberia de ir en la parte de document.getElementById("todos_actualizar").innerH TML = msgs[0]; osea alli es donde cambia el contenido html no?

pero le pongo el if alli y no funciona....

[maycolalvarez]

1 - desde el principio utilizaste AJAX con jQuery
2 - te estás complicando demasiado, tu problema NO es el código, sino de ANÁLISIS

piensa ¿que necesito para comparar?: el valor de mi capa actual y el valor devuelto por el servidor (ajax)

¿como obtengo tales valores?:
1- el valor de ajax lo obtengo desde la variable data pasada por jQuery (... success: function(data) {...) o RequestObject.responseText si uso el XmlHttpRequest Normal

2 - el valor de mi capa lo obtengo con jQuery así: var capa = $("#todos_actualizar").html(); o usando var capa = document.getElementById('todos-actualizar').innerHTML;

ya tengo mis 2 valores ¿como comparo?: con un if:

Código Javascript:

//...
success: function(data) {
var capa = $("#todos_actualizar").html();
if (data != capa){
    $("#todos_actualizar").html(data);
}
}
//...
 

[spirron589]

maycolalvares yo lo tengo asi....y aun no me funciona..porq usted me lo muestra con jquery yo..lo estoy haciendo en base a ajax...pero sigue sin funcionar...que me falta-'??

Código Javascript:

<script>
 
var RequestObject = false; 
  var Archivo = ' response.php?randval=<? echo $vari=rand(); ?>'; 
 
  window.setInterval("actualizacion_reloj()", 5000); // el tiempo X que tardará en actualizarse 
  if (window.XMLHttpRequest) // 
RequestObject = new XMLHttpRequest();
if (window.ActiveXObject)   
  RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function ReqChange() {
 
  if (RequestObject.readyState==4) {
 
      if (RequestObject.responseText.indexOf('invalid') == -1) 
      { 
     var div = document.getElementById("todos_actualizar").innerHTML;
      var msgs = RequestObject.responseText.split('|');      
     if(div!=msgs){
       document.getElementById("todos_actualizar").innerHTML = msgs[0];
     }
      }
      else {
   
      document.getElementById("todos_actualizar").innerHTML = "###";
      }
  }
}
function llamadaAjax() {
 
  RequestObject.open("GET", Archivo , true);
 RequestObject.onreadystatechange = ReqChange
 
  
  RequestObject.send(null); 
  
 
  }
  function actualizacion_reloj() {
    llamadaAjax();
  }
  
</script>
 

[maycolalvarez]

1 - no se puede comparar un string contra un array (div!=msgs) , investigue que hace y que devuelve la función split: http://www.w3schools.com/jsref/jsref_split.asp

2 - no se evalúa XmlHttpRequest.status==200 fallo al implementar estándar HTTP en petición AJAX, consulte un manual de AJAX

[spirron589]

ya vi...el split devuelve un array de todos los elementos..porq si se lo quito me devuelve un solo "<" que es lo primero de la respuesta....y lo ultimo del status=200 eso si no lo entendi....y bueno busque y busque pero no....no actualiza cuando hay cambios....

[spirron589]

el ultimo codigo q consegui fue este....pero el problema es q no me actualiza periodicamente...

Código Javascript:

<script>
    $.ajax({
   url: ' response.php?randval=<? echo $vari=rand(); ?>',
   
   success: function(data) {
     $('#todos_actualizar').html(data);
     alert('Load was performed.');
   }
 });
 

entiendo le falta el setInterval pero se lo coloco y luego no funciona...lo pongo en otra parte del codigo y tampoco funciona......y alli....si puedo hacer la validacion...que usted me dio la ultima q me dio usted

[maycolalvarez]

en reiteradas oportunidades te alenté a consultar un manual de AJAX para comprender el funcionamiento, allí sabrás el porque del status==200 que más bien forma parte del protocolo HTTP

cazar códigos no resolverá tu problema, a lo sumo para implementar un setInterval necesitas una función (function), así que debes empezar por programación estructurada

[spirron589]

trate de hacer dos divs uno oculto donde ponia la informacion nueva...y entonces rescataba su contenido....y lo almacenaba en una variable...lo mismo hacia con el div el cual debe actualizar....

entonces hacia el if...si los dos divs no eran iguales..actualizar...pero no funciono...igual actualizaba...


este es el codigo normal como lo tengo ahorita pero no funciona como debe de ser

Código Javascript:

function refresh(){
        $.ajax({
            url: " response.php?randval=<? echo $vari=rand(); ?>",
             
            ifModified:true,
            success: function(content,status){
                if (status != "notmodified") {   
                $("#todos_mensajes_actualizar").html(content);
                
    }else{
        
    }
 
            }
        });
       
        setTimeout(function(){
            refresh();
        }, 3000);
    }
$(function(){
        refresh();
    });
 

la variable ifModifield....no funciona o si pero no se como usarla


Creeme si pudiera le pusiese a este post no me gusta...porq de verdad ya me tiene loco...y me imagino q usted debe estar similar...disculpe