Hey,
I’ve got a simple JS script that ticks charcount down in a span element when typing in a text area. I’ve got it kind of elaborate because there are many posts outputting on the page. Each has a textbox. Charcount script uses arrays to hold post tokens and the string being formed. I’ve got this working on one page, but can’t seem to find the error on the current page.
Here’s and example of a post.
echo '<div id="sleuth'.$sleuths[$key]['token'].'" class="sleuth-box">
<div class="sleuth-box-padding">
<h4><i class="fa fa-pencil"></i><a href="'.$sleuths[$key]['link'].'"> '.htmlentities($sleuths[$key]['title']).'</a></h4>
<p>'.htmlentities($sleuths[$key]['description']).'</p>
<span class="block sm-margin-bottom" style="float:left;"><i class="fa fa-pencil"></i> Edit</span> <span style="float:right;"><i class="fa fa-trash"></i> Delete</span>
<span class="block sleuth-text sm-margin-bottom clear-fix"><small>By <a>'.$user->username().'</a></small></span>';
if($liked)
{
echo '<span><i id="heart'.$sleuths[$key]['token'].'" class="comments-count fa fa-heart hearted"></i> <span id="hearts'.$sleuths[$key]['token'].'" class="heart-count sm-margin-right">'.$sleuths[$key]['hearts'].'</span></span>';
}else{
echo '<span><i id="heart'.$sleuths[$key]['token'].'" class="comments-count fa fa-heart heart" token="'.$sleuths[$key]['token'].'" ></i> <span id="hearts'.$sleuths[$key]['token'].'" class="heart-count sm-margin-right">'.$sleuths[$key]['hearts'].'</span></span>';
}
echo '<span class="comments-count" style="margin-left:0.5em;"><i class="comments-count fa fa-comment"></i> <span id="commentcount'.$sleuths[$key]['token'].'">'.$commentCount.'</span></span>';
if($sleuths[$key]['username'] == $user->username())
{
echo '<span class="comments-count sm-margin-bottom"><i id="repost'.$sleuths[$key]['token'].'" class="comments-count fa fa-retweet reposted"></i> <span id="reposts'.$sleuths[$key]['token'].'">'.$sleuths[$key]['reposts'].'</span></span>';
}else{
echo '<span class="comments-count sm-margin-bottom"><i id="repost'.$sleuths[$key]['token'].'" class="comments-count fa fa-retweet repost"></i> <span id="reposts'.$sleuths[$key]['token'].'">'.$sleuths[$key]['reposts'].'</span></span>';
}
echo '<span class="block sleuth-text clear-fix sleuth-post-date"><small>Posted: '.date('M', strtotime($sleuths[$key]['datePosted'])).' '.date('d', strtotime($sleuths[$key]['datePosted'])).', '.date('Y', strtotime($sleuths[$key]['datePosted'])).'</small></span>';
echo '<div id="commentswrapper'.$sleuths[$key]['token'].'">';
if(count($comments) > 0)
{
foreach($comments as $key2 => $val2)
{
$commenter = new User;
$commenter->set_db($db);
$commenter->set_user_name($comments[$key2]['username']);
$commenter->set_profile_name($comments[$key2]['username']);
echo '<div class="comment-box">
<div class="comment clear-fix" style="margin-top:0.5em;">
<div class="image-column" style="width:25px; float:left;margin-right:0.2em;">
<img src="users/profile/'.$commenter->profileImage().'" height="25" width="25" style="margin-top:0.4em;" />
</div>
<div>
<small><a href="profile.php?username='.$commenter->username().'" target="_BLANK">'.$commenter->username().'</a> '.htmlentities($comments[$key2]['comment']).'</small>
</div>
</div>
</div>';
}
}
echo '</div><br>
<span class="charcount'.$sleuths[$key]['token'].'" style="padding:2px; background-color:lightred;">420</span>
<textarea id="textarea'.$sleuths[$key]['token'].'" style="width:100%;" rows="4" onkeyup="SleuthComments.type('. '\'' .$sleuths[$key]['token'] . '\'' .')"></textarea>
<button class="comment-button commentbutton" type="button" token="'.$sleuths[$key]['token'].'">Comment</button>
<div class="clear-fix load-more">
<span id="loadmore'.$sleuths[$key]['token'].'" lowestid="'.$lowestID.'" token="'.$sleuths[$key]['token'].'" class="load-more-link loadcomments">Load More</span>
</div>
</div>
</div>';
Here’s JS
var SleuthComments =
{
commentStrings: [],
sleuthTokens: [],
load: function(id, token)
{
$.ajax({
method: "POST",
url: "php/fetch_sleuth_comments.php",
dataType: 'json',
data: { idObj: id, tokenObj:token}
}).done(function( data ) {
if(data.message == 'loaded')
{
$('#commentswrapper'+token).append(data.html);
$('#loadmore'+token).attr('lowestid', data.lowestID);
}else{
alert(data);
}
});
},
type: function(token)
{
// test if token in sleuthTokens array
if(this.sleuthTokens.indexOf(token) <= -1)
{
// add sleuth token to array for first time
// add value of comment to array for first time
this.sleuthTokens.push(token);
this.commentStrings.push($('#textarea'+token).val());
// update remaining char count
var currentString = $('#textarea'+token).val();
var currentCount = 420 - currentString.length;
$('#charcount'+token).html(currentCount);
}else{
// set value of comment string
var currentString = $('#textarea'+token).val();
var currentCount = currentString.length;
if(currentCount <= 420)
{
this.commentStrings[this.sleuthTokens.indexOf(token)] = $('#textarea'+token).val();
var currentString = this.commentStrings[this.sleuthTokens.indexOf(token)];
var currentCount = 420 - currentString.length;
$('#charcount'+token).html(currentCount);
}else{
var currentString = this.commentStrings[this.sleuthTokens.indexOf(token)];
$('#textarea'+token).val(currentString);
}
}
},
comment: function(token)
{
var comment = this.commentStrings[this.sleuthTokens.indexOf(token)];
$.ajax({
method: "POST",
url: "php/comment_sleuth.php",
dataType: 'json',
data: { sleuthToken: token, commentObj: comment}
}).done(function( data ) {
if(data.message == 'commented')
{
// attach the new comment
$('#commentswrapper'+token).prepend(data.comment);
// increment the comment count by 1
var currentCount = $('#commentcount'+token).html();
var currentCount = parseInt(currentCount) + 1;
$('#commentcount'+token).html(currentCount);
}else if(data.message == 'unverified'){
alert(data);
}else if(data.message == 'guest')
{
}
});
// end comment function
}
// end class
}