jQuery comment code in Movable Type
December 19, 2009
0 comments
Byrne Reese created a jQuery comment plugin for Movable Type, which I forked and extended. As you can see from this example, the jQuery components work quite well. This is how I implemented it on the test blog. I use the Professional Website Template Set, but the JavaScript includes, CSS links, etc. are applicable to other template sets and should be placed in the header module.
Also, wrap <mt:Ignore></mt:Ignore> tags around this section of the Comments template module if you are using the Classic Blog Template Set:
<link rel="stylesheet" href="/jquery.mtcomment.css" type="text/css" />In addition to that change to the header module, clone the JavaScript index template and rename the new copy to "legacy javascript" so that most plugins that rely on the official site-facing JavaScript won't be broken. Add the contents of byrne's new JavaScript template to the old JavaScript template.
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery.form.js"></script>
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="<$mt:Link template="legacy javascript"$>"></script>
<script type="text/javascript" src="/jquery.mtauth.js"></script>
<script type="text/javascript" src="/jquery.mtgreeting.js"></script>
<mt:If name="body_class" eq="mt-entry-archive">
<script type="text/javascript" src="/jquery.mtcomment.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('#comments-form')) {
/* First, let's boot strap the comment form on the page.
* In this one step, we take the default MT comment form and turn
* into a fully AJAXified comment form.
*/
var form = $('#comments-form').commentForm({
target: '.comments-open-content'
});
/* Once the form is bootstrapped and we have a handle to it
* we then pass that as a handle to the reply function which
* provides the inline commenting ability.
*/
$('a[title=Reply]').reply({
sourceForm: form
});
$("#comments-form").onauthchange(function(evt, user) {
var openDataDiv = $("#comments-open-data");
if (openDataDiv && user.is_authenticated)
{
$("<p>Thanks for logging in, " + user.name + "</p>").insertBefore(this);
$("#comment-author", openDataDiv).val(user.name);
$("#comment-email", openDataDiv).val(user.email);
$("#comment-url", openDataDiv).val(user.url);
$(openDataDiv).fadeOut(1000);
}
});
};
});
</script>
</mt:If>
Also, wrap <mt:Ignore></mt:Ignore> tags around this section of the Comments template module if you are using the Classic Blog Template Set:
<script type="text/javascript">Finally, remove the JavaScript event handlers from the commenter form module (segments like onsubmit="dothis();"). Save the changes, rebuild.
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>
