使用jQuery，我如何Ajax将文本加载到多个.class中而不是#id中？

Question

On my website I have a commenting form which tells you how long ago a comment was posted.
Below is a code to reload only the span containing the date every 10 seconds, the entire comments div (to prevent page-lag)

$(function(){
     setInterval(
     function(){ 
     var id = $('.date').html();
     $('.date').load('/comdate.php?id=' + id); }
     ,10000);
});

my function is not working, and I don't really want to make a seperate function for every comment's date field. Please may someone point out my problem? Thanks

I am using this in javascript to change the time to a readable date

   function prettyDate(time){
    var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
        return;

    return day_diff == 0 && (
            diff < 60 && "just now" ||
            diff < 120 && "1 minute ago" ||
            diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
            diff < 7200 && "1 hour ago" ||
            diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
        day_diff == 1 && "Yesterday" ||
        day_diff < 7 && day_diff + " days ago" ||
        day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if ( typeof jQuery != "undefined" )
    jQuery.fn.prettyDate = function(){
        return this.each(function(){
            var date = prettyDate(this.title);
            if ( date )
                jQuery(this).text( date );
        });
    };

This returns GMT+1 though because thats where I am. how do I change this function to make the javascript timezone GMT aswell?

Answer 1

For me i would change my ajax request to send the unix timespan only once and i would do all my calculations in javascript.

var periods = ["second", "minute", "hour", "day", "week", "month", "year", "decade"];
var lengths = ["60","60","24","7","4.35","12","10"];

function nicetime(user_date)
{
    if(typeof user_date == "undefined" ) {
        return "No date provided";
    }

    var now  = new Date().getTime();
    var unix_date = user_date;

    // check validity of date
    if(unix_date == "") {   
        return "Bad date";
    }

    // is it future date or past date
    if(now > unix_date) {   
        var difference = now - unix_date;
        var tense = "ago";
    } else {
        var difference = unix_date - now;
        var tense      = "from now";
    }
    difference = difference/1000; //from milliseconds to seconds;
    for(var j = 0; difference >= lengths[j] && j < lengths.length-1; j++) {
        difference /= lengths[j];
    }

    difference = Math.round(difference);

    if(difference != 1) {
        periods[j] += "s";
    }

   return difference+" "+periods[j]+" "+tense;
}


console.log(nicetime(1378632182334));

Example:

http://jsfiddle.net/F6H2w/

NOTE The only thing that i changed in your function is:

difference = difference/1000; //from milliseconds to seconds;

your code was dealing with the differences variable in milliseconds which should be in seconds.

Answer 2

The suggestion made by @ra_htial in his first comment sounds like the best one, because it doesn't poll the server needlessly with requests which could be managed on the client side with javascript. So my suggestion is to add a data-date attribute to your .date span elements, which would contain the date and time in plain format, which can be decoded in javascript and used to update the human readable date.

Here's how the html should look like with static data:

<span class="date" data-date="2013-09-08 12:37">1 min ago</span>

Or outputted from your php script:

<span class="date" data-date="<?php echo $date; ?>"><?php echo nicetime($date); ?></span>

And here's the javascript that updates the date content (I used the formatting function from this article http://www.zachleat.com/web/yet-another-pretty-date-javascript/ but there are other alternatives like John Resig's Pretty Date ):

setInterval(function()
{ 
    $('.date').each(function()
    {
        var $this = $(this);
        $this.html(humane_date($this.data('date')));
    });
}, 10000);

EDIT

Here's a fiddle that illustrates the functionality http://jsfiddle.net/FXERS/ . You would need to change the data-date attribute for one of the elements in the fiddle, to your current time to see it get updated.

Answer 3

Doesn't look like you can use the .load() method on multiple elements, but you could fetch the date once into a variable and then update all the other elements:

$.get('/comdate.php?id=' + id, function(data) {
    $('.date').each( function() { $(this).html(data); } );
});

Which updates all the elements. Although pointed out above in the comments, you're not doing anything in that script you couldn't do in JS with a bit of work.

Edited to add Look for at the Date object in JavaScript, it can get the current time and parse it -- everything else in your function is just logic which is easy to translate.