Avatar

i know theres a lot of star rating scripts out there, but i sort of want to make my own, so if there is anyone out there who knows mootools, im sure there has to be a shorter way to do this

ill just post the whole thing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CSS: Star Rating Redux</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="/styles/star_rating.css" rel="stylesheet" type="text/css" media="all">
	
	<script type="text/javascript" src="/scripts/mootools.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function(){
	$('1of5').addEvent('click', function(e) {
	e = new Event(e).stop();
 	var url = "/rate.php?vote=1";
 	new Ajax(url, {
		method: 'get',
		update: $('log')
	}).request();
});
$('2of5').addEvent('click', function(f) {
	e = new Event(f).stop();
 	var url = "/rate.php?vote=2";
 	new Ajax(url, {
		method: 'get',
		update: $('log')
	}).request();
});
$('3of5').addEvent('click', function(g) {
	e = new Event(g).stop();
	var url = "/rate.php?vote=3";
 	new Ajax(url, {
		method: 'get',
		update: $('log')
	}).request();
});
$('4of5').addEvent('click', function(h) {
	e = new Event(h).stop();
	var url = "/rate.php?vote=4";
 	new Ajax(url, {
		method: 'get',
		update: $('log')
	}).request();
});
$('5of5').addEvent('click', function(i) {
	e = new Event(i).stop();
	var url = "/rate.php?vote=5";
 	new Ajax(url, {
		method: 'get',
		update: $('log')
	}).request();
});
		}); 
	</script>
	
	
 <style type="text/css">
<!--



#log {
	background: #f8f8f8;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	padding: 0.3em;
	margin-top: 10px;
}
 
#start a { 
	font-weight: bold;
}



-->
    </style>
</head>
<body>
	<h1>CSS: Star Rating Redux</h1>	
	<div id="log">	
	<ul class="star-rating">
		<li class="current-rating" style="width:30%;">Currently 3/5 Stars.</li>
		<li><a href="#" id="1of5" title="1 star out of 5" class="one-star">1</a></li>
		<li><a href="#" id="2of5" title="2 stars out of 5" class="two-stars">2</a></li>
		<li><a href="#" id="3of5" title="3 stars out of 5" class="three-stars">3</a></li>
		<li><a href="#" id="4of5" title="4 stars out of 5" class="four-stars">4</a></li>
		<li><a href="#" id="5of5" title="5 stars out of 5" class="five-stars">5</a></li>
	</ul>
</div>

	</body>
</html>

Refactorings

No refactoring yet !

66e7eefb458c3d59c6a098d29f777f31

ThomW

November 21, 2007, November 21, 2007 13:57, permalink

2 ratings. Login to rate!

You could definitely save some typing and make changes easier to make by condensing your initialization

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
window.addEvent('domready', function()
{
	for (idx = 1; idx < 5; idx++)
	{
		$(idx + 'of5').addEvent('click' function(e) {
			e = new Event(e).stop();
			new Ajax('rate.php?vote=' + idx, 
				method: 'get',
				update: $('log')
		}).request();
	}
});
</script>
5170ca260dbd2cdfd5a887a4dba7636f

Jeremy Weiskotten

November 21, 2007, November 21, 2007 18:20, permalink

1 rating. Login to rate!

Slight changes to the previous. The loop needs to process idx == 5. Also extracted the body of the loop into a function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">

function addRatingClickEvent(idx) {
	$(idx + 'of5').addEvent('click' function(e) {
		e = new Event(e).stop();
		new Ajax('rate.php?vote=' + idx, 
			method: 'get',
			update: $('log')
	}).request();
}

window.addEvent('domready', function() {
	for (idx = 1; idx <= 5; idx++) {
		addRatingClickEvent(idx);
	}
});

</script>
Avatar

blank714.myopenid.com

November 21, 2007, November 21, 2007 18:41, permalink

No rating. Login to rate!

i couldnt get any of those to work.. would anything in the html part have to be changed?

thanks

5170ca260dbd2cdfd5a887a4dba7636f

Jeremy Weiskotten

November 21, 2007, November 21, 2007 20:53, permalink

No rating. Login to rate!

No, you shouldn't need to.

One difference between the refactorings and the original that I see is that the domready event handler only applies to the first click handler in your example, but to all in the others. Maybe that's the problem... I'm not sure because I'm not familiar with mootools.

Your refactoring





Format Copy from initial code

or Cancel