danvega.org: Inline comments in blogCFC

Inline comments in blogCFC

Wednesday June 27, 2007 4:53 PM

Word Count: 430

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.

<cfset closeMe = false>
<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>

You are going to replace that code with the following. All this code is doing is making sure that we are able to get the details for this entry. If we can not than set our showForm variable to false which we will use in a minute to wrap our form with.

Next we are going to wrap the entire form with the following code. The entry information is required if we are going to show the add comment form.

<cfif showForm>
<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

<div class="date">#rb("comments")#: #entry.title#</div>

Some of this is cosmetic but I will share it with you anyways. Next I am going to wrap the entire form in a div, change the form action handler & clean up the form.

<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>

Add the following line so when the form is submitted we can pass the entryId

And then in the area that handles the form submission change any value of url.id > form.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>

And change it to this


<cflocation url="#application.blog.makeLink(form.entryid)#" addtoken="false">
<cfabort>

Finally we have to make a change the anchor link. This is so that when users click on comments from the main page they are taken directly to the comments without having to read the entry. Change the named anchor link for the comments hyperlink in the entry footer (index.cfm) from #comments
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.

<cfprocessingdirective pageencoding="utf-8">


<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>
   
   <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="">

<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)>
   
   <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>

   
   <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)>
    
       <cftry>
          <cfset commentID = application.blog.addComment(form.entryid,left(form.name,50), left(form.email,50), left(form.website,255), form.comments, form.subscribe)>
         
         <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)>
      
      <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">
      
         <cfcookie name="blog_website" value="#trim(htmlEditFormat(form.website))#" expires="never">
      <cfelse>
         <cfcookie name="blog_name" expires="now">
         <cfcookie name="blog_email" expires="now">
         
         <cfset form.name = "">
         <cfset form.email = "">
         <cfset form.website = "">
      </cfif>
      <cfset form.comments = "">

      
      <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

/* comments from users */
#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;
}

11545 Views

Comments

#1 Posted By: David Posted On: 6/27/07 5:46 PM

Great!
...another reason to upgrade my blogCFC, as I prefer the in line ablility... :-)

#2 Posted By: Dan Vega Posted On: 6/27/07 7:22 PM |

Author Comment

David
I am not sure that you have to upgrade. You should make a quick backup and try it without upgrading.

#3 Posted By: Justin Carter Posted On: 6/27/07 7:32 PM

I've always meant to sit down and do this to my blog and never got around to it... Perhaps now I will! Cheers for the step by step instructions Dan :)

#4 Posted By: Dan Vega Posted On: 6/27/07 7:37 PM |

Author Comment

Justin,
No problem, thanks for reading. Let me know if you have any issues.

#5 Posted By: Raymond Camden Posted On: 6/28/07 8:31 AM

David, I still encourage you to upgrade. Just becuase. ;)

#6 Posted By: Dan Vega Posted On: 6/28/07 9:54 AM |

Author Comment

That Ray guy might have a good point! haha

#7 Posted By: Chat Posted On: 7/29/07 7:19 AM

I’d be interested in an updated GoogleAnalytics chart (may be two with about six weeks coverage), just to see if the effect did wear off after a while and also, did others link to your new name with the same link-text (allinurl:…).
I hope you will publish a follow up.

#8 Posted By: Miguel Posted On: 9/17/07 1:05 AM

I also am a big fan of everything CF, and this is a great addition to the awesome BlogCFC! but for some reason it isn't working right for me. Can you help?

The form does not display? at the end of comments from me

#9 Posted By: Ken westwood Posted On: 5/18/08 9:16 AM

I've always meant to sit down and do this to my blog and never got around to it... Perhaps now I will!

#10 Posted By: Sesli Chat Sohbet Posted On: 5/22/08 2:13 AM

Thanks some great ideas and posts ...keep it up

#11 Posted By: test Posted On: 6/3/08 9:44 AM

test

#12 Posted By: Stephen Weyrick Posted On: 1/20/09 8:05 PM

This is great!!! I was wondering if someone had already figured out a way to add inline comments.

#13 Posted By: Stephen Weyrick Posted On: 1/20/09 11:09 PM

Hi Dan,
I am having trouble getting inline comments to work on my blog. I am running the most current version of blogcfc on my localhost. I was wondering if you had any suggestions as to what could be happening; I followed your example word for word. Any help would be greatly appreciated.

#14 Posted By: Dan Vega Posted On: 1/20/09 11:13 PM |

Author Comment

What problems are you having?

#15 Posted By: Stephen Weyrick Posted On: 1/20/09 11:18 PM

The window opens and displays 'unable to show comment entry form', the cfelse portion portion of the code.

#16 Posted By: Dan Vega Posted On: 1/20/09 11:21 PM |

Author Comment

What window opens? There should be no window that opens. The inline comment form submits to itself and the comment is posted. Try and view source on mine to make sure your form matches up.

#17 Posted By: Stephen Weyrick Posted On: 1/20/09 11:50 PM

I uploaded the site to my hosting cfblogworm.com and copied your code from the code block. I have to correct myself. When I go to a single post, I don't see a form but I still see the add comment links in the code. When I click on the link, I get a popup window with the 'unable to display comment form message'. Sorry for the confusion.

#18 Posted By: Dan Vega Posted On: 1/21/09 8:30 AM |

Author Comment

You have to remove your add comment link and change your home page to include your new form.

<cfif articles.recordCount EQ 1>
         <cfset comments = application.blog.getComments(id)>
         <div id="comments">
            <h3>Comments</h3>
            <cfif comments.recordCount>
               <cfloop query="comments">
               <div class="comment<cfif currentRow MOD 2>-odd</cfif>">
                  <div class="comment-head">
                     <span class="comment-number<cfif comments.email EQ 'danvega@gmail.com'>-dan</cfif>">###currentRow#</span> Posted By: <cfif len(comments.website)><a href="#comments.website#" rel="nofollow">#name#</a><cfelse>#name#</cfif> Posted On: #application.localeUtils.dateLocaleFormat(posted,"short")# #application.localeUtils.timeLocaleFormat(posted)#   <cfif comments.email EQ "danvega@gmail.com">| <div class="author-comment">Author Comment</div></cfif>
                  </div>
                  <div class="comment-body">
                     #paragraphFormat2(replaceLinks(comment))#
                  </div>
               </div>
               </cfloop>
            </cfif>
            <br /><br />
            <cfinclude template="addcomment.cfm">
         </div>
         </cfif>

#19 Posted By: Stephen Weyrick Posted On: 1/21/09 10:38 AM

Yes, I guess that would make sense. Thank you for your help. I will let you know if it works or not after my revision.

#20 Posted By: Stephen Weyrick Posted On: 1/28/09 3:01 AM

Hi Dan,

Thanks for all of your help with adding inline comments. I got the form to work after going through your code again. I am getting the error "Element COMMENTID is undefined in ARGUMENTS" when I submit the form. Is a comment id supposed to be passed to the blog.cfc? I have only been working with coldfusion for a couple of months, so I am sorry if I seem green.

#21 Posted By: sohbet Posted On: 10/27/09 2:35 PM

Thanks you very good topic

Inline comments in blogCFC

Comments

Post Your Comment

Navigation

Tagcloud

Archives

Blogs I Read

Recent Entries

Recent Comments

About

Stay Upated