Inline comments in blogCFC
I am a big fan of blogCFC and like everyone else after an install I like to make a few customizations. I recently upgraded the look and feel to my website and have to say I am pretty happy with the way everything turned out. One of the new additions is inline comments. BlogCFC by default has an add comment link that opens up a new window for users to add comments. While this works perfectly fine and there is nothing wrong with this, I wanted the ability for users to leave comments without leaving the page. In this tutorial I am going to run through what I needed to do to get this to work.
The first thing you need to do is open the addComment template located in the blog root and remove the following lines.
<cfif not isDefined("url.id")>
<cfset closeMe = true>
<cfelse>
<cftry>
<cfset entry = application.blog.getEntry(url.id,true)>
<cfcatch>
<cfset closeMe = true>
</cfcatch>
</cftry>
</cfif>
<cfif closeMe>
<cfoutput>
<script>
window.close();
</script>
</cfoutput>
<cfabort>
</cfif>
<cftry>
<cfset entry = application.blog.getEntry(articles.id,true)>
<cfcatch>
<cfset showForm = false>
</cfcatch>
</cftry>
<cfif isDefined("form.addcomment") and entry.allowcomments>
...
</cfif>
<cfelse>
comments disabled for the moment.
</cfif>
Now that we are showing the comment form inline we need to make some changes. The first change is to take away the post title since we are on that post already. Simply remove the following line
<form action="#application.blog.makeLink(entry.id)#" method="post">
<input type="hidden" name="entryId" value="#entry.id#">
<p>
<label for="name">#rb("name")#: <strong>*</strong></label><br />
<input type="text" id="name" name="name" value="#form.name#" class="text">
</p>
<p>
<label for="email">#rb("emailaddress")#: <strong>*</strong></label><br />
<input type="text" id="email" name="email" value="#form.email#" class="text">
</p>
<p>
<label for="website">#rb("website")#: </label><br />
<input type="text" id="website" name="website" value="#form.website#" class="text">
</p>
<p>
<label for="comments">#rb("comments")#: <strong>*</strong></label><br />
<textarea name="comments" id="comments" class="textarea">#form.comments#</textarea>
</p>
<cfif application.useCaptcha>
<p>
<cfset variables.captcha = application.captcha.createHashReference() />
<input type="hidden" name="captchaHash" value="#variables.captcha.hash#" />
<label for="captchaText" class="longLabel">#rb("captchatext")#:</label><br/>
<input type="text" name="captchaText" size="6" class="captcha"/><br>
<img src="#application.blog.getRootURL()#showCaptcha.cfm?hashReference=#variables.captcha.hash#" vspace="5"/>
</p>
</cfif>
<p class="bg">
<input type="checkbox" class="checkBox" id="rememberMe" name="rememberMe" value="1" <cfif isBoolean(form.rememberMe) and form.rememberMe>checked</cfif>>
<label for="rememberMe" class="longLabel">#rb("remembermyinfo")#</label>
</p>
<p class="bg">
<input type="checkbox" class="checkBox" id="subscribe" name="subscribe" value="1" <cfif isBoolean(form.subscribe) and form.subscribe>checked</cfif>>
<label for="subscribe" class="longLabel">#rb("subscribe")#</label>
</p>
<p style="clear:both">#rb("subscribetext")#</p>
<p style="text-align:center">
<input type="reset" id="reset" value="#rb("cancel")#" onClick="if(confirm('#rb("cancelconfirm")#')) { window.close(); } else { return false; }"> <input type="submit" id="submit" name="addcomment" value="#rb("post")#">
</p>
</form>
</div>
Add the following line so when the form is submitted we can pass the entryId
The next change is to Remove the following code. This code would reload the opening page and close the window when it was a popup. We just want to relocate to the same entry so the comments are refreshed.
<cfoutput>
<script>
window.opener.location.reload();
window.close();
</script>
</cfoutput>
<cfabort>
<cflocation url="#application.blog.makeLink(form.entryid)#" addtoken="false">
<cfabort>
to #comments-begin
And add a named anchor to the begining of the comments section. If you do not do this the link will take you to the comments box on the form instead of the top of the comments.
I know this is a lot of rabmling and this is mostly due to the fact that I jotted notes down as I was doing it last weekend. Below is my final code in my addComment.cfm template. If you have any questions feel free to ask.
<!---
Name : addcomment.cfm
Author : Raymond Camden
Created : February 11, 2003
Last Updated : April 13, 2007
History : Reset history for version 5.0
: Lengths allowed for name/email were 100, needed to be 50
: Cancel confirmation (rkc 8/1/06)
: rb use (rkc 8/20/06)
: Scott updates the design a bit (ss 8/24/06)
: Default form.captchaText (rkc 10/21/06)
: Don't log the getentry (rkc 2/28/07)
: Don't mail if moderating (rkc 4/13/07)
Purpose : Adds comments
--->
<cfif not isDefined("form.addcomment")>
<cfif isDefined("cookie.blog_name")>
<cfset form.name = cookie.blog_name>
<cfset form.rememberMe = true>
</cfif>
<cfif isDefined("cookie.blog_email")>
<cfset form.email = cookie.blog_email>
<cfset form.rememberMe = true>
</cfif>
<!--- RBB 11/02/2005: Added new website check --->
<cfif isDefined("cookie.blog_website")>
<cfset form.website = cookie.blog_website>
<cfset form.rememberMe = true>
</cfif>
</cfif>
<cfparam name="form.name" default="">
<cfparam name="form.email" default="">
<!--- RBB 11/02/2005: Added new website parameter --->
<cfparam name="form.website" default="">
<cfparam name="form.comments" default="">
<cfparam name="form.rememberMe" default="false">
<cfparam name="form.subscribe" default="false">
<cfparam name="form.captchaText" default="">
<cfset showForm = true>
<cftry>
<cfset entry = application.blog.getEntry(articles.id,true)>
<cfcatch>
<cfset showForm = false>
</cfcatch>
</cftry>
<cfif showForm>
<cfif isDefined("form.addcomment") and entry.allowcomments>
<cfset form.name = trim(form.name)>
<cfset form.email = trim(form.email)>
<!--- RBB 11/02/2005: Added new website option --->
<cfset form.website = trim(form.website)>
<cfset form.comments = trim(form.comments)>
<cfset errorStr = "">
<cfif not len(form.name)>
<cfset errorStr = errorStr & rb("mustincludename") & "<br>">
</cfif>
<cfif not len(form.email) or not isEmail(form.email)>
<cfset errorStr = errorStr & rb("mustincludeemail") & "<br>">
</cfif>
<cfif len(form.website) and not isURL(form.website)>
<cfset errorStr = errorStr & rb("invalidurl") & "<br>">
</cfif>
<cfif not len(form.comments)>
<cfset errorStr = errorStr & rb("mustincludecomments") & "<br>">
</cfif>
<!--- captcha validation --->
<cfif application.useCaptcha>
<cfif not len(form.captchaText)>
<cfset errorStr = errorStr & "Please enter the Captcha text.<br>">
<cfelseif NOT application.captcha.validateCaptcha(form.captchaHash,form.captchaText)>
<cfset errorStr = errorStr & "The captcha text you have entered is incorrect.<br>">
</cfif>
</cfif>
<cfif not len(errorStr)>
<!--- RBB 11/02/2005: added website to commentID --->
<cftry>
<cfset commentID = application.blog.addComment(form.entryid,left(form.name,50), left(form.email,50), left(form.website,255), form.comments, form.subscribe)>
<!--- Form a message about the comment --->
<cfset subject = rb("commentaddedtoblog") & ": " & application.blog.getProperty("blogTitle") & " / " & rb("entry") & ": " & entry.title>
<cfsavecontent variable="email">
<cfoutput>
#rb("commentaddedtoblogentry")#: #entry.title#
#rb("commentadded")#: #application.localeUtils.dateLocaleFormat(now())# / #application.localeUtils.timeLocaleFormat(now())#
#rb("commentmadeby")#: #form.name# <cfif len(form.website)>(#form.website#)</cfif>
#rb("ipofposter")#: #cgi.REMOTE_ADDR#
URL: #application.blog.makeLink(form.entryId)###c#commentID#
#form.comments#
------------------------------------------------------------
#rb("unsubscribe")#: %unsubscribe%
This blog powered by BlogCFC #application.blog.getVersion()#
Created by Raymond Camden (ray@camdenfamily.com)
</cfoutput>
</cfsavecontent>
<cfif not application.commentmoderation>
<cfset application.blog.notifyEntry(form.entryid, trim(email), subject, form.email)>
<cfelse>
<cfset application.blog.notifyEntry(form.entryid, trim(email), subject, form.email, true)>
</cfif>
<cfcatch>
<cfif cfcatch.message is not "Comment blocked for spam.">
<cfrethrow>
</cfif>
</cfcatch>
</cftry>
<cfmodule template="tags/scopecache.cfm" scope="application" clearall="true">
<cfset comments = application.blog.getComments(form.entryid)>
<!--- clear form data --->
<cfif form.rememberMe>
<cfcookie name="blog_name" value="#trim(htmlEditFormat(form.name))#" expires="never">
<cfcookie name="blog_email" value="#trim(htmlEditFormat(form.email))#" expires="never">
<!--- RBB 11/02/2005: Added new website cookie --->
<cfcookie name="blog_website" value="#trim(htmlEditFormat(form.website))#" expires="never">
<cfelse>
<cfcookie name="blog_name" expires="now">
<cfcookie name="blog_email" expires="now">
<!--- RBB 11/02/2005: Added new website form var --->
<cfset form.name = "">
<cfset form.email = "">
<cfset form.website = "">
</cfif>
<cfset form.comments = "">
<!--- redirect --->
<cflocation url="#application.blog.makeLink(form.entryid)#" addtoken="false">
<cfabort>
</cfif>
</cfif>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
<html>
<head>
<cfoutput><title>#application.blog.getProperty("blogTitle")# : #rb("addcomments")#</title></cfoutput>
<link rel="stylesheet" href="includes/style.css" type="text/css"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body id="popUpFormBody">
<cfoutput>
<div class="body">
</cfoutput>
<cfif entry.allowcomments>
<br><br>
<img src="http://www.danvega.org/blog/images/postcomments.gif">
<cfif isDefined("errorStr") and len(errorStr)>
<cfoutput><b>#rb("correctissues")#:</b><ul style="color:red;">#errorStr#</ul></cfoutput>
</cfif>
<cfoutput>
<div id="comment-form">
<form action="#application.blog.makeLink(entry.id)#" method="post">
<input type="hidden" name="entryId" value="#entry.id#">
<p>
<label for="name">#rb("name")#: <strong>*</strong></label><br />
<input type="text" id="name" name="name" value="#form.name#" class="text">
</p>
<p>
<label for="email">#rb("emailaddress")#: <strong>*</strong></label><br />
<input type="text" id="email" name="email" value="#form.email#" class="text">
</p>
<p>
<label for="website">#rb("website")#: </label><br />
<input type="text" id="website" name="website" value="#form.website#" class="text">
</p>
<p>
<label for="comments">#rb("comments")#: <strong>*</strong></label><br />
<textarea name="comments" id="comments" class="textarea">#form.comments#</textarea>
</p>
<cfif application.useCaptcha>
<p>
<cfset variables.captcha = application.captcha.createHashReference() />
<input type="hidden" name="captchaHash" value="#variables.captcha.hash#" />
<label for="captchaText" class="longLabel">#rb("captchatext")#:</label><br/>
<input type="text" name="captchaText" size="6" class="captcha"/><br>
<img src="#application.blog.getRootURL()#showCaptcha.cfm?hashReference=#variables.captcha.hash#" vspace="5"/>
</p>
</cfif>
<p class="bg">
<input type="checkbox" class="checkBox" id="rememberMe" name="rememberMe" value="1" <cfif isBoolean(form.rememberMe) and form.rememberMe>checked</cfif>>
<label for="rememberMe" class="longLabel">#rb("remembermyinfo")#</label>
</p>
<p class="bg">
<input type="checkbox" class="checkBox" id="subscribe" name="subscribe" value="1" <cfif isBoolean(form.subscribe) and form.subscribe>checked</cfif>>
<label for="subscribe" class="longLabel">#rb("subscribe")#</label>
</p>
<p style="clear:both">#rb("subscribetext")#</p>
<p style="text-align:center">
<input type="reset" id="reset" value="#rb("cancel")#" onClick="if(confirm('#rb("cancelconfirm")#')) { window.close(); } else { return false; }"> <input type="submit" id="submit" name="addcomment" value="#rb("post")#">
</p>
</form>
</div>
</cfoutput>
<cfelse>
<cfoutput>
<p>#rb("commentsnotallowed")#</p>
</cfoutput>
</cfif>
</div>
<cfelse>
unable to show comment entry form
</cfif>
</body>
</html>
form style
#comment-form {
margin-top:25px;
padding:10px;
background: #242424;
color:#f3f3f3;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#comment-form p {
margin-bottom: 15px;
}
#comment-form label {
}
#comment-form .text {
border:1px solid #f3f3f3;
width: 320px;
margin-top: 2px;
margin-right: 0pt;
margin-bottom: 2px;
margin-left: 0pt;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
#comment-form .captcha {
border:1px solid #f3f3f3;
width: 245px;
margin-top: 2px;
margin-right: 0pt;
margin-bottom: 2px;
margin-left: 0pt;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
#comment-form .textarea {
width:320px;
height:125px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
#comment-form .bg {
background-color: #999999;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
width: 320px;
}
