Chat with me

How to implement Facebook style comment's time update

Pick the comments from database and render as follows

1. Set Comment Time in <span class="cmnttime" id="t1">YYYYMMDDHHMMSS</span>  and keep it invisible.
2. Take another <span id="txt1">0 seconds ago</span>  in which we will display & update comment time.
3. We use the following functions 


function postData() {var cmnt = $("#txtCmnt").html().replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g, '');


if ( cmnt== "") return;


$.post("AjaxHandler.ashx", { op: 'make', movieid: '<%=Request["movieid"] %>', userid: '<%=Membership.GetUser().ProviderUserKey.ToString() %>', comment: $("#txtCmnt").html() }, function (result) {


            $("#txtCmnt").html("");
            $("#comments").html(result);
            $("#comments").slideDown(1000);
            showTime();


  });
}

function get_time_difference(earlierDate, laterDate) {

        var nTotalDiff = laterDate.getTime() - earlierDate.getTime();

        var oDiff = new Object();

        oDiff.days = Math.floor(nTotalDiff / 1000 / 60 / 60 / 24);

        nTotalDiff -= oDiff.days * 1000 * 60 * 60 * 24;

        oDiff.hours = Math.floor(nTotalDiff / 1000 / 60 / 60);

        nTotalDiff -= oDiff.hours * 1000 * 60 * 60;

        oDiff.minutes = Math.floor(nTotalDiff / 1000 / 60);

        nTotalDiff -= oDiff.minutes * 1000 * 60;

        oDiff.seconds = Math.floor(nTotalDiff / 1000);

        if (oDiff.days >= 365)

            return earlierDate.toDateString();

        if (oDiff.days >= 30)

            return parseInt(oDiff.days / 30) + " months ago";

        if (oDiff.days >= 7)

            return parseInt(oDiff.days / 7) + " weeks ago";

        if (oDiff.days < 7 && oDiff.days >0)

            return oDiff.days + " days ago";

        if (oDiff.hours >= 1)

            return oDiff.hours + " hours ago";

        if (oDiff.minutes >= 1)

            return oDiff.minutes + " minutes ago";

        if (oDiff.seconds >0)

            return oDiff.seconds + " seconds ago";

      

      

    }

function showTime() {

    $("span.cmnttime").each(function () {

    var id = $(this).attr("id");

    id = id.replace("t", "txt");

    var curTime = new Date();

    var cmntTimeText = $(this).html();  // it YYYYMMDDHHmmss formatted

   var cmntTime = new Date(parseInt(cmntTimeText.substring(0, 4)), parseInt(cmntTimeText.substring(4, 6)), parseInt(cmntTimeText.substring(6, 8)), parseInt(cmntTimeText.substring(8, 10)), parseInt(cmntTimeText.substring(10, 12)), parseInt(cmntTimeText.substring(12, 14)));

          

  var diffString = get_time_difference(cmntTime, curTime);

            $("span#" + id).html( diffString);

});

        setTimeout("showTime()", 1000);

    }

//// HTML

<div id="cmntArea" style="float:left;width:100%;margin:5px">

<table cellspacing="0" cellpadding="0">

<tr>

<td> <div contenteditable="true"  id="txtCmnt"  style="width:500px;border:1px solid black;background-color:White;min-height:20px;border-radius:5px" ></div></td>

</tr>

<tr>

<td valign="bottom"><input type="button" name="btnMakeCmnt" id="btnMakeCmnt" value="Post"  style="border:1px solid black; border-top:none;border-radius:5px;width:100px" /></td>

</tr>

</table>

</div>

<div id="comments" style="float:left;width:100%">

 <!--here comments are populated --!>

</div>

///// Pages's Header section

<script type="text/javascript">

$(function () {

        //this code is executed when the page's onload event fires

        $("div#txtCmnt").keydown(function (e) {

            if (!e) var e = window.event;

            if (e.ctrlKey && e.keyCode == 13) {

                postData();

            }

            else if (e.keyCode == 13) {

                            }

            return true;

        });

        $.post("AjaxHandler.ashx", { op: 'show', movieid: '<%=Request["movieid"] %>', userid: '<%=Membership.GetUser().ProviderUserKey.ToString() %>' }, function (result) {

            $("#comments").html(result);

            showTime();

        });

        $("#btnMakeCmnt").click(postData);

    });

</script>