dev.enekoalonso.com » ajax http://dev.enekoalonso.com having fun with code Sat, 31 Jul 2010 05:51:28 +0000 en hourly 1 Ajax comments in Drupal 5: How I made it – Part III http://dev.enekoalonso.com/2008/12/13/ajax-comments-in-drupal-5-how-i-made-it-part-iii/ http://dev.enekoalonso.com/2008/12/13/ajax-comments-in-drupal-5-how-i-made-it-part-iii/#comments Sat, 13 Dec 2008 20:42:11 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=128 In Ajax comments in Drupal 5: How I made it parts I and II we saw the code needed on the back-end. Now, let’s see what goes on the client side: the Javascript.

Submitting the comment with an ajax request

Basically, to add a comment we need the node id (nid) and the comment text. The code in the back-end will handle the user info and permissions. The first thing we do is find the comment form and the submit button. Then we hook the click event on the submit button.

  1.   var commentForm = jQuery('form#comment-form');
  2.   if (!commentForm.length) return;
  3.   var submitBtn = jQuery('#edit-submit');
  4.   if (!submitBtn.length) return;
  5.  
  6.   submitBtn.click(function(ev)
  7.   {
  8.     // …
  9.   }

When the user clicks the submit button, we get the node id (we could have done on domready) and the comment text. If the comment is empty, we don’t do anything, so the comment will be submitted the standard way and Drupal will fail the comment form validation.

  1.     // Get Node Id
  2.     var nid = jQuery('#node-nid').text();
  3.     if (!nid) return true; // Do nothing…
  4.     if (parseInt(nid) <= 0) return true;
  5.  
  6.     // Get Comment Text
  7.     var text = jQuery('#edit-comment').val();
  8.     if (!text) return true; // Let Drupal validate the form

Since we don’t want to get back just the comment added but all the new comments added by any user on this node, we want to pass the last comment id on screen.

  1.     // Get last comment Id
  2.     var lastComment = jQuery('div.comment:last');
  3.     var lastCommentId = (lastComment.length)? lastComment.id().split('-')[1] : 0;

Due to my limited knowledge of jQuery at the time, I used the load function for the ajax request. The problem with this function is that, from what I know, it only works on elements already included in the DOM. So before the request, I had to create a container for the new comments. The point of insertion will differ if the page already has comments or not:

  1.     // We got both nid and text. Let's create the comment holder
  2.     var comment = jQuery(document.createElement('div'));
  3.     comment.hide();
  4.     if (lastComment.length) {
  5.       lastComment.after(comment);
  6.     } else {
  7.       comment.insertBefore(jQuery('div.box'));
  8.     }

Finally, the load request:

  1.     // Ajax submit/load
  2.     comment.load('/add/comment',
  3.       {  'nid': nid,
  4.         'text': text,
  5.         'lastcid': lastCommentId
  6.       },
  7.       function(responseText, textStatus, XMLHttpRequest) {
  8.         if (textStatus == 'success' && responseText) {
  9.           ajax_insert_comment(comment);
  10.         } else {
  11.           comment.remove();
  12.           alert("Error: No se pudo enviar el comentario");
  13.         }
  14.       }
  15.     );

If the request failed, the container was removed. If the request succeeded, the new comments were added to the page:

  1. ajax_insert_comment = function(comment) {
  2.   // Insert new comments
  3.   comment.show();
  4. };

And that was it! Ajax comments in Drupal working like a charm.

Adding/removing the “new” indicator

Now that I had my Ajax comments working I wanted them to look better. For example, I wanted the new added comments to have the “new” indicator, while at the same time I wanted to remove the indicator from the comments already on the screen. On ajax_insert_comment:

  1.   // Clear 'new' from previous comments
  2.   jQuery('div.comment').find('span.new').remove();
  3.   // Add 'new' indicator
  4.   var newcomment = jQuery(document.createElement('span'));
  5.   newcomment.addClass('new').html('new');
  6.   newcomment.insertBefore(comment.find('div.comment-author'));

And many other tweaks like that.

The code

Here is the whole code for ajax comment submission I currently use:

  1. ajax_comments = function() {
  2.   var commentForm = jQuery('form#comment-form');
  3.   if (!commentForm.length) return;
  4.   var submitBtn = jQuery('#edit-submit');
  5.   if (!submitBtn.length) return;
  6.  
  7.   submitBtn.val('Enviar comentario');
  8.   submitBtn.click(function(ev)
  9.   {
  10.     // Disable submit button
  11.     submitBtn.val('Enviando…').attr("disabled","disabled");
  12.  
  13.     // Clear the 'edit' link from previous comments
  14.     jQuery('li.edit-comment-link').remove();
  15.  
  16.     // Get Node Id
  17.     var nid = jQuery('#node-nid').text();
  18.     if (!nid) return true; // Do nothing…
  19.     if (parseInt(nid) <= 0) return true;
  20.  
  21.     // Get Comment Text
  22.     var text = jQuery('#edit-comment').val();
  23.     if (!text) return true; // Let Drupal validate the form
  24.  
  25.     // Get last comment Id
  26.     var lastComment = jQuery('div.comment:last');
  27.     var lastCommentId = (lastComment.length)? lastComment.id().split('-')[1] : 0;
  28.  
  29.     // // We got both nid and text. Let's create the comment holder
  30.     var comment = jQuery(document.createElement('div'));
  31.     comment.hide();
  32.     if (lastComment.length) {
  33.       lastComment.after(comment);
  34.     } else {
  35.       comment.insertBefore(jQuery('div.box'));
  36.     }
  37.  
  38.     // Ajax submit/load
  39.     comment.load('/add/comment',
  40.       {  'nid': nid,
  41.         'text': text,
  42.         'lastcid': lastCommentId
  43.       },
  44.       function(responseText, textStatus, XMLHttpRequest) {
  45.         if (textStatus == 'success' && responseText) {
  46.           ajax_insert_comment(comment);
  47.           jQuery('#edit-comment').val('');
  48.         } else {
  49.           comment.remove();
  50.           alert("Error: No se pudo enviar el comentario");
  51.         }
  52.         // Reenable submit button
  53.         submitBtn.val('Enviar comentario').removeAttr("disabled");
  54.       }
  55.     );
  56.  
  57.     return false;
  58.   });
  59. };
  60.  
  61. ajax_insert_comment = function(comment) {
  62.   // Clear 'new' from previous comments
  63.   jQuery('div.comment').find('span.new').remove();
  64.   // Add 'new' indicator
  65.   var newcomment = jQuery(document.createElement('span'));
  66.   newcomment.addClass('new').html('new');
  67.   newcomment.insertBefore(comment.find('div.comment-author'));
  68.   // Remove comment count
  69.   comment.find('span.commentcount').empty();
  70.   // Insert new comments
  71.   comment.show();
  72.   jQuery('#edit-comment').focus();
  73. };
  74.  
  75. jQuery(document).ready(function() {
  76.   ajax_comments();
  77. });

As you can see, when I wrote this code back in July, I have just started using jQuery and I didn’t know much about event handling. So I used the old return true/false to stop the submit event if needed. Also, now that I see the code again I can think on better ways to do parts of it. Well, that’s a good sign: it means I’m getting better :)

Series:
Ajax comments in Drupal 5: How I made it – Part I
Ajax comments in Drupal 5: How I made it – Part II
Ajax comments in Drupal 5: How I made it – Part III

See the ajax comments in action

Please, note this is a WordPress based blog. The Drupal website where I have implemented the ajax comments is www.spaniards.es

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/13/ajax-comments-in-drupal-5-how-i-made-it-part-iii/feed/ 10 Ajax comments in Drupal 5: How I made it – Part II http://dev.enekoalonso.com/2008/12/11/ajax-comments-in-drupal-5-how-i-made-it-part-ii/ http://dev.enekoalonso.com/2008/12/11/ajax-comments-in-drupal-5-how-i-made-it-part-ii/#comments Fri, 12 Dec 2008 04:48:54 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=104 In Axaj comments in Drupal 5: How I made it – Part I I covered the most important part of the module code: saving comments to the database. Now, let’s see how to display them properly.

Rendering the new comment

Comments usually have more information than the user name and the comment text. In my website, for instance, comments have information like the user registered date, where he/she lives, the country flag, the comment number on the thread, etc. All this information could not be made up at the client side; the server had to send it back to the client once the comment was saved.

Also, we want to take full advantage of Drupal: we want the corresponding filters applied to the comment text to remove malicious HTML tags, convert plain URLs into HTML links, etc.

The best way to do this is to use the function theme with the parameter ‘comment_view’. The difference between theme(‘comment’,…) and theme(‘comment_view’,…) is that filters are applied only in the second case, if I am not mistaken.

  1. function _spaniards_get_latest_comments($nid, $fromcid) {
  2.   $result = db_query('select * from comments where nid = %d and cid > %d', $nid, $fromcid);
  3.   $content = '';
  4.   while ($comment = db_fetch_object($result)) {
  5.     if ($comment->status == COMMENT_NOT_PUBLISHED) continue;
  6.     $links = module_invoke_all('link', 'comment', $comment, 1);
  7.     $content .= theme('comment_view', $comment, $links);
  8.   }
  9.   return $content;
  10. }

As I mentioned before, we don’t want to return just the comment added by the user but any comment added by any other user since the user loaded the page. This function will return any comment on the thread with comment Id greater than the parameter $fromcid.

Besides using theme(‘comment_view’,…) it is a good idea also to invoke the link hook. This will let other modules like fasttoggle inject their very useful links in out comment.

And that is it for now. This code, together with the code on Part I will be the only PHP needed. We will see the client side Javascript code on Part III.

Series:
Ajax comments in Drupal 5: How I made it – Part I
Ajax comments in Drupal 5: How I made it – Part II
Ajax comments in Drupal 5: How I made it – Part III

See the ajax comments in action

Please, note this is a WordPress based blog. The Drupal website where I have implemented the ajax comments is www.spaniards.es

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/11/ajax-comments-in-drupal-5-how-i-made-it-part-ii/feed/ 0 Ajax comments in Drupal 5: How I made it – Part I http://dev.enekoalonso.com/2008/12/10/ajax-comments-in-drupal-5-how-i-made-it-part-i/ http://dev.enekoalonso.com/2008/12/10/ajax-comments-in-drupal-5-how-i-made-it-part-i/#comments Thu, 11 Dec 2008 04:29:43 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=95 First of all, I would like to apologize for not publishing this the right way. I haven’t had time to put it all on a standalone module, which will make it easier to share the code at www.drupal.org. Feel free to grab the code and put it on a module if you wish (and let me know if you do so :)

Why Ajax comments?

Ajax comments let users to submit comments without having to reload the whole page. Reloading a page is not only slow, but its an overload for the server which has to process and send the whole page again just to add a simple comment to the DOM. So yes, Ajax comments are a big benefit, both for the user, which has to wait less, and for the server, which has to process and send less information.

Available modules

Point explained, lets see how it went. In the past I tried the Javascript Tools set of modules, which had other dependencies if I am not mistaken. And I don’t know why but it didn’t work at all for me. My comments kept reloading the whole page while sent. A couple of months ago I decided it was time to do it myself.

The plan

My original plan was simple: when the user hits the submit button, send the comment to the server, save it and add it to the DOM at the end of the comment list. This looked simple, but it had a few thing to deal with. I didn’t want to mess with Drupal’s comment module neither modify any line of Drupal’s core. So I decided to take an alternative path.

Saving a comment

Saving a comment doesn’t require much information. Since the user has to be logged in, the only information needed is basically the node Id and the comment itself. Drupal has a very nice hook_menu that allows you to create pages with a specific URL. These pages can process data, serve data or both. The only drawback, if so, was that hooks only works on modules, so I had to create my own. I decided to add it to my custom site module.

  1. function spaniards_menu($may_cache) {
  2.   $items = array();
  3.   if (!$may_cache) {
  4.     // Add comment
  5.     $items[] = array(
  6.       'path' => 'add/comment',
  7.       'title' => 'Add Comment',
  8.       'callback' => 'spaniards_add_comment',
  9.       'callback arguments' => array(),
  10.       'access' => user_access("post comments"),
  11.       'type' => MENU_CALLBACK,
  12.     );
  13.   }
  14. }
  15.  
  16. function spaniards_add_comment() {
  17.    global $user;
  18.    $text = $_REQUEST['text'];
  19.    $comment = array();
  20.    $comment['uid'] = $user->uid;
  21.    $comment['nid'] = $_REQUEST['nid'];
  22.    $comment['pid'] = 0;
  23.    $comment['subject'] = substr($text, 0, 20);
  24.    $comment['comment'] = $text;
  25.    // Add comment to DB
  26.    $cid = comment_save($comment);
  27.  
  28.    // Mark the node as viewed by the user
  29.    node_tag_new($comment['nid']);
  30.  
  31.    // Get all comments since the last one
  32.    $fromcid = isset($_REQUEST['lastcid'])? $_REQUEST['lastcid'] : 0;
  33.    print _spaniards_get_latest_comments($comment['nid'], $fromcid);
  34.  
  35.    exit;
  36. }

Just with those two functions we can bypass Drupal’s comment submission system and add new comments to the database. As long as we use the comment_save function, the actual process involved in saving a comment is safe (hooks get called, watchdog logging works, etc). Also, hook_menu guarantees only requests with the right access will be able to add a comment (in this case the user_access function verifies the user has “post comments” permissions granted).

Once the comment is saved, the node is marked as viewed by the user, to remove all “new” labels from the new comments added.

Finally the comment is rendered and returned to the user. But wait! What if another user has posted a comment in between? During a conversation between multiple users this will happen very often. The solution: return all comments added since the last comment visible when the user visited the thread.

We will see how to do that next.

Series:
Ajax comments in Drupal 5: How I made it – Part I
Ajax comments in Drupal 5: How I made it – Part II
Ajax comments in Drupal 5: How I made it – Part III

See the ajax comments in action

Please, note this is a WordPress based blog. The Drupal website where I have implemented the ajax comments is www.spaniards.es

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/10/ajax-comments-in-drupal-5-how-i-made-it-part-i/feed/ 7