Utilisation de jQuery Timeago

Question

j'ai un <abbr> Tag avec la classe "TIMEAGO" dans mon HTML. Lorsque je le définis la valeur sur le chargement de la page, puis appelez jQuery("abbr.timeago").timeago(); Sur la fonction Ready Ready, cela fonctionne.

Ma question est de savoir si je change de titre abbr.timeago dynamiquement à partir d'une fonction JavaScript, comment puis-je faire du plugin TimeAgo pour faire sa magie sur l'élément ABRR.Timeago mis à jour?

Quelle fonction dois-je appeler? Devrais-je supprimer jQuery("abbr.timeago").timeago(); de la fonction de document Ready ou laissez-le? Merci

Modifier la question:

@Squiddy L'exemple fonctionne, met à jour le temps une seule fois et il reste comme ça inchangé. Par exemple, si je mets TimeAgo à l'heure actuelle .. alors cela ressemble à ce qu'il ne change pas?

Mise à jour des primes:

Veuillez ignorer la question précédente. Dans mon site Web, il y a un lien sur sa fonction Click Getjson est invoqué, ce qui obtient des informations d'un serveur dans une table.

Chaque ligne représente les commentaires du serveur. Voici mon code 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
    });

Ainsi, ce getjson est invoqué pour tous les commentaires que j'obtiens du serveur (n fois). Et lorsque JSON termine la colonne appropriée dans le tableau est remplie avec la dernière heure mise à jour.

Mais il semble que TIMEAGO ne lit pas la valeur du titre modifiée, elle ne reconnaît pas DOM mise à jour. Je mets une console.log (élément.attr ("titre")) pour chaque rétroaction du serveur à des fins de débogage juste pour voir si je définis l'attribut de titre à l'heure évaluer.

Que dois-je faire, j'ai également essayé cette version:

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

J'ai passé quelques heures à essayer plusieurs solutions possibles .. comme une fonction appelée chaque N seconde, pour appeler la fonction TimeAgo mais toujours les mêmes résultats

Answer 1

Mise à jour 2: La même astuce fonctionne ici. L'élément column a été précédemment converti par TimeAgo une fois, lorsque cela s'est passé, TimeAgo a placé un champ de données «TimeaGo» sur l'élément. Lorsque ce champ de données est présent, TIMEAGO ne s'en soucier pas, vous devez donc les effacer. Le code ressemblerait à ceci:

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

METTRE À JOUR: Corrigé, testé, l'astuce était que le plugin TimeAgo marque les éléments qui étaient déjà tournés, et ne les laissez pas se retourner, à moins que la marque ne soit effacée

Lorsque vous modifiez la valeur dans ABBR.TIMEAGO, vous devez exécuter la fonction TimeAgo () uniquement sur cet élément. Je recommanderais une fonction pour ceci:

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

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

J'espère que c'est ce dont vous aviez besoin!

Answer 2

À partir de v1.1.0, jquery.timeago.js fournit désormais un update action qui peut être utilisée:

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

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

Answer 3

N'ajoutez aucun code JavaScript ou jQuery sauf celui-ci;

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

puis ajouter «z» (ou y compris t). Pour plus d'informations, allez-y lien

<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

Je n'ai pas pu le faire fonctionner après avoir modifié la valeur dans l'attribut de titre, mais TimeAgo prend en charge une approche directe comme ceci:

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

Donc, lorsque vous modifiez un élément, mettez à jour le HTML vous-même:

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

Answer 5

Si vous souhaitez mettre à jour l'élément TIMEAGO avec une nouvelle date. La façon la plus simple de faire est la suivante -

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

Il fonctionne comme un charme. Je ne comprends pas pourquoi il n'est documenté nulle part. Vous pouvez trouver cette fonction en examinant le code JavaScript TimeAgo.