Pick the comments from database and render as follows
oDiff.days = Math.floor(nTotalDiff / 1000 / 60 / 60 / 24);
//// HTML
<!--here comments are populated --!>
- Set Comment Time in <span class="cmnttime" id="t1">YYYYMMDDHHMMSS</span> and keep it invisible.
- Take another <span id="txt1">0 seconds ago</span> in which we will display & update comment time.
- 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();
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%">
</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>
This comment has been removed by a blog administrator.
ReplyDelete