Charcount not working

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		
  }

Sorry, as a heads up the script is linked just below body tag. Believe this is a code error, or selector error, but not sure where.

<body>
<script src="js/Like.js"></script>
<script src="js/SleuthComments.js"></script>
<script src="js/SleuthPagination.js"></script>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.