Greetings,
A request was made for people being able to post a comment to a blog post using AJAX so the page would not have to be refreshed.
This is a plugin/extension combo. I had to use an extension to modify the comment posting form slightly. It requires jQuery and Ajaxify to be included in the header. I know the directions might seem a bit confusing, just let me know if you need any help.
Known Issue(s):
1) Preview does not work anymore, I’ll figure that out later. Probably an easy fix.
2) If error in the form, it comes back quite screwy since it’s pulling in the error template into the container div. I think if this proves useful, I’ll have a look to see if I can fix this.
This is taken right from the plugin documentation:
:: Setup ::
1) Create your main template where your comments will be shown. This is where the container <div> needs to be located and inside that container <div> you need to embed the AJAX template. Also jQuery 1.2.6 (http://jquery.com) and Ajaxify (http://maxblog.me/ajaxify/) need to be included in the header tags. An example will be shown below.2) Create your AJAX template for the ajaxification (real word?) to take place. This is where the plugin code will be located. Again, example will be shown below.
3) Enable the AJAX Comments extension under Admin > Utilities > Extensions. Make sure you set the full URL to your AJAX template (i.e. http://example.com/blog/ajax_comments_template/).
:: Parameters ::
These parameters must not be blank:
container - Define the name of the <div> container of your comments in the Main Template.
template - Define the template group and template of your AJAX template.:: Variables ::
No variables:: Barebones Example Usage ::
Main Template (Template Group: blog | Template: comments):<html>
<head>
< script type="text/javascript" src="js/jquery.min.js" >< /script >
< script type="text/javascript" src="js/jquery.ajaxify.min.js" >< /script >
</head>
<body>
<div id="content">
<div id="main">
{exp:weblog:entries weblog="blog" orderby="date" sort="desc" limit="15" disable="member_data"}
<div class="post">
<h1><a href="{title_permalink=blog/comments/index}" rel="bookmark" title="Permanent Link to {title}">{title}</a></h1>
Posted in {categories}<a href="{path=blog/index}" title="View all posts in {category_name}" rel="category">{category_name}</a>{/categories}
<div class="entry">
{body}
</div>
<p class="post-footer align-right"><span class="date">{entry_date format=' %l, %F %d, %Y '} by {author}</span><span class="comments"><a href="{comment_auto_path}{url_title}/#comments"> 1 OR {comment_total} == 0}Comments{if:else}Comment{/if} on {title}">{comment_total} {if {comment_total} > 1 OR {comment_total} == 0}Comments{if:else}Comment{/if}</a> - <a href="{comment_auto_path}{url_title}/#submit">Post Comment</a></span></p>
</div>
{/exp:weblog:entries}
<a id="comments"></a>
<div id="comments_container">{embed="blog/ajax_comments_template"}</div>
</div>
{embed="includes/.sidebar"}
</div>
</body>
</html>AJAX Template (Template Group: blog | Template: ajax_comments_template):
{exp:ajax_comments container="comments_container" template="blog/ajax_comments_template"}
<ol class="commentlist">
{exp:comment:entries weblog="blog"}
<li class="comment-body">
<div class="comment_author">{url_or_email_as_author} Says:</div>
<small class="commentmetadata">{comment_date format='%m/%d'} at {comment_date format='%h:%i %A'}</small>
<blockquote>{comment}</blockquote>
</li>
{/exp:comment:entries}
</ol>
<a id="submit"></a>
{exp:comment:form}
<h2 style="margin-left: 20px;">Post a Comment</h2>
{if logged_out}
Name:<br />
<input type="text" name="name" value="{name}" size="50" />
<br />
Email:<br />
<input type="text" name="email" value="{email}" size="50" />
<br />
URL:<br />
<input type="text" name="url" value="{url}" size="50" />
{/if}
<br />
Comments:<br />
<textarea name="comment" cols="50" rows="12">{comment}</textarea>
<a ><img src="{site_url}images/smileys/smile.gif" class="no-border" /> - Smileys</a>
{if logged_out}
<br /><input type="checkbox" name="save_info" value="yes" {save_info} /> Remember my personal information
{/if}
<br /><input type="checkbox" name="notify_me" value="yes" {notify_me} /> Notify me of follow-up comments?
{if captcha}
<br />Submit the word you see below:
<br />
{captcha}
<br />
<input type="text" name="captcha" value="" size="20" maxlength="20" style="width:140px;" />
{/if}
<br />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="preview" value="Preview" />
<br />
{/exp:comment:form}
.