Dilemma with a jQuery AJAX request, not working

Question

Basically I am trying to post a comment via AJAX and then load the new comment into the HTML. I am having a problem with what I think is my AJAX success function. The data gets added to the database fine, but I still get an error "Sorry, unexpected error. Please try again later." as set inside the success function itself.

JS:

function newComment(event) {        

    event.preventDefault();

    //Get the data from all the fields
    var comment = $('textarea');
    var product_id = $('input[name=product_id]');

    var form_data = {
        comment : comment.val(),
        product_id : product_id.val()
    };

    //Simple validation to make sure user entered something
    if (comment.val()=='') {
        alert('Comment cannot be blank!');
        return false;
    }


    //show the loading sign
    $('#loading').show();

    //start the ajax
    $.ajax({
        //this is the php file that processes the data and send mail
        url: "main/ajax_comment", 

        //GET method is used
        type: "POST",

        //pass the data         
        data: form_data,

        //success
        success: function (c) {              
            //check the status
            if (c.status==1) {           
                $('Posted By: ' + c.username + '<br> Body: ' + c.body + '<br> Posted On: ' + c.date + '<hr>').appendTo('#new_comment');

                $('#loading').hide();

                $('#new_comment').slideDown();

            //0/false (send mail failed)
            } else alert('Sorry, unexpected error. Please try again later.');               
        }
    });
}

PHP:

public function ajax_comment()
{
    sleep(4);
        $this->main_model->add_comment($this->session->userdata('user_id'), $this->input->post('product_id'), $this->input->post('comment'));
        $i = $this->auth_model->get_data_id($this->session->userdata('user_id'), 'user');
        $return = array(
            'status' => '1',
            'username' => $i->username,
            'body' => $this->input->post('comment'),
            'date' => time()
            );
        echo json_encode($return);
}

HTML:

<form action="<?php echo base_url()."main/comment"; ?>" method="post">
<input type="hidden" name="product_id" value="<?php echo $p->u_product_id; ?>">
<textarea name="new_comment"></textarea><br>
<input type="submit" name="submit_comment" id="submit_comment" value="Post">
<div id="loading" style="display: none;">
    <img src="<?php echo base_url()."assets/img/load.gif"; ?>">
</div>

Am I doing something wrong?

Answer 1

You seem to be sending json back to the success function so you should add a dataType:

$.ajax({
    //this is the php file that processes the data and send mail
    url: "main/ajax_comment", 

    //GET method is used
    type: "POST",

    //pass the data         
    data: form_data,

    // data type
    dataType: 'json',       /* added */

    //success
    ...

If that does not solve the problem, check what your c variable contains, perhaps some php warnings were echoed as well, invalidating the returned json.

Answer 2

Possible issues or solutions:

(1) Instead of using input type submit , use type button and remove the form action value, also the method cause you are specifying that in the $.ajax request.

(2) Don't forget to include the dataType argument in your $.ajax request like this:

  $.ajax({
        url: "main/ajax_comment", 
        type: "POST",       
        data: form_data,
        dateType: "json",
        success: function (c) { 
  ...

(3) Check the returned data from PHP doing console.log in your success function and check the status and other values like this:

success: function (c) { 
   console.log(c);
   console.log(c.status);
...

(4) Make sure your javascript and json objects are well composed.