Comment System - On a Concatenated List!
Results 1 to 8 of 8

Thread: Comment System - On a Concatenated List!

  1. #1
    Senior Member
    Join Date
    Apr 2011
    Posts
    112

    Comment System - On a Concatenated List!

    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.

  2. #2
    Senior Member Derokorian's Avatar
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    1,783
    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.
    Sadly, nobody codes for anyone on this forum. People taste your dishes and tell you what is missing, but they don't cook for you. ~anoopmail
    I'd rather be a comma, then a full stop.
    User Authentication in PHP with MySQLi - Don't forget to mark threads resolved - MySQL(i) warning

  3. #3
    Senior Member
    Join Date
    Apr 2011
    Posts
    112
    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?

  4. #4
    Senior Member Derokorian's Avatar
    Join Date
    Apr 2011
    Location
    Denver
    Posts
    1,783
    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().
    Sadly, nobody codes for anyone on this forum. People taste your dishes and tell you what is missing, but they don't cook for you. ~anoopmail
    I'd rather be a comma, then a full stop.
    User Authentication in PHP with MySQLi - Don't forget to mark threads resolved - MySQL(i) warning

  5. #5
    Senior Member
    Join Date
    Apr 2011
    Posts
    112
    Ok, thanks... So something along the lines of changing:

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

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

  6. #6
    Senior Member
    Join Date
    Apr 2011
    Posts
    112
    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:

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

    Code:
    <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>
    Last edited by juniper747; 04-19-2012 at 11:33 AM.

  7. #7
    Pedantic Curmudgeon Weedpacket's Avatar
    Join Date
    Aug 2002
    Location
    General Systems Vehicle "Thrilled To Be Here"
    Posts
    21,885
    Quote Originally Posted by juniper747
    (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.
    THERE IS AS YET INSUFFICIENT DATA FOR A MEANINGFUL ANSWER
    FAQs! FAQs! FAQs! Most forums have them!
    Search - Debugging 101 - Collected Solutions - General Guidelines - Getting help at all

  8. #8
    Senior Member
    Join Date
    Apr 2011
    Posts
    112
    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).

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •