Jump to content
dollydollar

Comments box probelm

Recommended Posts

$( document ).ready( function(){
	
	//this will fire once the page has been fully loaded
	
	$( '#comment-post-btn' ).click( function(){
		comment_post_btn_click();
	});
	
});

		function comment_post_btn_click() 
		{
			
		//Text within textarea which the person has entered
		var _comment = $( '#comment-post-text' ).val();
		var _userId = $( '#userId' ).val();
		var _userName = $('#userName').val();
		
		 
		if( _comment.length > 0 && _userId != null )
		{
			
			//procced with ajax callback
			$('.comment-insert-container').css('border' , '1px solid #e1e1e1' );
			
			$.ajax({ 
    type: "POST",
    url: "/ajax/comment_insert.php",
    data: {
     task : "comment_insert",
     userId : _userId,
     comment : _comment 
    },
    error : function( )
    {
     
     console.log("Error: " );
    }
	
	
	,
    success : function(data)
    {
     comment_insert( jQuery.parseJSON(data));
     console.log( "ResponseText: " + data);
    }
	
	
   });
			
			
			
			
			
			console.log( _comment + " UserName: " + _userName + " User Id: " + _userId );
		}
		else
		{
			//the textaarea is empty, lets put a border of red in italics
			//in a second
			$('.comment-insert-cotainer').css('border' , '1px solid #ff0000 ');
			console.log( "The text area was empty" ); 
		}
		
		
		
		
		//remove the text from the text area, ready for another comment
		//possibly
		$( '#comment-post-text' ).val("");

		};
		
		
function comment_insert( data )

{
	var t = '';
	t += '<li class="comment-holder" id="_'+data.comment_id+'">';
	t += '<div class="user-img">';
	t += '<img src="'+data.profile_img+'" class="user-img-pic" />';
	t += '</div>';
	t += '<div class="comment-body">';
	t += '<h3 class="username-field">'+data.userName+'</h3>';
	t += '<div class="comment-text">'+data.comment+'</div>';
	t += '</div>';
	t += '<div class="comment-buttons-holder">';
	t += '<ul>';
	t += '<li class="delete-btn">X</li>';
	t += '</ul>';
	t += '</div>';
	t += '</li>';
	
	$( '.comments-holder-ul' ).prepend( t );
}
Hi all, I was wondering if somoneone could help me out with my problem. I am a complete beginner, so you may have to dumb things down for me lol. But I've been trying to make a comments box for my website and following a tutorial on youtube. I'm upto about lesson 11 but i can't get past it because it doesn't work for me and the guy who posted the tutorial doesn't seem to bother replying to comments.
​Can someone take a look at my code and try help where I am going wrong?
I think the problem maybe that it is a little outdated. I've already changed the ajax part from the tutorial, but it's still not working right. The console is telling me that it is a problem with : comment_insert( jQuery.parseJSON(data));

 

​Thanks.

 

 

Share this post


Link to post
Share on other sites

The console should have a description of the error. What does it say?

Share this post


Link to post
Share on other sites

As a "complete beginner" how much of this code do you understand? Do you also have the Php portion of the code? Have you created the required database?

Share this post


Link to post
Share on other sites

I'm pretty much just following along with the YouTube tutorial as I just need to get it working for my site, so I understand some of it. I've created the php that goes with the above code. The next step is to create the database in the tutorial, but I can't get that far as I can't get the code to work

	<?php 

	if( isset( $_POST['task'] ) && $_POST['task'] == 'comment_insert')
	{
		$userId = (int)$_POST['userId'];
		$comment = addcslashes( str_replace( "\n" , "<br>" , $_POST['comment'] )
		
		$std = new stdClass();
		$std->comment_id = 24;
		$std->userId = $userId;
		$std->comment = $comment;
		$std->userName = "Joe Smith";
		$std->profile_img = "/images/photo.jpg";
		
		echo json_encode( $std );
	}
	else{
		
		header('location: /');
	}

?>

The console is giving the error

SCRIPT1014: Invalid character
​comment_insert.js (44,6)


Share this post


Link to post
Share on other sites

It sounds like the server is returning an error message instead of JSON.

 

Run this line first and see what it shows in the console:

console.log( "ResponseText: " + data);

Share this post


Link to post
Share on other sites

This is the original Ajax callback that was used but it didn't work;


			//procced with ajax callback
			$('.comment-insert-container').css('border' , '1px solid #e1e1e1' );
			
			$.post("/ajax/comment_insert.php" ,
			{
				task : "comment_insert",
				userId : _userId,
				comment : _comment
			}
		)
		.error(
		
			function(  )
				{
				console.log( "Error: " );
				})
		
		.success(
		
			function( data )
			{
				//Success
				//Task: Insert html into the ul / li
				comment_insert( JQuery.parseJSON( data ));
				console.log( "ResponseText: " + data );
				
			}
		);

​So do I replace ( JQuery.parseJSON( data )); with ( $.parseJSON(data) ); ? As I just tried that but I get the same error

Share this post


Link to post
Share on other sites

The original code gave me the following error on the console;

SCRIPT438: Object doesn't support property or method 'error'
comment_insert.js (26,4)

Edited by dollydollar

Share this post


Link to post
Share on other sites

The code seems to work, although I found one line that had errors in the Php code...

<?php 

	if( isset( $_POST['task'] ) && $_POST['task'] == 'comment_insert'){
		$userId = (int)$_POST['userId'];
		$comment = addslashes( str_replace( "\n" , "<br>" , $_POST['comment'] ));
		
		$std = new stdClass();
		$std->comment_id = 24;
		$std->userId = $userId;
		$std->comment = $comment;
		$std->userName = "Joe Smith";
		$std->profile_img = "/images/photo.jpg";
		
		echo json_encode( $std );
                
	}else{
		
		header('location: /');
	}

?>

Share this post


Link to post
Share on other sites

Its just for targeting specific characters, placed within second argument, turning bad stuff to ordinary html encoded text (htmlentities(), htmlspecialchars()) or removing all code tags php, html etc to leave just plain text is another option (strip_tags()).

Share this post


Link to post
Share on other sites

Yeah, those would be better. I'm not sure what addcslashes() was supposed to accomplish?

Share this post


Link to post
Share on other sites

If you mean by the original code provided? its a mistake, it won't work with single argument as it is now, it requires two, it may have been a dropdown menu option, and unfortunately addcslashes() was selected instead of addslashes(), which is easy to do.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×