2011-02-04 34 views
7

Tengo una etiqueta <abbr> con clase "timeago" en mi HTML. Cuando establezco el valor en la carga de la página, entonces llame al jQuery("abbr.timeago").timeago(); en la función de documento listo que funciona.uso de jQuery timeago

Mi pregunta es, ¿qué sucede si cambio dinámicamente el título de abbr.timeago de alguna función de JavaScript? ¿Cómo puedo hacer que el complemento timeago haga su magia en el elemento abrr.timeago actualizado?

¿A qué función debo llamar? ¿Debo eliminar jQuery("abbr.timeago").timeago(); de la función lista para documentos o dejarla? gracias

Editar pregunta:

ejemplo @squiddy funciona, actualiza el tiempo de una sola vez y que sólo permanece así sin cambios. Por ejemplo, si pongo timeago a la hora actual ... ¿entonces simplemente permanece como que no cambia?

BOUNTY ACTUALIZACIÓN:

Haga caso omiso de la pregunta anterior. En mi sitio web hay un enlace sobre su clic. Se invoca la función getJSON, que obtiene cierta información del servidor en una tabla.

Cada fila representa los comentarios del servidor. Aquí está mi getJSON pseudo código:

  $.getJSON("feedback/" + feedbackId, function(data) { 
      var column ... declared variable in which column selector 
     .... some logic that populates table(irrelevant) 
      //Store last checked time in title 
     column.attr("title", iso8601(new Date())); 
      //invoke timeago on this title 
     column.html(jQuery.timeago(iso8601(new Date()))); 
      ....iso8601 is date format function 
    }); 

Así que este getJSON se invoca para cada respuesta que reciba desde el servidor (n veces). Y cuando json completa la columna correspondiente en la tabla, se completa con la última hora actualizada.

Pero parece que timeago no lee el valor del título modificado, no reconoce el DOM actualizado. Puse console.log (element.attr ("title")) para cada comentario del servidor con fines de depuración, solo para ver si establezco el atributo del título a la hora actual, y lo hace de hecho, pero el timeago recoge el título cargado inicialmente valor.

¿Qué debo hacer También probé esta versión:

$.getJSON("feedback/" + feedbackId, function(data) { 
       var column ... declared variable in which column selector 
      .... some logic that populates table(irrelevant) 
       //Store last checked time in title 
      column.attr("title", iso8601(new Date())); 
       //invoke timeago on this title 

       $(column).livequery(function() { 
       $(this).timeago(iso8601(new Date())); 
       console.log($(this).attr("title")); 
      }); 
     }); 

He pasado unas horas tratando varios solución posible .. como una función llamada cada n segundos, para llamar a la función timeago pero siempre el mismo resultados

Respuesta

13

ACTUALIZACIÓN 2: El mismo truco funciona aquí. El elemento column se convirtió previamente por timeago una vez, cuando eso sucedía, timeago colocaba un campo de datos 'timeago' en el elemento. Cuando este campo de datos está presente timeago no se molestará con él, por lo que debe borrarlo. El código sería somethink así:

$.getJSON("feedback/" + feedbackId, function(data) { 
    var column 
    // ... declared variable in which column selector 
    // ... some logic that populates table(irrelevant) 
    // Store last checked time in title 
    column.attr("title", iso8601(new Date())); 
    // invoke timeago on this title 
    column.data("timeago",null).timeago(); 
    // ... iso8601 is date format function 
}); 

ACTUALIZACIÓN: corregido, probado, el truco era, ese plugin timeago marca los elementos que ya fueron rechazados, y no dejan a los convierten de nuevo, a menos que se borre la marca

Cuando cambia el valor en abbr.timeago, debe ejecutar la función timeago() solo en ese elemento nuevamente. Yo recomendaría alguna función para esto:

$.fn.changeTimeago = function(isotime) { 
    return $(this).attr("title",isotime).data("timeago",null).timeago(); 
} 

// usage: 
$("abbr.timeago").changeTimeago("2004-07-17T09:24:17Z"); 

Espero que esto es lo que necesitabas!

+0

esto no funciona – London

+0

@London Sí, tenías razón, pero lo corrigí. Btw timago() funciona con cualquier cadena de tiempo en el título, que el objeto Date() puede analizar, como el 4 de febrero de 2011 16:16:00 – aorcsik

0

no pude conseguir que funcione después de cambiar el valor en el atributo título, pero timeago soporta una approch directa como esto:

jQuery.timeago(new Date());    //=> "less than a minute ago" 
jQuery.timeago("2008-07-17");   //=> "2 years ago" 
jQuery.timeago(jQuery("abbr#some_id")); //=> "2 years ago" [title="2008-07-20"] 

Así que cuando se cambia un elemento, actualizar el mismo HTML:

jQuery("abbr.timeago").html(jQuery.timeago("2010-07-17T09:24:17Z")); 
+0

, su ejemplo funciona, actualiza la hora solo una vez y permanece así sin cambios . Por ejemplo, si pongo timeago a la hora actual ... ¿entonces simplemente permanece como que no cambia? ¿Debo dejar 'jQuery (" abbr.timeago "). timeago()' en mi función de documento listo? o llamarlo periódicamente? – London

1

A partir de v1.1.0, jquery.timeago.js ofrece ahora una acción update que se puede utilizar:

Desde: https://github.com/rmm5t/jquery-timeago/pull/115

$(column).livequery(function() { 
    $(this).timeago('update', iso8601(new Date())); 
}); 
+0

Este me ayudó. –

0

Si desea actualizar el elemento timeago con una nueva fecha. La forma más sencilla de hacerlo es la siguiente:

$('abbr.timeago').timeago('update',(new Date()).toISOString()); 

Funciona como un amuleto. No entiendo por qué no está documentado en ningún lado. Puede encontrar esta función mirando el código javascript timeago.