Utilizzo di JQuery Timeago

Question

ho un <abbr> Tag con la classe "Timeago" nel mio HTML. Quando l'ho impostato valore sul caricamento della pagina, quindi chiama jQuery("abbr.timeago").timeago(); Nella funzione pronta per documenti funziona.

La mia domanda è: cosa succede se cambio il titolo di Abbr.Timeago in modo dinamico da una funzione JavaScript, come posso fare il plug -in Timeago per fare la sua magia sull'elemento Abrr.Meagogo aggiornato?

Quale funzione dovrei chiamare? Dovrei rimuovere jQuery("abbr.timeago").timeago(); dalla funzione pronta per documenti o lasciala? grazie

Domanda di modifica:

@squiddy Esempio funziona, aggiorna il tempo solo una volta e rimane invariato. Ad esempio, se metto Timeago al momento corrente .. allora è così che non cambia?

Aggiornamento di taglio:

Si prega di ignorare la domanda precedente. Nel mio sito Web è invocato un link al suo clic Getjson che ottiene alcune informazioni dal server in una tabella.

Ogni riga rappresenta il feedback dal server. Ecco il mio codice pseudo getjson:

            $.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
    });

Quindi questo getjson viene invocato per ogni feedback che ricevo dal server (n volte). E quando JSON completa la colonna appropriata nella tabella viene popolata con l'ultimo tempo aggiornato.

Ma sembra che Timeago non stia leggendo il valore del titolo modificato, non riconosce DOM aggiornato. Ho messo un console.log (element.attr ("title")) per ogni feedback dal server a fini di debug solo per vedere se imposto l'attributo del titolo su ora attuale, e lo fa davvero, ma il timeago raccoglie il titolo inizialmente caricato valore.

Cosa dovrei fare ho anche provato questa versione:

$.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"));
            });  
        });

Ho trascorso poche ore a provare diverse possibili soluzione .. come una funzione chiamata ogni N secondi, per chiamare la funzione Timeago, ma sempre gli stessi risultati

Answer 1

Aggiornamento 2: Lo stesso trucco funziona qui. L'elemento column era stato precedentemente convertito da Timeago una volta, quando è successo, Timeago ha inserito un campo di dati "Timeago" sull'elemento. Quando questo campo di dati è presente, Timeago non si preoccuperà, quindi devi cancellarlo. Il codice sembrerebbe qualcosa del genere:

$.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
});

AGGIORNARE: Corretto, testato, il trucco era che il plugin di Timeago segna gli elementi che erano già girati e non lasciarli girare di nuovo, a meno che il segno non venga cancellato

Quando si modifica il valore in Abbr.timeago, è necessario eseguire di nuovo la funzione Timeago () solo su quell'elemento. Consiglierei qualche funzione per questo:

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

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

Spero che questo sia ciò di cui hai bisogno!

Answer 2

A partire da v1.1.0, jquery.timeago.js ora fornisce un update Azione che può essere utilizzata:

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

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

Answer 3

Non aggiungere alcun codice JavaScript o jQuery tranne questo;

$('.timeago').timeago();

e poi aggiungi 'z' (o incluso t). Per ulteriori informazioni, vai a questo collegamento

<abbr class='timeago' title='2011-09-09 10:10:10Z'></abbr>

http://en.wikipedia.org/wiki/iso_8601#combined_date_and_time_representations

Answer 4

Non sono riuscito a farlo funzionare dopo aver modificato il valore nell'attributo del titolo, ma Timeago supporta un'approvazione diretta come questa:

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"]

Quindi, quando si cambia un elemento, aggiorna tu stesso HTML:

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

Answer 5

Se si desidera aggiornare l'elemento Timeago con una nuova data. Il modo più semplice per fare è il seguente -

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

Esso funziona magicamente. Non capisco perché non sia documentato da nessuna parte. Puoi trovare questa funzione guardando il codice JavaScript di Timeago.