Having to leave the current page to leave a comment is a bummer. Fortunately, a little javascript -- specifically, a jQuery implementation -- can really improve things. Let's look at a couple examples.
Let's begin by assuming you've set up a template based on the sample template. In the <head></head> section of your document, add:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
...or link to a local copy of the file if you prefer. It's up to you. Somewhere in your template -- if you're using the sample template, either above or below the existing content will work fine -- create a comment form:
{exp:comment:form entry_id="{segment_3}"}
<input type="hidden" name="weever-parent-id" id="weever-parent-id" value="{segment_4}" />
<p>
Name:<br />
<input type="text" name="name" value="{name}" size="50" />
</p>
<p>
Email:<br />
<input type="text" name="email" value="{email}" size="50" />
</p>
<p>
<textarea name="comment" cols="50" rows="12">{comment}</textarea>
</p>
<p><input type="checkbox" name="save_info" value="yes" {save_info} /> Remember my personal information</p>
<p>
<label for="title">Comment Title</label>
<input type="text" name="title" />
</p>
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="preview" value="Preview" />
{/exp:comment:form}
Now we apply a little jQuery magic:
<script type="text/javascript">
$(function(){
// Find all the "reply to" links and bind to the click event
$('a[href^=/blog/comment-form/]').click(function() {
var url_array = $(this) // The anchor object
.attr('href') // Fetch the value of the href attribute
.split("/"); // Divide into chunks, using / as the divider
var id = url_array[4]; // We want the fourth chunk
// Change the value of weever-parent-id
$('#weever-parent-id').val(id);
// Send the user to the comment form on this page
location = '#comment_form';
// Return false to muffle the original destination
return false;
});
});
</script>
In short, this finds all the <a> tags on the page with an href attribute that begins with "/blog/comment-form/". It then attaches a click event, such that any time one of those links is clicked, the value of the hidden weever-parent-id input is changed to that comment's ID.
That works great. But maybe insteaad of sending the user to the comment form, we want to bring the comment form to the user. What do I mean? Well, maybe you want it so that whenever somebody clicks a "Reply to this comment" link, the form appears directly below the comment. Wouldn't that be handy? Here's how we can do it:
<script type="text/javascript">
$(function(){
// Find all the "reply to" links and bind to the click event
$('a[href^=/blog/comment-form/]').click(function() {
var url_array = $(this) // The anchor object
.attr('href') // Fetch the value of the href attribute
.split("/"); // Divide into chunks, using / as the divider
var id = url_array[4]; // We want the fourth chunk
// Change the value of weever-parent-id
$('#weever-parent-id').val(id);
// Now we'll move the form
$('form#comment_form')
.insertAfter( // Insert the comment form after div.entry
$(this)
.parent() // The containing p tag
.parent() // div.entry
);
return false;
});
});
</script>