Passing vars/multiple instances

JavaScript
1

I’m building a comment system modeled after Tumblr’s, where each post will have it’s own comments. I’ve modded a system from 9lessons and am having an issue implementing it for multiple instances on a page. Each post has its own ID, so I’m trying to set this up using the post’s ID. It works fine for a single post, but when there’s more than one on a page it doesn’t work.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="noblecount/jquery.NobleCount.js"></script>
<script type="text/javascript">
$(function() {
	$('.submit').click(function() {
	var postID = $('#postID').val();
	var comment = $('#com_comment'+postID).val();
	var dataString = 'com_comment=' + comment + '&postID=' + postID;
	
	if(comment=='') {
		alert('Please enter a comment');
	} else {
		$('#flash'+postID).show();
		$('#flash'+postID).fadeIn(400).html('<img src="/images/ajax-loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Comment...</span>');
		$.ajax({
			type: 'POST',
			url: 'comments_ajax.php',
			data: dataString,
			cache: false,
			success: function(html){
				$('ol#update'+postID).append(html);
				$('ol#update'+postID+'li:last').fadeIn('slow');
				document.getElementById('com_comment'+postID).value='';
				$('#flash'+postID).hide();
			}
		});
	}
	return false;
	});
});
$(document).ready(function(num) {
	$('#com_comment'+num).NobleCount('#replyCount'+num,{max_chars: 255,on_negative: 'go_red',on_positive: 'go_green',block_negative: true});
});
function ShowHide(num){
	$('#comment'+num).animate({'height':'toggle'});
}
</script>
</head>
<body>
<div class="comments">
	<?php $num = 1; ?>
	<a onclick="ShowHide(<?php echo $num; ?>); return false;" href="#">reply</a>
	<div id="comment<?php echo $num; ?>">
		<ol id="update<?php echo $num; ?>" class="timeline">
			<?php
				//$post_id value comes from the POSTS table
				$sql = mysql_query("SELECT * FROM posts_comments WHERE com_post_id = 1");
				while($row = mysql_fetch_array($sql)) {
					echo '<li class="box"><img src="/" border="0" alt="" width="16" height="16" class="avi16" /> '.$row['com_comment'].'</li>';
				}
			?>
		</ol>
		<div id="flash<?php echo $num; ?>" align="left"><!-- loader --></div>
		<form action="#" method="post">
			<input type="hidden" name="postID" id="postID" value="<?php echo $num; ?>" />
			<textarea name="com_comment<?php echo $num; ?>" id="com_comment<?php echo $num; ?>" class="taReply"></textarea><br />
			<input type="submit" value="Reply" class="submit buttonReply" /> <div class="divCount"><span id="replyCount<?php echo $num; ?>">255</span> max</div>
		</form>
	</div>
</div>
</body>
</html>
2

Thanks for your help. Unfortunately the form no longer submits with that code. :frowning:

3

I figured it out. I changed this

var postID = $(‘#postID’).val();

to this

var postID = $(this).attr(‘rel’);

4

Hi,

when you are trying to submit data you are using “#postID”, id of an element needs to be unique on page and when you are searching by #postID it will return only first one on page this is reason why it’s working when one is on page.

Now what you need to do is to add attributes to submit button so you can search input by those parameters, example


<form action="#" method="post">
            <input type="hidden" name="postID-<?php echo $num; ?>" id="postID-<?php echo $num; ?>" value="<?php echo $num; ?>" />
            <textarea name="com_comment<?php echo $num; ?>" id="com_comment<?php echo $num; ?>" class="taReply"></textarea><br />
            <input type="submit" value="Reply" class="submit buttonReply" rel="<?php echo $num; ?>" /> <div class="divCount"><span id="replyCount<?php echo $num; ?>">255</span> max</div>
        </form>

then you can search like this


$(function() {
    $('.submit').click(function() {
    var postID = $('#postID-'.$(this).attr('rel')).val();
    var comment = $('#com_comment'+postID).val();
    var dataString = 'com_comment=' + comment + '&postID=' + postID;
   
    if(comment=='') {
        alert('Please enter a comment');
    } else {
        $('#flash'+postID).show();
        $('#flash'+postID).fadeIn(400).html('<img src="/images/ajax-loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Comment...</span>');
        $.ajax({
            type: 'POST',
            url: 'comments_ajax.php',
            data: dataString,
            cache: false,
            success: function(html){
                $('ol#update'+postID).append(html);
                $('ol#update'+postID+'li:last').fadeIn('slow');
                document.getElementById('com_comment'+postID).value='';
                $('#flash'+postID).hide();
            }
        });
    }
    return false;
    });
});

i hope this helps