jQuery is not working for inserting data

Question

I want to save data from a textbox on a button click. I am using jQuery AJAX for this task. Please note that I made this tags inside theme function.

function theme_user_post_block($vars) {
  $themeUserCommentInput = '';
  $themeUserCommentInput .= '<textarea id="txt_1" rows="1" cols="50"></textarea>';
  $themeUserCommentInput .= '<input type="submit" value="Post Comment" align="center" class="btnPostComment" id ="btn_1" / >';
  return $themeUserCommentInput;
}

This shows me the textbox and the button inside the page. This is my JavaScript code.

(function($) {
  Drupal.behaviors.PostComment = {
    attach: function(context, settings) {
      $('.btnPostComment', context).click(function(event) {
        var post = "&newcomment=Comment1&logid=log1";
        jQuery.ajax({
          url: 'postcomment',
          type: 'POST',
          dataType: 'json',
          data: post,
          success: function(data) {
            alert(data);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            alert(textStatus + errorThrown);
          }
        });
      });
    }
  }
})(jQuery);

Next I create a custom page as follows.

function postcomment_menu() {
  $items = array();
  $items['postcomment'] = array(
      'title' => t(''),
      'type' => MENU_CALLBACK,
      'page callback' => 'user_comment_post',
      'access arguments' => array('access content'),
  );
  return $items;
}

function user_comment_post() {
  global $user;
  $cid = db_insert('user_comment')
          ->fields(array(
              'comment_user_id' => $user->uid,
              'reference_id' => $_POST['logid'],
              'comment_desc' => $_POST['newcomment'],
              'createdon' => REQUEST_TIME,
          ))
          ->execute();
  if ($cid != 0) {
    //GetUserComments($i);
    drupal_json_output("success");
  }
}

So I have done all things that is required for jQuery+Ajax Submit functionality. When I press "Post Comment" button it gives me error in alert says "errorundefined". The alert shows as a result of error inside the jQuery.AJAX function. Also the custom menu callback is also not getting called.

Answer 1

I added 'async': false to the jQuery.ajax call as follows.

jQuery.ajax({
  url: 'postcomment',
  type: 'POST',
  dataType: 'json',
  'async': false, 
  data: post,
  success: function(data) {
    alert(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    alert(textStatus + errorThrown);
  }
});

The code is now working.