Plugin: AJAX Comments
Development and Programming
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:
<
blockquote> :: 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="http://{title_permalink=blog/comments/index}" rel="bookmark" title="Permanent Link to {title}">{title}</a></h1>
Posted in {categories}<a href="http://{path=blog/index}" rel="category" title="View all posts in {category_name}">{category_name}</a>{/categories}
<div class="entry">
{body}
</div>
<span class="date">{entry_date format=' %l, %F %d, %Y '} by {author}</span><span class="comments"><a href="http://{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="http://{comment_auto_path}{url_title}/#submit">Post Comment</a></span>
</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):
Will definitely try this out on my next project.
Ok I set everything up and I click submit, my page seems to refresh, kind of, the comment inserts into the database but the issue is I have to refresh the page again to have the results show up basically everything within my div tag is not showing until I refresh. Plus should I notice the refresh, I think I may have something set up wrong but I checked it over pretty good. Any suggestions to where I might have went wrong?
Hiya,
Just gave this a try and I’m pretty sure I did it all correct. I am getting something similar to the above in that if I click on Submit then the comment form disappears and I get an image (missing though) appear on the screen and then I get this error message repeated many times :
Notice: Undefined offset: 3 in /usr/local/psa/home/vhosts/markbowendesign.com/httpdocs/adminfolder123/extensions/ext.ajax_comments_ext.php on line 134
In fact the error message actually looked like this
Undefined offset: 3 in on line 1
but when I clicked on the page it then expanded to the line above. That is shown 15 times which is the same amount of entries in the weblog I was testing this on. The page also doesn’t look the same any more in that it now has all those 15 entries listed on it with a comment form for each entry where I would have expected to just see the one entry and its associated comments.
The comment does however go into the system and if I refresh the page I see it come up.
Looks like a great addition if I can just figure these little things out.
Best wishes,
Mark
Would you guys be willing to post your Main Template and also your AJAX Template for me? Also, give me the URL to the page you are having trouble with. That way I can see what the javascript looks like.
Also, the plugin/extension is looking for your URL’s to look something like this:
http://example.com/blog/comments/url-title/ or http://example.com/index.php/blog/comments/url-title/
The URL Title needs to be in the 3rd segment of the URL. That may be what the problem is. I guess I should have told you that heh.
Inside the plugin, I haven’t found a way to pull in the URL Title without hard coding it in as segment 3. If someone could tell me otherwise, that would be great.
Also, make sure the extension is setup correctly in that you have a trailing slash.
Also, make sure the extension is setup correctly in that you have a trailing slash.
Oops!! 😉
All working now! Could swear I put that in there but obviously I didn’t!!
Works fine now. There is a problem on another page now which doesn’t use this at all so not too sure what that is all about but will look into that now.
Thanks for the kick up the backside! It was a very very late night last night.
Excellent add-on this one, well done.
Best wishes,
Mark
Also, ya, that missing “Loading” image is something I haven’t implemented fully yet.
What it’s looking for a is a gif located at 
. I’m still trying to figure out how not show that if you don’t want it.
Mark, the reason you are having a problem with another page is probably because the extension changes the code for the comment form. It changes the return URL to the template you submit in the extension settings. That may be your problem.
Also, I will take some time today and add in some error catches/feedback so this kind of thing doesn’t happen 😊.
Glad you got it working though 😊
Also, ya, that missing “Loading” image is something I haven’t implemented fully yet. What it’s looking for a is a gif located at
Yep noticed the image. I think that’s coming from the Ajaxify file isn’t it?
Mark, the reason you are having a problem with another page is probably because the extension changes the code for the comment form. It changes the return URL to the template you submit in the extension settings. That may be your problem.
Yep that would probably be it.
Also, I will take some time today and add in some error catches/feedback so this kind of thing doesn’t happen 😊. Glad you got it working though 😊
Can’t wait for the update. It’s a really nice addition this one.
Best wishes,
Mark
I’ve gone through a lot of possibilities but it looks like I’m not going to be able to fix the captcha problem if it is submitted improperly. What returns makes your website look like a complete mess. I’ve started to implement a validation for the other fields, checking if they are empty or has an improper email address, but the captcha is the real problem. When EE creates the captcha, it only returns the img it created, not the word it used, so I’m not able to get the value and use it in the javascript to validate the field.
What I might have to do is come up with my own captcha and utilize that instead of the EE captcha 😊.
@dvancouver Did you ever figure out the problem?
Not yet but still trying. I think I am going to create all new test templates and start fresh. I will give that a whirl and let you know what I find. My thought is that it may be interfering with another extension, so the new template will have none of those extensions and I will disable them for the test.
I would like to use this with dynamic=”off”, is it possible?
I’m trying to make it work, but the page doesn’t refresh, the entry is added, but instead of staying in the same page after submit it’s the embed that shows up.
Ya, it would be possible but I’d have to do a bit of tweaking on the plugin for it to work. I’m pretty loaded down with client work at the moment, but I’ll put it on my things to do list 😊.
If you don’t use the dynamic=”off” option, does it work for you?
Okay so I’m building a rather ambitious site (not my current one). Ambitious because the site will run entirely on ajax, and I can’t have ANYTHING stand in the way of that. The only problem I ran into was…. yes, Expression Engine. I didnt know how I would handle comment submission without refreshing a page. This looks like it will give me what I need.
Just to be clear… does this plugin allow me to:
Display a blog entry with comments below, with a comment submission form.
Submit the comment via ajax and NOT refresh the page.
Show the newly submitted comment without refreshing the page.
Basically, my blog will work like this. The front page will display the latest blog in summary form. Any time a blog entry link is clicked, it will display the full entry (changing [removed] via javascript). That page loaded will have comments displayed below by default. Or I can use jquery to show it…. not a problem. If this plugin can handle those 3 things, then I will be so super freakin happy… you have no idea. I was about to pay someone a lot of money to work on this for me 😊