Conversations for ExpressionEngine

01 Jun09

Quote + Reply using jQuery

Getting Started

A nifty feature that's available either as a plugin or natively in most CMS's, the ability to directly quote or reply to a comment, is unfortunetly missing in ExpressionEngine. No worries, though: this can be easily added with jQuery. In this tutorial we will be looking at how to do just that.

If you would like to skip the tutorial you can view or download a barebones example.

The Html & EE Code

First, let's make our comment submission form..

<div id="reply"> 
{exp:comment:form}
 <label> 
  <span> Name</span> 
  <input type="text" name="name" value="{name}"/> 
 </label> 
 <label> 
  <span> Email</span> 
  <input type="text" name="email" value="{email}"> 
 </label> 
 <label> 
  <span> Website</span> 
  <input type="text" name="url" value="{url}"/> 
 </label> 
 <label> 
  <span> Message</span> 
  <textarea rows="6" cols="50" 
  name="comment" id="commentbox"> 
  
  </textarea> 
 </label> 
 <label class="submit"> 
  <input type="submit" name="submit" value="send"/> 
 </label> 
{/exp:comment:form}
</div>

And this is how we're going to structure our comments. Feel free to structure them as you wish, but keep in mind that you will have to tinker with the jQuery selectors we're going to use to make it fit your needs later on. Most importantly though, regardless of how you structure your comments, make sure to set the comment container's id to the comment id.

 <ol class="comments"> 
 {exp:comment:entries}
  <li id="c_{comment_id}"> 
   <span class="author"> 
    <a href="{url}">{author}</a> wrote:
   </span> 
   <p>{comment}</p> 
   <a href="#reply" class="c_reply">Reply</a> 
   <a href="#reply" class="c_quote">Quote</a> 
  </li> 
 {/exp:comment:entries}
 </ol>

Adding the Reply Button

Alright, now to put those quote & reply buttons to good use we will attach an onclick function to find the comment id and grab the author name, url, and comment and have it paste it into the comment textbox.

Let's start by creating the function for the reply button:

$(document).ready(function(){
   $("a.c_reply").click(function() {
   });
});

Then find the comment id and author name and throw it into a variable

var author = $(this).parents("li").find("span a").html();
var authlink = $(this).parents("li").attr("id");

And finally, spit the variables out into our comment textarea

var text = $("textarea#commentbox").attr("value");
$('textarea#commentbox').attr("value",text+"<a href='#"+authlink+"'>@"+author+"</a>").focus();

Our final code should look something like this:

$(document).ready(function(){  
   $("a.c_reply").click(function() {
	 var author = $(this).parents("li").find("span a").html();
	 var authlink = $(this).parents("li").attr("id");
	 var text = $("textarea#commentbox").attr("value");
	 $('textarea#commentbox').attr("value",text+"<a href='#"+authlink+"'>@"+author+"</a>").focus();
   );
});

Adding the Quote Button

Now to make the quote button work. We'll start by adding the functionailty of the reply button:

$(document).ready(function(){
   $("a.c_quote").click(function() {
	 var author = $(this).parents("li").find("span a").html();
	 var authlink = $(this).parents("li").attr("id");
	 var text = $("textarea#commentbox").attr("value");
   });
});

Next, we'll grab the actual comment and put it into a variable:

var quote = $(this).parents("li").find('p').text();

And finally, we'll grab any highlighted text and put it into a variable. We'll then replace the whole quote with only the part that is selected:

if (window.getSelection)
  var selection = window.getSelection();
else if (document.getSelection)
  var selection = document.getSelection();
else if (document.selection) {
  var selection = document.selection.createRange().text; }        
if(selection!="") quote = selection;