Comments box probelm

[dollydollar]

$( 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.

 

 

[Ingolme]

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

[davej]

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?

[dollydollar]

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)

[Ingolme]

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);

[dsonesuk]

You are using '$' as ref to jquery, not jQuery

 

$.parseJSON(data)

[dollydollar]

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

[dollydollar]

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 August 22, 2016 by dollydollar

[davej]

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: /');
	}

?>

[dollydollar]

Whatever that error was in my php, it seems to have solved the problem. Thank you very much for your help

[dsonesuk]

addcslashes() originally, addslashes() now.

 

http://php.net/manual/en/function.addcslashes.php

Edited August 22, 2016 by dsonesuk

[davej]

Is addcslashes() adequate to prevent bad stuff from getting inserted?

[dsonesuk]

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()).

[davej]

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

[dsonesuk]

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.