Space and special characters problems on post

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

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

Answer 2

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