Gossamer Forum
Quote Reply
ajax rating system
I was wondering if anyone has successfully created a plugin or modification so that the rating system in links can work through ajax.

You click on the star and it automatically rates it without changing pages.

??

Thanks,

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Hi,

I did actually - not sure I've got the code now though :/

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Ok, took a little while to piece together again - but here you go (I'm sure this will be very useful to other people too =))

In detailed.html, add this into the header:

Code:
<script>
function xmlhttpPost(strURL) {

var xmlHttpReq = false;
var self = this;

// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}

// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}

self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}



function getquerystring() {

var form = document.forms['rateform'];
var ID = form.ID.value;
var rate;
for (var i = 0; i < form.rate.length; i++) {
if(form.rate[i].checked){ rate = form.rate[i].value; }
}

var qstr = 'ID=' + escape(ID) + ';rate=' +escape(rate);
return qstr;

}

function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>

Then, put this EXACT code where you want the rate box to show. The <div id="result"> is very important, as thats where the code is put for showing a succesful update.

Code:
<form name="rateform"><strong>Rate the site <%Title%>:</strong>
<div id="result">
<input type="hidden" name="ID" value="854" />
<input type="radio" id="rate1" name="rate" value="1">1
<input type="radio" id="rate2" name="rate" value="2">2
<input type="radio" id="rate3" name="rate" value="3">3
<input type="radio" id="rate4" name="rate" value="4">4
<input type="radio" id="rate5" name="rate" value="5">5
<input type="radio" id="rate6" name="rate" value="6">6
<input type="radio" id="rate7" name="rate" value="7">7
<input type="radio" id="rate8" name="rate" value="8">8
<input type="radio" id="rate9" name="rate" value="9">9
<input type="radio" id="rate10" name="rate" value="10">10
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("<%config.db_cgi_url%>/rate.cgi")'>
</div>
</form>

Then, in rate_success.html, change the whole page to just have the text you wanna show - for example:

Code:
Thanks for rating <%Title%>. It wil show up in the next update.

That should about do it :)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates

Last edited by:

Andy: May 29, 2009, 11:43 AM
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Hi Jonathan,

I have created this one but it is based on IP(not logged in user). Please let me know if you are still interested.

Cheers,

Dat

Programming and creating plugins and templates
Blog
Quote Reply
Re: [tandat] ajax rating system In reply to
Thanks Andy!

Very simple and to the point. However, I would definately like my users who do not have an account to be able to rate a link very quickly. Dat, yes I'm very interested.

Thanks,

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Just disable the user_rate_required option in Setup > User Options. Once disabled, it will let anyone make a rating.

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Quote Reply
Re: [Andy] ajax rating system In reply to
Duh! Thanks.

Having trouble though, getting a javascript error at

Code:
input value="Go" type="button" onclick='JavaScript:xmlhttpPost("<%config.db_cgi_url%>")'>
Shouldn't it be:
Code:
input value="Go" type="button" onclick='JavaScript:xmlhttpPost("<%config.db_cgi_url%>/rate.cgi")'>

Either way that still doesn't work. I added it to link.html

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Hi,

Yeah, sorry, should have been rate.cgi =)

Re having it in link.html, I'm afraid this solution won't work - as its aimed for detailed pages (you would have issues with duplicate class ID's etc otherwise)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Quote Reply
Re: [Andy] ajax rating system In reply to
Andy,

I still never could get your simple ajax rating to work using the detailed pages.

However, I did translate another program to work the GT:

http://www.masugadesign.com/...jax-star-rating-bar/

Because is all written in php, I had to create a plugin that does the same thing as a global. It still uses php for the backend, I didn't have time to translate the entire thing, nor it is really necessary.

Steps:

1.) Configure your _config-rating.php to where your Glinks tables are.
2.) Edit the js/rating.js file where it says "http://www.yoursite.com" to your actual site
3.) Edit link.html adding this:
Code:
<%stars($ID)%>

4.) Edit include_common_head.html addign this:
Code:
<script type="text/javascript" language="javascript" src="http://www.yoursite.com/js/behavior.js"></script>
<script type="text/javascript" language="javascript" src="http://www.yoursite.com/js/rating.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/default.css" />
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/rating.css" />
5.) Add this global, it is a direct translation of _drawrating.php

Code:
sub {
use Links qw/$DB/;
my ($id, $static) = @_;
my $db = $DB->table("Links");
my $results = $db->select({ID => $id})->fetchrow_hashref();
my $units = 5;
my $rating_unitwidth = 30;
my $ip = $ENV{REMOTE_ADDR};

my $count = $results->{Votes};
my $current_rating = $results->{Rating};

my $tense = ($count==1) ? "vote" : "votes";

if ($results->{Votes} < 1) {
$count = 0;
} else {
$count=$results->{Votes};
}
my $voted = $db->do("SELECT used_ips WHERE used_ips LIKE '%".$ip."%' AND ID='".$id."' ");
my $rating_width = ($count > 0) ? ($current_rating/$count)*$rating_unitwidth : 0;
my $rating1 = ($count > 0) ? $current_rating/$count : 0;
my $rating2 = ($count > 0) ? $current_rating/$count : 0;

if ($static) {
my $static_rater;
$static_rater .= "\n".'<div class="ratingblock">';
$static_rater .= '<div id="unit_long'.$id.'">';
$static_rater .= '<ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$static_rater .= '<li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
$static_rater .= '</ul>';
$static_rater .= '<p class="static">'.$id.'. Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast) <em>This is \'static\'.</em></p>';
$static_rater .= '</div>';
$static_rater .= '</div>'."\n\n";
return join("\n", $static_rater);
} else {
my $rater ='';
$rater.='<div class="ratingblock">';
$rater.='<div id="unit_long'.$id.'">';
$rater.=' <ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$rater.=' <li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
my $ncount;
for ($ncount = 1; $ncount <= $units; $ncount++) {
if(!$voted) {
$rater.='<li><a href="http://www.yoursite.com/...amp;amp;c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';
}
}
$ncount=0;
$rater.=' </ul>';
$rater.=' <p';
if($voted){ $rater.=' class="voted"'; }
$rater.='>Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast)';
$rater.=' </p>';
$rater.='</div>';
$rater.='</div>';
return $rater;
}
}

- don't forget to change yoursite.com here as well

6.) upload the 3 folders to your root directory (httpdocs, public_html) whatever, unless you plan 2 change the code later

I believe that is everything. If anyone has any suggestions, improvements, or ideas for the script, let me know!






Good luck!

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Hi Jonathan,
looks nice!
Do you have a demo working with glinks?
Thanks

Matthias
gpaed.de
Quote Reply
Re: [Matthias70] ajax rating system In reply to
Hmmm, apparently still has some bugs with the IP address, but you can see the basic idea:

http://www.jokecan.com

Will get on that tomorrow...

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
So I got it working again and figured out the bug...

Change this line (in the global):

Code:
my $voted = $db->do("SELECT used_ips WHERE used_ips LIKE '%".$ip."%' AND ID='".$id."' ");

to this:

Code:

my $condition = GT::SQL::Condition->new('used_ips', 'LIKE', '%'.$ip.'%');
my $sth = $db->select(['used_ips'], $condition, {ID => $id}) or die $GT::SQL::error;
my $voted = $sth->fetchrow_hashref();

If anyone knows a less complicated way than those 3 lines, please post it.

Now go have fun now,

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Everytime I think everything is working fine, I find something new that is a problem.

Here is my lasted global:

Code:
sub {
use Links qw/$DB/;
my ($id, $static) = @_;
my $db = $DB->table("Links");
my $results = $db->select({ID => $id})->fetchrow_hashref();
my $units = 5;
my $rating_unitwidth = 30;
my $ip = $ENV{REMOTE_ADDR};
my $count = $results->{Votes};
$count = 0 if $count < 1;
my $current_rating = $results->{Rating};

my $tense = ($count == 1) ? "vote" : "votes";
my $condition = GT::SQL::Condition->new('used_ips', 'LIKE', '%'.$ip.'%');
my $sth = $db->select(['used_ips'], $condition, {ID => $id}) or die $GT::SQL::error;
my $voted = $sth->fetchrow_hashref();
my $rating_width = ($count > 0) ? sprintf("%.2f", ($current_rating/$count)*$rating_unitwidth) : 0;
my $rating1 = ($count > 0) ? sprintf("%.2f", ($current_rating/$count)) : 0;
my $rating2 = ($count > 0) ? sprintf("%.2f", ($current_rating/$count)) : 0;

if ($static) {
my $static_rater;
$static_rater .= "\n".'<div class="ratingblock">';
$static_rater .= '<div id="unit_long'.$id.'">';
$static_rater .= '<ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$static_rater .= '<li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
$static_rater .= '</ul>';
$static_rater .= '<p class="static">Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast) <em>This is \'static\'.</em></p>';
$static_rater .= '</div>';
$static_rater .= '</div>'."\n\n";
return join("\n", $static_rater);
} else {
my $rater ='';
$rater.='<div class="ratingblock">';
$rater.='<div id="unit_long'.$id.'">';
$rater.=' <ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$rater.=' <li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
my $ncount;
for ($ncount = 1; $ncount <= $units; $ncount++) {
if(!$voted) {
$rater.='<li><a href="http://www.jokecan.com/...amp;amp;c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';
}
}
$ncount=0;
$rater.=' </ul>';
$rater.=' <p';
if($voted){ $rater.=' class="voted"'; }
$rater.='>Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast)';
$rater.=' </p>';
$rater.='</div>';
$rater.='</div>';
return $rater;
}
}


Everything works fine in Internet Explorer, however in firefox, I still have problems.

I translated this global from this php file: _drawrating.php

Code:

<?php
/*
Page: _drawrating.php
Created: Aug 2006
Last Mod: Mar 18 2007
The function that draws the rating bar.
---------------------------------------------------------
ryan masuga, masugadesign.com
ryan@masugadesign.com
Licensed under a Creative Commons Attribution 3.0 License.
http://creativecommons.org/licenses/by/3.0/
See readme.txt for full credit details.
--------------------------------------------------------- */
function rating_bar($id,$units='',$static='') {
require('_config-rating.php'); // get the db connection info

//set some variables
$ip = $_SERVER['REMOTE_ADDR'];
if (!$units) {$units = 10;}
if (!$static) {$static = FALSE;}
// get votes, values, ips for the current rating bar
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $rating_dbname.$rating_tableName WHERE id='$id' ")or die(" Error: ".mysql_error());

// insert the id in the DB if it doesn't exist already
// see: http://www.masugadesign.com/...ing-bar/#comment-121
if (mysql_num_rows($query) == 0) {
$sql = "INSERT INTO $rating_dbname.$rating_tableName (`id`,`total_votes`, `total_value`, `used_ips`) VALUES ('$id', '0', '0', '')";
$result = mysql_query($sql);
}
$numbers=mysql_fetch_assoc($query);

if ($numbers['total_votes'] < 1) {
$count = 0;
} else {
$count=$numbers['total_votes']; //how many votes total
}
$current_rating=$numbers['total_value']; //total number of rating added together and stored
$tense=($count==1) ? "vote" : "votes"; //plural form votes/vote
// determine whether the user has voted, so we know how to draw the ul/li
$voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $rating_dbname.$rating_tableName WHERE used_ips LIKE '%".$ip."%' AND id='".$id."' "));
// now draw the rating bar
$rating_width = @number_format($current_rating/$count,2)*$rating_unitwidth;
$rating1 = @number_format($current_rating/$count,1);
$rating2 = @number_format($current_rating/$count,2);

if ($static == 'static') {
$static_rater = array();
$static_rater[] .= "\n".'<div class="ratingblock">';
$static_rater[] .= '<div id="unit_long'.$id.'">';
$static_rater[] .= '<ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$static_rater[] .= '<li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
$static_rater[] .= '</ul>';
$static_rater[] .= '<p class="static">'.$id.'. Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast) <em>This is \'static\'.</em></p>';
$static_rater[] .= '</div>';
$static_rater[] .= '</div>'."\n\n";
return join("\n", $static_rater);

} else {
$rater ='';
$rater.='<div class="ratingblock">';
$rater.='<div id="unit_long'.$id.'">';
$rater.=' <ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$rater.=' <li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
for ($ncount = 1; $ncount <= $units; $ncount++) { // loop from 1 to the number of units
if(!$voted) { // if the user hasn't yet voted, draw the voting stars
$rater.='<li><a href="db.php?j='.$ncount.'&amp;q='.$id.'&amp;t='.$ip.'&amp;c='.$units.'" title="'.$ncount.' out of '.$units.'" class="r'.$ncount.'-unit rater" rel="nofollow">'.$ncount.'</a></li>';
}
}
$ncount=0; // resets the count
$rater.=' </ul>';
$rater.=' <p';
if($voted){ $rater.=' class="voted"'; }
$rater.='>'.$id.' Rating: <strong> '.$rating1.'</strong>/'.$units.' ('.$count.' '.$tense.' cast)';
$rater.=' </p>';
$rater.='</div>';
$rater.='</div>';
return $rater;
}
}
?>


Does anyone see anything off the top off their heads that says "INCOMPATIBLE" with firefox. I have the php version working fine in both browsers... all the other files are basically the same.
Eye yah eye yah eye... lol

Maybe someone can see something I don't... here is the example: http://www.jokecan.com/

I'm taking a break for a while...

- Jonathan

Last edited by:

jdgamble: May 30, 2009, 7:24 PM
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Mm, so what part isn't working for you? I tried the star stuff, and it accepted my rating just fine.

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Quote Reply
Re: [Andy] ajax rating system In reply to
I only had an error in Firefox, but I figured out what was causing the error, I just don't know why:

Code:
<script type="text/javascript">
//<![CDATA[
registerEvent(window, 'onload', function () {
var loginbar = document.getElementById('loginbar');
if (!loginbar)
return;
var loginlink = loginbar.firstChild;
if (loginlink.className != 'out')
return;
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
if (cookies.match(/^\s*<%config.user_cookie_prefix%>s=[0-9a-f]{32}\s*$/)) {
loginlink.href = '<%config.db_cgi_url%>/user.cgi?logout=1';
loginlink.className = 'in';
loginlink.firstChild.nodeValue = 'Logout';
break;
}
}
});
//]]>
</script>


This login/logout javascript somehow messes up the AJAX part of the rate script, but only in firefox. If you know why it does this or how to rewrite the code, let me know.

Thanks,

- Jonathan

Last edited by:

jdgamble: Jun 6, 2009, 10:48 AM
Quote Reply
Re: [jdgamble] ajax rating system In reply to
Are you using static pages, or via mod_rewrite? If using mod_rewrite, you could just get rid of that code - and use a simple bit like:

Code:
<%if user.Username%>
logout bar
<%else%>
login bar
<%endif%>

I can't see any reason why it would cause issues though. Whats the exact error you see in Tools > Error Consol, in FF?

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Quote Reply
Re: [Andy] ajax rating system In reply to
Well, if I remove it, the login works fine anyway, just trying 2 figure out why there is a problem in the first place.

It says

Quote:
Warning: Error in parsing value for property 'width'. Declaration dropped.
Source File: http://www.mysite.com/...c/luna/luna_core.css
Line: 573
Error: event is undefined
Source File: http://www.mysite.com/static/utils.js
Line: 61

line 573 in luna_core.css is this:

Code:

.row .value input.text, .row .value input.password, .row .value textarea {
width: expression(this.parentNode.offsetWidth * 0.74 + 'px'); <----- line 573
}

line 61 in utils.js is this:

Code:
function _eventHandler(event) {
if (!event) event = window.event;
var events = this['on' + event.type + 'Events']; <---- line 61
if (!events)
return;
for (var i = 0; i < events.length; i++) {
this.eventMethod = events[\i]; <--- i added \ to avoid italics
if (this.eventMethod(event) == false) {
this.eventMethod = null;
return false;
}
this.eventMethod = null;
}
}

Hmmm....

- Jonathan
Quote Reply
Re: [jdgamble] ajax rating system In reply to
MMm, afraid I can't see any reason for that error :/

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates