www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Comment System - On a Concatenated List!

  1. #1
    Join Date
    Apr 2012
    Posts
    21

    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
    Join Date
    Apr 2012
    Posts
    21
    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?

  3. #3
    Join Date
    Apr 2012
    Posts
    21
    bump anyone?

  4. #4
    Join Date
    Nov 2010
    Posts
    1,043
    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?

  5. #5
    Join Date
    Apr 2012
    Posts
    21
    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>

  6. #6
    Join Date
    Nov 2010
    Posts
    1,043
    what does "something strange" mean?

    can you give a link to the page?

  7. #7
    Join Date
    Apr 2012
    Posts
    21
    Well, sorry, I don't have a live site yet. I am working off of localhost on my computer. But what was happening when I put the script function inside the concatenation, is that I would get like 5 popup windows saying "Please enter a valid comment" (since my_list only alllows 5 items per page), then after I clicked "ok" 5 times, it put an empty comment under each story, and it increased as you scrolled down the page. So the first story had 1 extra comment, the 2nd story had 2 extra comments, the 3rd 3 etc...

    So that is when I placed the js function within the $my_list concatentation. Do you recommend, that I NOT do this, and simply have the js function in the <head> of the html? If so, how do I represent the <ol id="update' . $post_id . '" class="timeline"></ol> variable in the js?

  8. #8
    Join Date
    Apr 2012
    Posts
    21
    Also, I feel like I should also add the unique post_id to the submit button, or the .submit class... because how would the function know which story the comment is being submitted for? Right?

  9. #9
    Join Date
    Nov 2010
    Posts
    1,043
    Quote Originally Posted by juniper747 View Post
    Also, I feel like I should also add the unique post_id to the submit button, or the .submit class... because how would the function know which story the comment is being submitted for? Right?
    exactly. which is why it would be good to see your page, or at least not have to imagine it. I was thinking that you had a "comment on this post" button for each post. But if you don't, how do people tell the page which post they are commenting on?

  10. #10
    Join Date
    Apr 2012
    Posts
    21
    I was thinking that you had a "comment on this post" button for each post.
    Yes, I do have a submit button for each post. Sorry I can't really show you my page, but if you could imagine, it's a bit like the facebook commenting system. Where you can comment on anyone's post in the live feed, and the comment would update live.

    I decided not to place the js function inside the concatenation, since I think it would be unnecessary to repeat the function on the page for each post. So instread, I placed it in the <head> of the html, and so far it looks like this:

    As you see, I just echoed the unique $post_id variable to the end of the .submit class as well as to the end of the #update id (to make it more unique).

    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>
    So what is happening now is, basically nothing. When I enter a comment and click submit next to any of the posts, the page just reloads with a "#" that appears on the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct $post_id... but I think it's stopping at the js function.

    I think that maybe, I need to add var post_id to the beginning of the js function, so that it knows which one to run... I just am not sure how to do that (convert the php variable to a js variable).

  11. #11
    Join Date
    Nov 2010
    Posts
    1,043
    I think you're right - you only need one function but the way that I see it is that what you need to do is that when you are creating the submit button that has to be able to pass arguments to the function telling it that you want to submit the comment from its textarea and append it to its li.

    I don't know much jQuery, but here's how you would do something similar in plain javascript - you can ignore all the createElement stuff - that's what your ajax call is doing. Have a look at how the button passes unique arguments to the postComment function...

    Code:
    <!doctype html>
       <html>
          <head>
          
          </head>
          <body>
    <input type="button" value="make new post" onclick="newPost()"/>    
    
    <ol id="posts"></ol>
    <script type="text/javascript">
    	  count=1
    	  
           function newPost(){
    	   var item=document.createElement("li");
    	   item.id="post"+count;
    	   var text=document.createTextNode("some stuff in post "+count++);
    	   item.appendChild(text);
    	   item.appendChild(document.createElement("br"));
    	   var txt=document.createElement("textarea");
    	   txt.id="txt"+count;
    	   item.appendChild(txt);
    	   item.appendChild(document.createElement("br"));
    	   var butt=document.createElement("input");
    	   butt.type="button";
    	   butt.value="comment";
    	   butt.onclick=function(){postComment(item.id,txt.id)}
    	   theol=document.getElementById("posts");
    	   item.appendChild(butt);
    	   item.appendChild(document.createElement("br"));
    	   theol.appendChild(item);
                  }
    			  
    		function postComment(post,comm){
    		var thecomm=document.createTextNode(document.getElementById(comm).value);
    		document.getElementById(post).appendChild(thecomm);
    		document.getElementById(post).appendChild(document.createElement("br"));
    		}
          </script>	
    	</body>
       </html>

  12. #12
    Join Date
    Apr 2012
    Posts
    21
    Ok, I am a little confused... the script you gave me looks like it's using a counter; the whole point of what I had was to use the unique post_id as the identifier for the js function...

    Sorry but I'm a little new to javascript, so sorry if what you sent me just went completely over my head, but I've been trying to decipher it all day! Also, would it be better for me to use type="button" instead of type="submit"?

    If you could shed a bit more light on this that would truly be great. I have posted the same problem on like 5 different formums, and your the only one who responded with some hope for me! thanks,

    june

  13. #13
    Join Date
    Nov 2010
    Posts
    1,043
    haha. sorry to confuse. the script I gave was an example only really. most of the first half was written to replicate the AJAX request and what the database does, so you can ignore it...

    but the general idea stands... the onclick for the button should be able to distinguish which text area you want to upload text from and which comment you want to attach that text to.

    sorry to hear I'm your only hope - I know next to nothing about jQuery and php and very little about AJAX

  14. #14
    Join Date
    Apr 2012
    Posts
    21
    hey... so I kind of gave in, and went with a less elegant solution. But the good news is that it works, and it's pretty fast.

    The only thing though, I had to repeat (copy & paste) the js function 5 times in the html <head>, and only allow for 5 posts per page. Which is fine. But, since you know about javascript... maybe you can help me replace the following, with only one function that includes an iteration counter that changes the variables automatically?

    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.

    Code:
    <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>
    <script type="text/javascript">
    $(function() {
    	$(".submit3").click(function() {
    		var post_id = $("#post_id3").val();
    		var member_id = $("#member_id").val();
    		var comment = $("#comment3").val();
    		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
    		if(comment=='') {
    			alert('Please enter a valid comment 3');
    		} else {
    			$("#flash3").show();
    			$("#flash3").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
    			$.ajax({
    				type: "POST",
    	  			url: "commentajax.php",
    	   			data: dataString,
    	  			cache: false,
    	  			success: function(html){
    					$("li#update3").append(html);
    				 	$("li#update3 li:last").fadeIn("3600");
    					$("#flash3").hide();
    					document.getElementById('post_id3').value='';
    	   				document.getElementById('member_id').value='';
    					document.getElementById('comment3').value='';
    					$("#comment3").focus();
    	  				$("#flash3").hide();
    	  			}
    	 		});
    		}
    		return false;
    	});
    });
    </script>
    <script type="text/javascript">
    $(function() {
    	$(".submit4").click(function() {
    		var post_id = $("#post_id4").val();
    		var member_id = $("#member_id").val();
    		var comment = $("#comment4").val();
    		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
    		if(comment=='') {
    			alert('Please enter a valid comment 4');
    		} else {
    			$("#flash4").show();
    			$("#flash4").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
    			$.ajax({
    				type: "POST",
    	  			url: "commentajax.php",
    	   			data: dataString,
    	  			cache: false,
    	  			success: function(html){
    					$("li#update4").append(html);
    				 	$("li#update4 li:last").fadeIn("3600");
    					$("#flash3").hide();
    					document.getElementById('post_id4').value='';
    	   				document.getElementById('member_id').value='';
    					document.getElementById('comment4').value='';
    					$("#comment4").focus();
    	  				$("#flash4").hide();
    	  			}
    	 		});
    		}
    		return false;
    	});
    });
    </script>
    <script type="text/javascript">
    $(function() {
    	$(".submit5").click(function() {
    		var post_id = $("#post_id5").val();
    		var member_id = $("#member_id").val();
    		var comment = $("#comment5").val();
    		var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;	
    		if(comment=='') {
    			alert('Please enter a valid comment 5');
    		} else {
    			$("#flash5").show();
    			$("#flash5").fadeIn(2400).html('<span class="loading">Loading Comment...</span>');
    			$.ajax({
    				type: "POST",
    	  			url: "commentajax.php",
    	   			data: dataString,
    	  			cache: false,
    	  			success: function(html){
    					$("li#update5").append(html);
    				 	$("li#update5 li:last").fadeIn("3600");
    					$("#flash5").hide();
    					document.getElementById('post_id5').value='';
    	   				document.getElementById('member_id').value='';
    					document.getElementById('comment5').value='';
    					$("#comment5").focus();
    	  				$("#flash5").hide();
    	  			}
    	 		});
    		}
    		return false;
    	});
    });
    </script>

  15. #15
    Join Date
    Nov 2010
    Posts
    1,043
    I think it may be more complicated than that. can you show what your html looks like for the 5 posts?

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles