Space and special characters problems on post - php

Question

I got a problem with blank space and special characters during a POST action using this AJAX function:
function comments(id,postId,user_id) {
var user_comments = encodeURIComponent($("#commentsId_"+id).val());
if(user_comments!=''){
var img = $("#img_"+id).val();
var username = "<?php echo $this->session->userdata('username'); ?>"
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>social/userscomment/" +user_id+"/"+postId+"/"+user_comments,
data:{ user_comments : user_comments},
success: function(data) {
$("#commentsId_"+id).val('');
var $sparkLines = $('.comments_body_'+id);
$("#comments_add_"+id).append('<div id="id' + ($sparkLines.length + 1) + '" class="comments_body_"'+id+'><div class="feed-element comments_body_"'+id+'><a class="pull-left"><strong>'+username+' <i class="fa fa-comment-o"></i></strong></a><div class="media-body">'+user_comments+'<br></div><div class="col-lg-12"><a id="span_'+postId+'" onclick="callajaxcommcool('+postId+')" class="btn btn-xs btn-white"><i class="fa fa-star"></i><span id="span1_'+postId+'" style="display:none;">1</span> Cool </a></div></div></div></div>');
}
});
}
}
The PHP controller:
public function userscomment($comment_id,$post_id,$user_comments){
$this->load->model('comments');
$user_comments = utf8_decode(trim(mysql_real_escape_string($_POST['user_comments'])));
if(!empty($user_comments)){
$data = array("user_id" => $this->session->userdata('user_id'),
"comment_user_id" => $comment_id,
"comments" => $user_comments,
"post_id" => $post_id,
"username" => $this->session->userdata('username')
);
$this->comments->insertComments($data);
//logged user
$userRow = $this->register->get_login($this->session->userdata('user_id'));
redirect('social/userprofile/'.$userRow[0]['username']);
}
}
When an user post a comment like: "a b c d" the results showed in the view is: a%20b%20c%20d, if an user try to wrote a special characters like € i got this results %E2%82%AC
How can i prevent this problem?
EDIT:
Solved the problem was in the AJAX success function, i miss the
'+decodeURIComponent(user_comments)+'
success: function(data) {
$("#commentsId_"+id).val('');
var $sparkLines = $('.comments_body_'+id);
$("#comments_add_"+id).append('<div id="id' + ($sparkLines.length + 1) + '" class="comments_body_"'+id+'><div class="feed-element comments_body_"'+id+'><a class="pull-left"><strong>'+username+' <i class="fa fa-comment-o"></i></strong></a><div class="media-body">'+decodeURIComponent(user_comments)+'<br></div><div class="col-lg-12"><a id="span_'+postId+'" onclick="callajaxcommcool('+postId+')" class="btn btn-xs btn-white"><i class="fa fa-star"></i><span id="span1_'+postId+'" style="display:none;">1</span> Cool </a></div></div></div></div>');}
Edit2: I've performed the code because encodeURIComponent don't allow this characters ~!*()'" , i've used replace functionality to bypass this limit, hope can be helpful.
function subcomments(id,postId,user_id) {
var user_comments = encodeURIComponent($("#commentsId_"+id).val()).replace(/\-/g, "%2D").replace(/\_/g, "%5F").replace(/\./g, "%2E").replace(/\!/g, "%21").replace(/\~/g, "%7E").replace(/\*/g, "%2A").replace(/\'/g, "%27").replace(/\(/g, "%28").replace(/\)/g, "%29");
if(user_comments!=''){
var img = $("#img_"+id).val();
var username = "<?php echo $this->session->userdata('username'); ?>"
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>social/userscommentcool/" +user_id+"/"+postId+"/"+user_comments,
data:{ user_comments : user_comments },
success: function(data) {
$("#commentsId_"+id).val('');
var $sparkLines = $('.comments_body_'+id);
$("#comments_add_"+id).append('<div id="id' + ($sparkLines.length + 1) + '" class="comments_body_"'+id+'><div class="feed-element comments_body_"'+id+'><a class="pull-left"><strong>'+username+' <i class="fa fa-comment-o"></i></strong></a><div class="media-body">'+decodeURIComponent(user_comments)+'<br></div><div class="col-lg-12"><a id="span_'+postId+'" onclick="callajaxcommcool('+postId+')" class="btn btn-xs btn-white"><i class="fa fa-star"></i><span id="span1_'+postId+'" style="display:none;">1</span> Cool </a></div></div></div></div>');
}
});
}
}

Answer 1

Don't use encodeURIComponent when you pass the parameter in an object. You only need that if you're constructing the URL-encoded string yourself. jQuery automatically encodes the parameters in the object, and the result is that it's being encoded twice. So just do:
var user_comments = $("#commentsId_"+id).val();

Answer 2

You should use javascript decodeURI("a%20b%20c%20d") convert it to "a b c d" again in your view.
Using php:
In your view, in the line that you put the encoded value, just use it:
echo urldecode("your_encoded_value");