Comment System - On a Concatenated List!

juniper747 · Apr 17, 2012

I am using a comment system from (which I modified slightly):
http://www.9lessons.info/2009/09/comment-system-database-with-jquery.html

I have a concatenated list like so:

$my_list .= '
<div>
' . $user_story . '
</div>
<div class="floatleft">
' . $commenter_name . '
</div>
<form action="#" method="post">
	<textarea name="comment" id="comment"></textarea>
	<input type="hidden" name="story_id"  id="story_id" value=' . $story_id . ' />
	<input type="hidden" name="member_id" id="member_id" value=' . $member_id . ' />
	<input type="submit" class="submit" value="Comment " />
</form>
<div id="main">
	<ol  id="update" class="timeline"></ol>
	<div id="flash" align="left"  ></div>
	<li class="box"></li>
</div>

And here is the html/script:

<head>
<script type="text/javascript">
$(function() {
	$(".submit").click(function() {
		var story_id = $("#story_id").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment").val();
		var dataString = 'story_id='+ story_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment');
		} else {
			$("#flash").show();
			$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("ol#update").append(html);
				 	$("ol#update li:last").fadeIn("slow");
					document.getElementById('story_id').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment').value='';
					$("#comment").focus();
	  				$("#flash").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
</head>
<body>
<?php echo $my_list; ?>

The commentajax.php is basically:

<?php
include_once (database...);
if($_POST) {
	$story_id = $_POST['story_id'];
	$member_id = $_POST['member_id'];
	$comment = $_POST['comment'];

$lowercase = strtolower($email);
$image = md5( $lowercase );

mysql_query("INSERT INTO database........);
}
?>
<li class="box">
	<?php echo $comment; ?>
</li>

So here is what's happening:

Everything visually appears in the right place. However, if I comment in any of the text areas other than the first in the list, I get the alert(Please enter a valid comment). If I enter a comment on the first post in the list, it then appears in ALL of the posts in the list, instead of just the one post.

What I want to happen:

Each comment to appear next to the appropriate post/story.

Derokorian · Apr 17, 2012

Looking at the list in the first block of code: Is this list repeated as is for each post on the page (aside from the variable values changing)? If so then everything in that code would not have a unique ID for the html tag.

juniper747 · Apr 17, 2012

Yes everything repeats as is EXCEPT for the variables changing, the variables that change are: $story_id and $member_id, and obvious the comment, which I need to add a variable for after getting stored in the database...

So, how would I give a unique id for the html tag?

Derokorian · Apr 17, 2012

you could add a counter to each block, or don't use an id use a class instead (referenced in jQuery like $('.className') ). Then for your submit function, instead of hard coding id's (which will only pick up the first occurrence if it happens to do anything in that browser, sometimes it doesn't work at all with multiple id's matching) you could instead choose the children of the same parent (aka inputs in the same form). Have a look at $.parent() and $.children().

juniper747 · Apr 18, 2012

Ok, thanks... So something along the lines of changing:

<div id="main">
	<ol  id="update" class="timeline"></ol>
	<div id="flash" align="left"  ></div>
	<li class="box"></li>
</div>

To:

<div id="main">
	<ol  class="update" class="timeline"></ol>
	<div class="flash" align="left"  ></div>
	<li class="box"></li>
</div>

juniper747 · Apr 19, 2012

Hi Derokorian, I have modified my code. I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so:

$my_list .= '
	<form action="#" method="post">
		<textarea class="commentbox" name="comment" id="comment"></textarea>
		<input type="hidden" name="post_id"  id="post_id" value=' . $post_id . ' />
		<input type="hidden" name="member_id" id="member_id" value=' . $id . ' />
		<input type="submit" class="submit' . $post_id . '" value="Comment " />
	</form>
	' . $comment_list . ' // existing comments queried from the db
	<ol id="update' . $post_id . '"></ol> // jquery-ed live update comments
';
?>

Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id).

So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever i click submit nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function.

<head>
<script type="text/javascript">
$(function() {
	$(".submit<?php echo $post_id; ?>").click(function() {
		var post_id = $("#post_id").val();  // this is the unique id for each story, in a hidden input
		var member_id = $("#member_id").val();  // this is a member for the commenter, in a hidden input
		var comment = $("#comment").val();  // this is the comment from the input box
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment');
		} else {
			$("#flash").show();
			$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("#update<?php echo $post_id; ?>").append(html);
				 	$("#update<?php echo $post_id; ?> li:last").fadeIn("slow");
					document.getElementById('post_id').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment').value='';
					$("#comment").focus();
	  				$("#flash").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
</head>

Weedpacket · Apr 20, 2012

juniper747 wrote:
(i.e. each submit button gets a unique class and each update div gets a unique id).

All the other ids have to be unique as well.

juniper747 · Apr 20, 2012

I got it working great, its pretty fast too. But I ended up going with a less elegant route, since I couldn't figure out the jquery stuff... So I used the iteration on the javascript and the html/php. But I had to repeat (copy & paste) the js function 5 times in the html <head>, and only allow for 5 posts per page.

Here's what I ended with (below), if you think this can be easily turned into 1 function with iteration counter, please let me know how. I already have the iteration working on the php end, but, I just couldn't figure out how to do it in javascript.

Here's the html, it gets concatenated 5 times (due to a page limit I have set up).

$h=1;
$i=1;
$j=1;
$k=1;
$l=1;

// the html is generated within the php here

$my_posts .= '  // this concatenates the list

<div class="blockdetails">
	<div class="my_post">
		' . $story_post . ' // this is where the posted story goes
	</div>
	<div class="comments">
		' . $commentername . ' ' . $comment . '  // this is where "old" comments get listed
		<li id="update' . $k++ . '"></li> // this is where live comments go
		<div class="linebreak">
			<form action="#" method="post">
				<textarea class="commentbox" name="comment" id="comment' . $h++ . '"></textarea>
				<input type="hidden" name="d_id"  id="d_id' . $i++ . '" value=' . $d_id . ' />
				<input type="hidden" name="mem_id" id="mem_id" value=' . $id . ' />
				<input type="submit" class="submit' . $j++ . '" value="Comment" />
			</form>
		</div>
			<div id="flash' . $l++ . '"></div> // don't worry about the #flash part
		</div>
	</div>
</div>
';

// heres the actual html
<html>
<head>
 // the current 5 scripts go here
<script type="text/javascript">
$(function() {
	$(".submit1").click(function() {
		var post_id = $("#post_id1").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment1").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 1');
		} else {
			$("#flash1").show();
			$("#flash1").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update1").append(html);
				 	$("li#update1 li:last").fadeIn("3600");
					$("#flash1").hide();
					document.getElementById('post_id1').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment1').value='';
					$("#comment1").focus();
	  				$("#flash1").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>
<script type="text/javascript">
$(function() {
	$(".submit2").click(function() {
		var post_id = $("#post_id2").val();
		var member_id = $("#member_id").val();
		var comment = $("#comment2").val();
		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
		if(comment=='') {
			alert('Please enter a valid comment 2');
		} else {
			$("#flash2").show();
			$("#flash2").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
			$.ajax({
				type: "POST",
	  			url: "commentajax.php",
	   			data: dataString,
	  			cache: false,
	  			success: function(html){
					$("li#update2").append(html);
				 	$("li#update2 li:last").fadeIn("3600");
					$("#flash2").hide();
					document.getElementById('post_id2').value='';
	   				document.getElementById('member_id').value='';
					document.getElementById('comment2').value='';
					$("#comment2").focus();
	  				$("#flash2").hide();
	  			}
	 		});
		}
		return false;
	});
});
</script>

// etc... 3, 4, 5

</head>
<body>
     <?php echo $my_posts; ?>
</body>

Comment System - On a Concatenated List!

Jjuniper747

DDerokorian

Jjuniper747

DDerokorian

Jjuniper747

Jjuniper747

Weedpacket

Jjuniper747