This site has been updated with new code. Now users can edit and delete their own comments. Edit and Delete buttons will be displayed by your comments when viewing specific posts. Clicking Edit will transform the table cell into an editable field.

This is all accomplished with the following JS code:


  1. /** 
  2. * @description Used to allow users to edit comments on posts. Transforms td cell into editable field, then submits new comment 
  3. * @param {Number} comment ID to edit and submit. Used as key 
  4. * @returns {boolean} used to submit or prevent submission 
  5. */  
  6. function editComment(commentId) {  
  7.   if ($('#' + commentId + '_edit_btn').html().trim() == 'Edit') {  
  8.       // User wants to edit the comment content.  Make editable based on ID  
  9.       $('#' + commentId + '_comment_content').prop('contenteditable', true);  
  10.       $('#' + commentId + '_comment_content').focus();  
  11.       event.preventDefault();   // Prevent form submission  
  12.   } else {  
  13.       // User edited and clicked 'Save'. Disable editing  
  14.       $('#' + commentId + '_comment_content').prop('contenteditable', false);  
  15.       // Find specific form for individual comment  
  16.       var currForm = $('#' + $('#' + commentId + '_edit_btn').val()+'_form');  
  17.       // Create hidden input based on edited comment content.  
  18.       var input = $('<input>').attr('type', 'hidden').attr('name', $('#' + commentId + '_edit_btn').val()).val($('#' + commentId + '_comment_content').html());  
  19.       currForm.append($(input));  // Add hidden input. Editable field isn't in POST  
  20.       return true;  
  21.   }  
  22.   // Change Edit button to say Save  
  23.   $('#' + commentId + '_edit_btn').html($('#' + commentId + '_edit_btn').html().trim() == 'Edit' ? 'Save' : 'Edit');  
  24. }  

Read More