Comment System - On a Concatenated List!

**juniper747** · 04-17-2012 02:29 PM

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

I have a concatenated list like so:

Code:

$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:

Code:

<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:

Code:

<?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.

**juniper747** · 04-18-2012 02:19 AM

I believe the problem is that in the concatenated list, everything in that code would not have a unique ID for the html tag.... Since the id can only have one relation... So I would have to use a class instead. So how would I go about giving each div in the concatenated list a unique class?

**juniper747** · 04-18-2012 06:05 PM

bump anyone?

**xelawho** · 04-18-2012 06:29 PM

I see that in the original tutorial there are a couple of auto incrementing entries in the database - post_id and com_id. If I understand correctly you could echo those back out to make a unique id for each comment list item.

maybe?

**juniper747** · 04-18-2012 08:32 PM

Wow, thank you! That is a genius idea....

So, I was able to implement it so that the id changes with the post id:

Code:

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

And it works great in the concatenated list... But now I am curious as to how to implement this in the javascript function...

I tried adding the js function inside of the list, so that it gets concatenated each time, but that ended up doing doing something strange. So how would I modify the script function, so far I have:

Code:

<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){
					$("#update<?php echo $post_id; ?>").append(html);
				 	$("#update<?php echo $post_id; ?> 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>

**xelawho** · 04-18-2012 09:01 PM

what does "something strange" mean?

can you give a link to the page?

Thread: Comment System - On a Concatenated List!

Thread Tools

Display

Hybrid View

Comment System - On a Concatenated List!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions