0

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.

  • first thing to do - check the network tab in dev tools to see what was sent and what returned – mojzis May 11 '13 at 19:34
  • there is some weirdness about your post variable in the js code - its definitely not json as you state. also doesnt seem to contain the actual comment. I think the best to do would be to implement this with forms api and the #ajax['callback'] - no javascript to write :). if you are interested i can paste an example, its pretty straightforward :) – mojzis May 11 '13 at 19:58
  • I agreed with you that Forms API is much simpler than this.But I cant use FORM API in my use case.JQuery API will only help in my case. It would be great if you correct my mistake in this post or provide any better references for submitting data using JSON/JQuery API. – simple user May 12 '13 at 4:21
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.