[MOD] AJAX Comments / Comments Rating v1.0.4 (2009-12-21)

[V@no]

----------------- [ Index ] -----------------

• Introduction
  
• Demo
  
• List of changed/new files
  
• Installation
  
• Tweaks
  
• Version history
  

----------------- [ Introduction ] -----------------

This mod will allows post comments and/or rate comments without page refresh, just like on youtube.com

----------------- [ Demo ] -----------------

You can see how it works here. You can login using any username and password. Also the demo has settings on left side.

----------------- [ Changed files ] -----------------

details.php
templates/<your template>/comment_bit.html
templates/<your template>/comment_form.html
templates/<your template>/commentsperpage_dropdown_form.html
templates/<your template>/details.html
templates/<your template>/style.css
lang/<your language>/main.php

----------------- [ New files ] -----------------

install_ajaxcomments.php
ajaxcomments.php
js/ajax.js
js/ajaxcomments.js
templates/<your template>/images/good.png
templates/<your template>/images/good_off.png
templates/<your template>/images/bad.png
templates/<your template>/images/bad_off.png
templates/<your template>/images/minus.png
templates/<your template>/images/plus.png


----------------- [ Installation ] -----------------


Step 1

Download attached ajaxcomments.zip package (you must login to be able download it). Unpack it and upload to your 4images root directory, restoring the following directory tree:
install_ajaxcomments.php
ajaxcomments.php
js/ajax.js
js/ajaxcomments.js
templates/<your template>/images/good.png
templates/<your template>/images/good_off.png
templates/<your template>/images/bad.png
templates/<your template>/images/bad_off.png
templates/<your template>/images/minus.png
templates/<your template>/images/plus.png

Step 2

Start install_ajaxcomments.php by typing in your browser: http://your_site/4images/install_ajaxcomments.php
Install database.

Step 3

If you want show comments in pages, install [MOD] Paging for comments
If you don't want pages for comments, make sure you skip steps where says "(only if done Step 3)"
Also, if you skip this step, you'll need set COMMENTS_PAGES to 0 (refer Tweak 1 for more info)

Step 4

Open details.php
Find:
include(ROOT_PATH.'includes/page_header.php');

Insert _below:
/*
  MOD AJAX COMMENTS
  BEGIN INSERT
*/
include(ROOT_PATH."ajaxcomments.php");
/*
  MOD AJAX COMMENTS
  END INSERT
*/



Step 4.1

Find:  $sql = "SELECT c.comment_id, c.image_id, c.user_id, c.user_name AS comment_user_name, c.comment_headline, c.comment_text, c.comment_ip, c.comment_date".get_user_table_field(", u.", "user_level").get_user_table_field(", u.", "user_name").get_user_table_field(", u.", "user_email").get_user_table_field(", u.", "user_showemail").get_user_table_field(", u.", "user_invisible").get_user_table_field(", u.", "user_joindate").get_user_table_field(", u.", "user_lastaction").get_user_table_field(", u.", "user_comments").get_user_table_field(", u.", "user_homepage").get_user_table_field(", u.", "user_icq")."
(if you have hard time find this line, it's in "Show Comments" section)

Add at the end of the line:

Code: [Select]

,c.comment_rating,c.comment_votes,c.comment_rating_users
Step 4.2 (only if done Step 3)

Find:
$commentsperpage_dropdown = "\n<select name=\"commentsetperpage\" onchange=\"if (this.options[this.selectedIndex].value != 0){ forms['commentsperpage'].submit() }\" class=\"select\">\n";


Replace it with:
/*
  MOD AJAX COMMENTS
  REPLACE START
*/
$commentsperpage_dropdown = "\n<select name=\"commentsetperpage\" onchange=\"if (this.options[this.selectedIndex].value != 0){ return CommentsPerPage(this.form); }\" class=\"select\">\n";
/*
  MOD AJAX COMMENTS
  REPLACE END
*/


Step 4.3 (only if done Step 3)

Find:
if ($action == "postcomment") {

Replace it with:
/*
  MOD AJAX COMMENTS
  REPLACE START
*/
if (($action == "postcomment" || (!isset($HTTP_POST_VARS['page']) && !isset($HTTP_GET_VARS['page']))) && !COMMENTS_ORDER) {
/*
  MOD AJAX COMMENTS
  REPLACE END
*/



Step 4.4 (only if done Step 3)

Find:

Code: [Select]

 "paging" => $getpaging->get_paging(),
Replace it with:

Code: [Select]

/*
  MOD AJAX COMMENTS
  REPLACE START
*/
      "paging" => str_replace(array("<a ", 'onSubmit="'), array('<a onclick="return CommentsPage(this);" ', 'onSubmit="return CommentsPerPage(this);'), $getpaging->get_paging()),
/*
  MOD AJAX COMMENTS
  REPLACE END
*/

Step 4.5

A. (only if done Step 3)
Find:

Code: [Select]

         WHERE c.image_id = $image_id
          ORDER BY c.comment_date ASC";
Replace it with:

Code: [Select]

         WHERE c.image_id = $image_id
          ORDER BY c.comment_date ".(COMMENTS_ORDER ? "DESC" : "ASC")."";


B. (only if skipped Step 3)
Find:

Code: [Select]

         WHERE c.image_id = $image_id
          ORDER BY c.comment_date ASC
Replace it with:

Code: [Select]

         WHERE c.image_id = $image_id
          ORDER BY c.comment_date ".(COMMENTS_ORDER ? "DESC" : "ASC")."

Step 4.6

Find:
      $comments .= $site_template->parse_template("comment_bit");

Insert ^above:
/*
  MOD AJAX COMMENTS
  BEGIN INSERT
*/
      if (COMMENT_RATING_ENABLE)
      {
        $comment_row[$i]['cat_id'] = $cat_id;
        $comment_row[$i]['image_allow_comments'] = $image_allow_comments;
        comment_rating_template($comment_row[$i]);
      }
/*
  MOD AJAX COMMENTS
  END INSERT
*/


Step 4.7

Find:
  $site_template->register_vars("comments", $comments);

Replace it with:
/*
  MOD AJAX COMMENTS
  START REPLACE
*/
  $site_template->register_vars(array(
    "comments" => $comments,
    "comments_num" => $num_comments,
    "commentbg" => (isset($row_bg_number)) ? $row_bg_number : 0,
    "page" => $page,
    "perpage" => $commentperpage,
  ));

/*
  MOD AJAX COMMENTS
  END REPLACE
*/


Step 5

Open: lang/<your language>/main.php
At the end, ^above closing ?> insert:
$lang['comment_rating'] = "Vote for this comment";
$lang['comment_rating_good'] = "Good comment";
$lang['comment_rating_bad'] = "Bad comment";
$lang['comment_rating_success'] = "Thank you for rating this comment";
$lang['comment_rating_error'] = "Sorry, your vote was rejected:";
$lang['comment_rating_check'] = array(
  0 => "Not rated yet",
  1 => "Invalid comment id",
  2 => "Guests are not allowed to vote",
  3 => "Permission denied",
  4 => "You can't vote on your own comments",
  5 => "You've already voted for this comment",
  6 => "Comment rating disabled",
);


Step 6
Open: templates/<your template/style.css

Add at the end:

Code: [Select]

.comment_rating0 {
}
.comment_rating1 {
  color: green;
}
.comment_rating2 {
  color: red;
}


• Step 7 - 10 are template related, if you are using default template, you can simply download attached ajaxcomments_default_template.zip package, unpack it and replace files in your template with files from the package.
  
• In some steps I will only give the code to add and might give brief explanation what it does, your task is to find the place where you want that code to be. This means, you need to know basic HTML.
• Examine the provided code, it might contain additional comments with additional information.
• If you read "an element will be used to display..." make sure such element doesn't have any children elements, unless stated otherwise.

(i.e. <div id="t"><span>blah</span></div> <div> is a parent element and <span> is it's child element)

• In my templates I used combination of DIV and SPAN, it's not required, you can replace them with other elements, as long as you restore the ID and as already been said elements don't have children elements.
• The search in a file starts from the position of the last search in the same file NOT from the top of the file. Knowing that, make sure you don't replace something in the new, already added code.
• If you found two or more instances of a string, you must work only on the first found instance, unless instructed otherwise.

P.S. if you don't understand my explanations, download attached ajaxcomments_template_default.zip package and look how its done there.


Step 7
Open: templates/<your template/details.html template

Insert _below {header} or <body>:

Code: [Select]

<!--mod ajax comments insert start-->
<script type="text/javascript">
var ajaxCommentBG = parseInt('{commentbg}');
var ajaxCommentRatingHide = parseInt('{commentratinghide}');
var ajaxCommentsUrl = '{ajaxcommentsurl}';
var URL_ID = '{url_id}';
var Page = parseInt('{page}');
var PerPage = parseInt('{perpage}');

</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajaxcomments.js"></script>

<!-- uncomment and place this div where you want messages related to comment rating to be showed (additionally to tooltips), you can use this div to display floating messages -->
<!-- <div id="commentratingmsg"></div> -->

<!--mod ajax comments insert end-->
an element with id="commentratingmsg" can be used to display messages after vote for a comment.

Step 7.1 (only if done Step 3)

Replace {paging_stats}
With:

Code: [Select]

<!--mod ajax comments insert start-->
<span id="pagingstats">
<!--mod ajax comments insert end-->
{paging_stats}
<!--mod ajax comments insert start-->
</span>
<!--mod ajax comments insert end-->
an element id="pagingstats" will be used to display paging information.

Step 7.2 (only if done Step 3)

Replace {if paging} with:

Code: [Select]

<!--mod ajax comments insert start-->
<div id="pagingtable"{ifno paging} style="display:none;"{endifno paging}>
<!--mod ajax comments insert end-->

If you have two {if paging}, replace second with:

Code: [Select]

<!--mod ajax comments insert start-->
<div id="pagingtable2"{ifno paging} style="display:none;"{endifno paging}>
<!--mod ajax comments insert end-->

an element id="pagingtable" and id="pagingtable2" will be used to show/hide paging table

Step 7.3 (only if done Step 3)

Replace {paging} with:

Code: [Select]

<!--mod ajax comments insert start-->
<span id="paging">
<!--mod ajax comments insert end-->
{paging}
<!--mod ajax comments insert start-->
</span>
<!--mod ajax comments insert end-->

If you have two {paging}, replace second with:

Code: [Select]

<!--mod ajax comments insert start-->
<span id="paging2">
<!--mod ajax comments insert end-->
{paging}
<!--mod ajax comments insert start-->
</span>
<!--mod ajax comments insert end-->

an element id="paging" and id="paging2" will be used to display paging links.

Step 7.4 (only if done Step 3)

Replace {endif paging} with:

Code: [Select]

<!--mod ajax comments insert start-->
</div>
<!--mod ajax comments insert end-->

If you have two {endif paging}, replace second with the same code.


Step 7.5

Replace {comments} with:

Code: [Select]

<!--COMMENTSTART-->
{comments}
<!--COMMENTEND-->
(these HTML comments are required, they are used as "markers" to detect where to insert new image comments)

Step 7.6

Insert the whole table where {comments} is between <span id="commentstable"> and </span>
Example:

Code: [Select]

<table width="100%" border="0" cellpadding="3" cellspacing="1">
  <tr>
    <td valign="top" class="head1">{lang_author}</td>
    <td valign="top" class="head1">{lang_comment}</td>
  </tr>
  {comments}
</table>
The result is:

Code: [Select]

<span id="commentstable">
  <table width="100%" border="0" cellpadding="3" cellspacing="1">
    <tr>
      <td valign="top" class="head1">{lang_author}</td>
      <td valign="top" class="head1">{lang_comment}</td>
    </tr>
    {comments}
  </table>
</span>

an element with id="commentstable" will be used to display comments. This element can contain children elements.

Step 7.7

Add:

Code: [Select]

<!--mod ajax comments insert start in "commentformmsg" will be displayed any messages related to posting comments.
keep in mind a <br /> will be automatically appended to the front of the message-->
<b><div id="commentformmsg"></div></b>
<!--mod ajax comments insert end-->

an element with id="commentformmsg" will be used to display messages related to comment posting.

Step 8
Open: templates/<your template/comment_bit.html template

Add:

Code: [Select]

<!--mod ajax comments insert start -->
{if comment_rating_enable}<span id="cmsg{comment_id}" title="{comment_vote_tooltip}"><span id="cr{comment_id}" class="comment_rating{comment_class}">{comment_rating_str}</span> {comment_rating_link_good} {comment_rating_link_bad} <span id="crv{comment_id}">{comment_votes}</span> {lang_votes}</span>{endif comment_rating_enable}
<!--mod ajax comments insert end -->

an element with id="cmsg{comment_id}" will be used to show tooltips after visitor voted on a comment.
an element with id="cr{comment_id}" will be used to display comment rating.
an element with id="crv{comment_id}" will be used to display number of comment votes.


Step 8.1

Replace {comment_text}
With:

Code: [Select]

<!--mod ajax comments insert start -->
<a href="#" id="cilh{comment_id}" onClick="return aCTog({comment_id});" style="{if comment_hide}display:inline;{endif comment_hide}{ifno comment_hide}display:none;{endifno comment_hide}"><img id="cih{comment_id}" src="{template_image_url}/plus.png" border="0" /></a>
<div id="commentbox{comment_id}"{if comment_hide} style="display:none;"{endif comment_hide}>
<!--mod ajax comments insert end -->

  {comment_text}

<!--mod ajax comments insert start -->
</div>
<!--mod ajax comments insert end -->

an element with id="cilh{comment_id}" will be used if a comment rating reached "Hide comment if rating below"
en element with id="commentbox{comment_id}" will be used to display comments in.

Step 9

Open: templates/<your template/comment_form.html template

Code: [Select]

<form name="commentform" action="{self}" method="post" onsubmit="postbutton.disabled=true;">
Replace with:

Code: [Select]

<form name="commentform" action="{self}" method="post" onsubmit="return ajaxCommentSubmit(this,'{self}');">
This line is required for the javascript code, it will be used to detect where the


Step 10 (only if done Step 3)

Open: templates/<your template/commentspage_dropdown_form.html template
Find:

Code: [Select]

<form method="post" action="{self}#comments" name="commentsperpage">
Replace it with:

Code: [Select]

<form method="post" action="{self}#comments" name="commentsperpage" onsubmit="return CommentPerPage(this);">


This is it. I hope I didn't forget anything. (I did not check my installation instructions, ran out of steam for today) Done. Works fine on unmodified 4images v1.7.7

Tweaks and version history in the next reply.

[V@no]

----------------- [ Tweaks ] -----------------

Tweak 1

On top of ajaxcomments.php you can find the following settings:

Code: [Select]

define("COMMENT_RATING_ENABLE", true); //enable ratings for comments?
define("COMMENT_RATING_GUEST", false); //allow guests to vote?
define("COMMENT_RATING_OWN", false); //allow rate own comments?
define("COMMENT_RATING_HIDE", -3); //comment with rating below this number will be hidden by default (visitors still will be able read them by clicking at + icon)
define("COMMENTS_PAGES", true); //show pages for comments? must install http://www.4homepages.de/forum/index.php?topic=5830.0
define("COMMENTS_ORDER", 0); //sort comments 0 = ASC or 1 = DESC
Tweak 2

If you did any modifications in details.php in comments related sections, you'll need do the same modifications in ajaxcomments.php
I did copy/paste such parts from details.php into ajaxcomments.php with as little additional modifications as possible.

Also, if something doesn't work right and you go express you rage here, make sure you test with default template first.


----------------- [ Version history ] -----------------

v1.0.4 (2009-12-21) (more info here) (to update - re-download the package and replace ajaxcomments.php)
- CHANGED: on servers with PHP v4.3.0 or newer with html_entity_decode enabled non-latin letters should be converted into proper charset.
 
v1.0.3 (2009-12-14) (more info here) (to update - re-download the package and replace ajaxcomments.php)
- FIXED: with some charsets javascript would display garbage when posting comments.
- FIXED: misspelled constant, which affected displaying comment ratings properly.

v1.0.2 (2009-08-21) (more info here thanks to bash-t) (to update - replace js/ajaxcomments.js)
- FIXED: when used reCAPTCHA image was not automatically refreshed

v1.0.1 (2009-01-21) (more info here)
- FIXED: issue with non-latin letters didn't display properly in the comments. (re-download the package and replace ajaxcomments.php)
- FIXED JavaScript error in InternetExplorer after submitting a comment. (re-do Step 7.6)
- CHANGED: anti-flood protection to 4images' default: 3 minutes between comments on the same image.

v1.0 (2009-01-15)
- first release

[V@no]

Reserved

[Sunny C.]

wow, very Nice!

[KurtW]

top 

[robertx]

Parse error: syntax error, unexpected ']', expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/public_html/details.php on line 679

and on line  679 i have  this    $comment_row[] = $row;

I haven t done the step 3.

Could someone help me ?

[V@no]

15 lines above and below line 679 please.

[robertx]

Thanks for your reply V@no . Please see attached my details.php

[V@no]

In step 4.5 you've replace the entire line, but you were supposed to replace only what it says. (I've added a note to that step)

Line 669 should look like this after the change:

Code: [Select]

       ORDER BY c.comment_date ".(COMMENTS_ORDER ? "DESC" : "ASC")."";

P.S.
I don't know that text editor do you use, but it added extra line between each line. Nothing to worry about though, just file became a little bigger.

[m3ntor]

Hm... I have a problem. I'm from Poland, when we use a polish fonts, peculiar letters. What am i doing, when i write a comment, and fonts in this comment displaying like this: "%u015B%u0107"? Where i must insert a code like this?:

Code: [Select]

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />

Sorry for my bad english

[V@no]

Hello and welcome to 4images forum.

Thank you for reporting this. In my tests I completely forgot check it with non-english text...

I hope it's fixed in v1.0.1

- fixed issue with non-latin letters didn't display properly in the comments. (re-download the package and replace ajaxcomments.php)
- changed anti-flood protection to 4images' default: 3 minutes between comments on the same image.
- fixed JavaScript error in InternetExplorer after submitting a comment. (re-do Step 7.6)

Re-download the package and replace only ajaxcomments.php file.
Also, I've changed Step 7.6
Apparently InternetExplorer chokes when JS tries change innerHTML in a table, so you'll need add a SPAN or DIV around the table with {comments} tag.

[088b9j6yvt3tkqg]

hello V@no 

thanks for the nice mod

I have 2 problems


1- the comment text appears perfect for non-english but some texts (commentformmgs, comments:, joindate:, admin, edit, delete and username) appear like this "�������". the problem happens only after I go to another page or when I post new comments.


2- when I rate a comment (good or bad), the result does not appear instantly. I have to refresh the page. this problem DOES NOT happen if I rate after going to another page or after posting new comments.


I hope I can find solutions or hints.

thanks again

[V@no]

Hello and welcome to 4images forum.

Can I see it?

[088b9j6yvt3tkqg]

Hello and welcome to 4images forum.

Can I see it?

actually it is on my PC (apatchi)

it is a little bit confusing why comments are shown differently when I go to other pages or add comments??

[V@no]

Sorry, I can't reproduce it on my test site.