More than one MxRating on a page

Lance

unread,

Dec 22, 2008, 7:15:59 PM12/22/08

to mxAjax

I have a page that list a series of pictures that I would like to be
able to rate. If the page contains only one I can use the example and
get it working but I am wondering if there are any example of the
mxRating tool being used with multiple rating on one page.

Thanks in advance!!

claylong

unread,

Jan 30, 2009, 4:22:35 PM1/30/09

to mxAjax

Adding multiple mxRating controls on a page should not be too
difficult. All you need to do is make sure that each of the rating
<div> tags has their own id, then make sure that you instantiate a new
mxAjax.Rating javascript object for each one.

So based on the example templates provided, you would duplicate the
mxRating <div> tag (and everything inside it), as well the javascript
"new mxAjax.Rating" segment, giving each new div and mxAjax.Rating
objects new names. Like this:

<head>
<script language="javascript">
var url = "<cfoutput>#ajaxUrl#</cfoutput>";

function init() {
var aj_rater1 = new mxAjax.Rating({
paramArgs: new mxAjax.Param(url,{param:"rating={" +
AJAX_RATING_PARAMETER + "}", cffunction:"setRating"}),
ratings: "1,2,3,4,5",
onOff: "false",
savedMessage: "<font color='red'><b>Rating Saved</b></font>",
messageClass: "star-rating-message",
selectedClass: "selected",
selectedLessClass: "selectedless",
defaultSelectedClass: "defaultSelected",
selectedOverClass: "selectedover",
defaultRating: "2",
overClass: "over",
state: "raterField",
containerClass: "star-rating",
source: "rater1"
});
var aj_rater2 = new mxAjax.Rating({
paramArgs: new mxAjax.Param(url,{param:"rating={" +
AJAX_RATING_PARAMETER + "}", cffunction:"setRating"}),
ratings: "1,2,3,4,5",
onOff: "false",
savedMessage: "<font color='red'><b>Rating Saved</b></font>",
messageClass: "star-rating-message",
selectedClass: "selected",
selectedLessClass: "selectedless",
defaultSelectedClass: "defaultSelected",
selectedOverClass: "selectedover",
defaultRating: "2",
overClass: "over",
state: "raterField",
containerClass: "star-rating",
source: "rater2"
});
}
addOnLoadEvent(function() {init();});
</script>
<LINK REL="stylesheet" type="text/css" href="style.css">

</head>
<body>

<h1>Using mxRating Component</h1>
<input type="hidden" id="raterField" />
<div id="rater1" class="star-rating"><a href="javascript:void(0)"
title="One"></a><a href="javascript:void(0)" title="Two"></a><a
href="javascript:void(0)" title="Three"></a><a href="javascript:void
(0)" title="Four"></a><a href="javascript:void(0)" title="Five"></a></
div>
<br>
<div id="rater2" class="star-rating"><a href="javascript:void(0)"
title="One"></a><a href="javascript:void(0)" title="Two"></a><a
href="javascript:void(0)" title="Three"></a><a href="javascript:void
(0)" title="Four"></a><a href="javascript:void(0)" title="Five"></a></
div>
<br><br><br><br>

</body>

DDavis

unread,

Feb 25, 2009, 11:37:13 AM2/25/09

to mxAjax

Good one on this claylong. I used this for an AutoCompleteMS where I
want to be able to have more than one on the page and just looped each
area using a count. Worked well.

Reply all

Reply to author

Forward