5 Replies - 239 Views - Last Post: 16 August 2017 - 03:54 PM

#1 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 239
  • Joined: 10-January 14

Charcount not working

Posted 16 August 2017 - 05:24 AM

Hello,

've got a simple JS script that ticks charcount down in a span element when typing in a text area. It's kind of elaborate because there are many posts outputting on the page. Each has a textbox for commenting. 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.

The JS script is linked to the page under the body element:

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


Here's what a post looks like:

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 the JS class
 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		
  }


Is This A Good Question/Topic? 0
  • +

Replies To: Charcount not working

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1842
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Charcount not working

Posted 16 August 2017 - 10:23 AM

What exactly is the problem? Have you checked the developer console for error messages?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Charcount not working

Posted 16 August 2017 - 01:26 PM

You also shouldn't be inventing attributes in HTML, that's what the data-* attribute is for.
Was This Post Helpful? 0
  • +
  • -

#4 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 239
  • Joined: 10-January 14

Re: Charcount not working

Posted 16 August 2017 - 03:08 PM

Sorry, ran a test on the wrong page. All files are linked, and working fine. The page loads, jquery is working, as I get an alert on my page in document ready function. It has to be a html issue, but I have no idea what. It literally works on one page, but not another. That's the reason I'm thinking a selector issue... All other files are linked the same way..

Working code from
home.php
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>True Sleuths | Home</title>
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- Font Awesome -->
	<script src="https://use.fontawesome.com/a4263cdc34.js"></script>
	<!-- bootstrap -->
	<script src="lib/bootstrap/js/bootstrap.min.js"></script>
	<!-- Jquery -->
	<script src="lib/jquery.js"></script>
	<!-- Cart -->
	<!-- Style -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/navbar.css">
	<link rel="stylesheet" href="css/home.css">
</head>
<body>
<script src="js/Like.js"></script>
<script src="js/SleuthComments.js"></script>

----


echo '<div class="sleuth-box">
												<div class="sleuth-box-padding">
												<div id="sleuthvideo'.$sleuths[$key]['token'].'">
													<iframe width="256" height="192" src="'.$sleuths[$key]['link'].'" frameborder="0" allowfullscreen></iframe>
												</div>	
													<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 href="profile.php?username='.$sleuths[$key]['username'].'" target="_BLANK">'.$sleuths[$key]['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 $key3 => $val3)
													{

														$commenter = new User;
														$commenter->set_db($db);
														$commenter->set_user_name($comments[$key3]['username']);
														$commenter->set_profile_name($comments[$key3]['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[$key3]['comment']).'</small>
																	</div>
																</div>
															</div>';
														
													}
													
															
														echo '</div><br>
														<span id="charcount'.$sleuths[$key]['token'].'" class="charcount" 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>';
													
												}else{

													echo '</div><br>
														<span id="charcount'.$sleuths[$key]['token'].'" class="charcount" 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>';

												}												
											
										echo '</div>
										</div>';




Not working on
sleuth.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>True Sleuths | Sleuths</title>
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- Font Awesome -->
	<script src="https://use.fontawesome.com/a4263cdc34.js"></script>
	<!-- Jquery -->
	<script src="lib/jquery.js"></script>
	<!-- bootstrap -->
	<script src="lib/bootstrap/js/bootstrap.min.js"></script>
	<!-- Cart -->
	<!-- Style -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/navbar.css">
	<link rel="stylesheet" href="css/sleuths.css">
</head>
<body>
<script src="js/Like.js"></script>
<script src="js/SleuthComments.js"></script>
<script src="js/SleuthPagination.js"></script>

-----

$sqlCommentCount = $db->prepare('SELECT COUNT(`ID`) FROM `sleuth_comments_36933753` WHERE `sleuthToken` = ?');
										$sqlCommentCount->execute(array($sleuths[$key]['token']));
										$commentCount = $sqlCommentCount->fetchColumn();
										
										// test liked
										
										$sqlLiked = $db->prepare('SELECT `username` FROM `hearts_36933753` WHERE `username` = ? AND `itemType` = ? AND `itemToken` = ?');
										$sqlLiked->execute(array($user->username(), 'sleuth', $sleuths[$key]['token']));
										$likedTest = $sqlLiked->fetch();
										
										if($likedTest == false)
										{
											$liked = false;
											
										}else{
											
											$liked = true;
											
										}
										
										// fetch first three comments
										
										$commentLimit = 3;
										$sleuthToken = $sleuths[$key]['token'];
										
										$sqlComments = $db->prepare('SELECT `ID`, `username`, `comment` FROM `sleuth_comments_36933753` WHERE `sleuthToken` = :sleuthToken ORDER BY `ID` DESC LIMIT :commentLimit');
										$sqlComments->bindParam(':sleuthToken', $sleuthToken, PDO::PARAM_STR);
										$sqlComments->bindParam(':commentLimit', $commentLimit, PDO::PARAM_INT);
										$sqlComments->execute();
										$comments = $sqlComments->fetchAll();
									
										$commentIDs = array();
										
										foreach($comments as $key2 => $val2)
										{
											
											array_push($commentIDs, $comments[$key2]['ID']);
											
										}
										
										if(!empty($comments))
										{
										
											$lowestID = min($commentIDs);
									
										}else{
										
											$lowestID = 0;
											
										}
										
										echo '<div id="sleuth'.$sleuths[$key]['link'].'" class="sleuth-box">
											<div class="sleuth-box-padding">
												<h4><i class="fa fa-link"></i><a> '.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>
												<span><i class="fa fa-heart"></i> <span class="heart-count sm-margin-right">0</span></span>
												<span class="comments-count"><i class="fa fa-comment"></i> <span>0</span></span>
												<span class="comments-count"><i class="fa fa-retweet reposted"></i> <span>0</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'].'" class="comment-box">';
											
												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>';


This post has been edited by JeremyBenson11: 16 August 2017 - 03:39 PM

Was This Post Helpful? 0
  • +
  • -

#5 JeremyBenson11  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 239
  • Joined: 10-January 14

Re: Charcount not working

Posted 16 August 2017 - 03:54 PM

Solved this one. Not only a selector issue on charcount, but one of the simplest kind. Using class instead of id on the span. Should have been id="charcount" . $token

Glad you guys are here to make me think about scrutinizing my code. You may not always have the answer right away, but your inspirational, lol.

This post has been edited by JeremyBenson11: 16 August 2017 - 03:57 PM

Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1842
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Charcount not working

Posted 16 August 2017 - 03:54 PM

Add some console.log statements to the Javascript, or use breakpoints, to figure out what it's doing. Check what it's returning for the various selectors and things like that.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1