How to return an array from jQuery ajax success function and use it in a loop?

Question

I want to make the time of each post to change in realTime.

This is only the font with the time,beacuse this is want is the important here.

<font class="timestamp" postdate="unixTimeStamp" postID="6">2 min ago</font>

<font class="timestamp" postdate="unixTimeStamp" postID="5">4 min ago</font>

<font class="timestamp" postdate="unixTimeStamp" postID="4">9 min ago</font>

An this is the javascript

setInterval(updateTimestamps,30000);

var realTime=<?php echo time();?>;

function updateTimestamps(){

  $(".timestamp").each(function(i){

     var timestamp=$(this).attr("postdate"),
     postID=$(this).attr("postID"),
     math=realTime-timestamp;

  if(math<3600){var dataString='postID='+postID+'&timestamp='+timestamp;

           $.ajax({
                     type:"POST",
                     url:"http://site.com/ajax/humanTime.php",
                     data:dataString,
                     cache:false,
                     success:function(html){
                                $("[postID='"+postID+"']").html(html);
                     }

            });

  }

});

}

In humanTime.php I calculate the time:

$timestamp = $_POST['timestamp'];

$now=time(); $diff= $now - $timestamp;  and so on..

But the problem is that it makes to many connections,beacuse the script is called for every post. And thought that maybe i can make 1 connection sort the data into a array and then to change the time. But i never worked with json and i'm sure if what i want is really possible

You DO know that the font tag is deprecated in HTML4 and removed in HTML5 right? — Mark Schultheiss
– Mark Schultheiss, Commented Mar 20, 2012 at 12:58
Since Math is an existing JavaScript object (and a reserved keyword), it's confusing to create a variable named math. Name your variables after what they actually represent to make your code easier to re-read. — Blazemonger
– Blazemonger, Commented Mar 20, 2012 at 13:31

Bram · Accepted Answer · 2012-03-20 13:14:38Z

2

Why calculate the human time server side? You can do those calculations perfectly client side as well.

setInterval(updateTimestamps,30000);

var currentTime=<?php echo time();?>;

function updateTimestamps(){

  $(".timestamp").each(function(i){
        var timestamp=$(this).attr("postdate");
        $(this).text(humanTime(currentTime, timestamp));
    });

}

function humanTime(currentTime, timestamp) 
{
    var diff = currentTime - timestamp,
    minute = 60,
    hour = minute * 60,
    day = hour * 24,
    week = day * 7;

    if (isNaN(diff) || diff < 0) {
        return ""; // return blank string if unknown
    }

    if (diff < second * 2) {
        // within 2 seconds
        return 'right now';
    }

    if (diff < minute) {
        return Math.floor(diff / second) + 'seconds ago';
    }

    if (diff < minute * 2) {
        return 'about one minute';
    }

    if (diff < hour) {
        return Math.floor(diff / minute) + 'minutes ago';
    }

    if (diff < hour * 2) {
        return 'about an hour ago';
    }

    if (diff < day) {
        return  Math.floor(diff / hour) + 'hours ago';
    }

    if (diff > day && diff < day * 2) {
        return 'yesterday';
    }

    if (diff < day * 365) {
        return Math.floor(diff / day) + 'days ago';
    }

    else {
        return 'more then a year ago';
    }
}

This function is borrowed from: http://www.queness.com/post/8567/create-a-dead-simple-twitter-feed-with-jquery

And as said: use a <span> tag or the HTML5 tag <time>.

answered Mar 20, 2012 at 13:14

Bram

1,1121 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bram Over a year ago

In my example, I still use the php echo of time(), this will cause a few inaccuracies. It would be better to change the code to work with javascript date objects.

MatuDuke Over a year ago

But, what if the client machine doesn't have the time correctly seted?

Ben Over a year ago

Yes this worked but i still need to use a server side script because i want the currentTime to change. I dont want just to change to human time but update it every 20 sec for ex: facebook each post creation time is updating.

Bram Over a year ago

In that case, check out the code at the mentioned link, they use a javascript Date object instead of the php time(), this will always be up to date if you set it every time you call updateTimestamps()

MatuDuke · Accepted Answer · 2012-03-21 13:58:01Z

1

I would do something like this:

setInterval(updateTimestamps,30000);
var ids = new Array();

function updateTimestamps(){
    $(".timestamp").each(function(i){
    var obj = new Object();
    obj.id = $(this).attr("postID");
    obj.timestamp = $(this).attr("postdate");
        ids.push(obj);
    }

    $.post("http://site.com/ajax/humanTime.php", {"time": ids}, function(data) {
        for (i = 0; i < data.length; i++) {
            $("#" + data[i].id).html(data[i].content);
        }
    }, "json");
}

EDIT: And in humanTime.php:

<?php 
    $ids = json_decode($_POST['time']);
    foreach($ids as $id) {
        // Calculate human time ...
    }
?>

then return something like this:

[{id:1, content:1 minute ago}, {id:3, content: 5 hours ago}]

PS: This solution is what you requested, but I think Bram aproach is better.

edited Mar 21, 2012 at 13:58

answered Mar 20, 2012 at 13:11

MatuDuke

5,0081 gold badge25 silver badges28 bronze badges

1 Comment

Ben Over a year ago

How to access the data in humanTime.php beacuse i never worked with json

Ruslanas Balčiūnas · Accepted Answer · 2012-03-20 13:28:28Z

0

<!-- if you like something simple :) -->
<span class="timestamp" data-unix="<?php echo time();?>">posted now</span>
<script type="text/javascript">
setInterval(function() {
     $('span').each(function() {
        var d = new Date();
        // difference in minutes from now
        var diff = Math.round(d.getTime()/60000 - $(this).attr('data-unix')/60);
        $(this).html(diff + ' mins ago');
    });
}, 60000);
</script>

answered Mar 20, 2012 at 13:28

Ruslanas Balčiūnas

7,4563 gold badges27 silver badges42 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2012-03-20 14:35:29Z

What about processing it client side on your interval:

sample markup could be div, span etc.

<div class="timestamp" postID="6"></div>
<div class="timestamp" postID="2"></div>
<div class="timestamp" postID="3"></div>

This supports present and future and generic.

var time_formats = [
    [60, 'just now', 1],
    [120, '1 minute ago', '1 minute from now'],
    [3600, 'minutes', 60],
    [7200, '1 hour ago', '1 hour from now'],
    [86400, 'hours', 3600],
    [172800, 'yesterday', 'tomorrow'],
    [604800, 'days', 86400],
    [1209600, 'last week', 'next week'],
    [2419200, 'weeks', 604800],
    [4838400, 'last month', 'next month'],
    [29030400, 'months', 2419200],
    [58060800, 'last year', 'next year'],
    [2903040000, 'years', 29030400],
    [5806080000, 'last century', 'next century'],
    [58060800000, 'centuries', 2903040000]
    ];

function prettydate(date_str) {
    var time = ('' + date_str).replace(/-/g, "/").replace(/[TZ]/g, " ");
    var seconds = (new Date() - new Date(time)) / 1000;
    var token = 'ago';
    var list_choice = 1;
    if (seconds < 0) {
        seconds = Math.abs(seconds);
        token = 'from now';
        list_choice = 2;
    }
    var i = 0,
        format;
    while (format = time_formats[i++]) if (seconds < format[0]) {
        if (typeof format[2] == 'string') return format[list_choice];
        else return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
    }
    return time;
}

// these would normally come from your ajax/creation of the element
$('.timestamp[postID=6]').data('postdate', '2012-03-20T09:24:17Z');
$('.timestamp[postID=2]').data('postdate', '2012-03-20T10:24:17Z');
$('.timestamp[postID=3]').data('postdate', '2012-03-20T08:24:17Z');

function formatTimes() {
    $('.timestamp').each(function() {
        $(this).text(prettydate($(this).data('postdate')));
    });
}
setTimeout(formatTimes, 30000);

Working example: http://jsfiddle.net/MarkSchultheiss/6HKmS/

Collectives™ on Stack Overflow

How to return an array from jQuery ajax success function and use it in a loop?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related