Basic installation question

Mar 10, 2011 at 3:19 AM
Edited Mar 10, 2011 at 3:21 AM

I have downloaded this & I am really keen to implement it on my review website.

However I am unsure how to do this as there are no clear instructions.

How do I do this:

  • Place a reference to the rateit.css stylesheet into the page head.
  • Place a script reference to jquery.rateit.min.js before your </body> tag.

Do you have an example code for the above references?

Also how do I place the star rater on any given webpage?

A simplified instruction installation document would be highly beneficial.

Coordinator
Mar 10, 2011 at 8:02 AM
Edited Mar 10, 2011 at 8:03 AM

Have you looked at the online examples: http://www.radioactivethinking.com/rateit/example/example.htm

A basic page would look like this:

 


 

<!DOCTYPE html>
<html>
<head>
    <title>Sample page</title>
    <!-- here is your CSS file -->
    <link href="/css/rateit.css" rel="stylesheet" type="text/css">
    <!-- here is the reference to jQuery, although it could also be at the bottom of the page -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Welcome</h1>
<!-- here is a rateit plugin placeholder -->
<div class="rateit"></div>
 
<!-- and finally , the rating plugin code reference -->
<script src="/scripts/jquery.rateit.min.js" type="text/javascript"></script>
</body>
</html>

 


 

 

Although in order to hook it up with your backend system, you'll need some knowledge of javascript, a basic implementation would be:

<!DOCTYPE html>
<html>
<head>
    <title>Sample page</title>
    <!-- here is your CSS file -->
    <link href="/css/rateit.css" rel="stylesheet" type="text/css">
    <!-- here is the reference to jQuery, although it could also be at the bottom of the page -->
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
 
</head>
<body>
    <!-- let's say this is a product review article -->
    <h1>
        Product A</h1>
    <p>
        This is a description of product A</p>
    <!-- here is a rateit plugin placeholder -->
    <!-- I've added a data-* attribute that contains the product ID -->
    <div class="rateit" data-productid="32423">
    </div>
 
    <!-- and finally , the rating plugin code reference -->
    <script src="/scripts/jquery.rateit.min.js" type="text/javascript"></script>
 
    <script>
        //bind to the rated event
        $('.rateit').bind('rated'function () {
            var el = $(this);
            var id = el.data('productid'); //get the product ID
            $.ajax({ url: '/rating.php'//the URL to send it to
                data: { productID: id, rating: el.rateit('value') }, //the form data to send
                success: function () { 
                    //this function executes when everyting is ok
                    alert('the rating was succesfull');
                    //perhaps we want to disable further rating?
                    el.rateit('readonly'true);
                },
                type: 'POST' //post the data
            });
        });
</script>
 
</body>
</html>

 


Mar 12, 2011 at 4:43 AM
Hi Gidon,

Thank you for taking the time to write this informative reply.

However, I have discovered the website builder software I am using (wysiwyg web builder) has all jquery scripts running on jquery 1.4.2. Their support have said if I update to 1.4.3 there is no backward compatibility & some of my existing scripts will not work. Is it possible your star rater will work on 1.4.2?

I am trying to find out when they will upgrade because I really like your star rater & it would be a great fit for my review website (www.spy.my).

When they do update I think someone in their community will create this as an extension to just plug in.

Best Regards

Michael


From: [email removed]
To: [email removed]
Date: Thu, 10 Mar 2011 00:02:39 -0800
Subject: Re: Basic installation question [rateit:249121]

From: gidon
Have you looked at the online examples: http://www.radioactivethinking.com/rateit/example/example.htm
A basic page would look like this:



<!DOCTYPE html>
<html>
<head>
    <title>Sample page</title>
    <!-- here is your CSS file -->
    <link href="/css/rateit.css" rel="stylesheet" type="text/css">
    <!-- here is the reference to jQuery, although it could also be at the bottom of the page -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Welcome</h1>
<!-- here is a rateit plugin placeholder -->
<div class="rateit"></div>
 
<!-- and finally , the rating plugin code reference -->
<script src="/scripts/jquery.rateit.min.js" type="text/javascript"></script>
</body>
</html>




Although in order to hook it up with your backend system, you'll need some knowledge of javascript, a basic implementation would be:

<!DOCTYPE html>
<html>
<head>
    <title>Sample page</title>
    <!-- here is your CSS file -->
    <link href="/css/rateit.css" rel="stylesheet" type="text/css">
    <!-- here is the reference to jQuery, although it could also be at the bottom of the page -->
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
 
</head>
<body>
    <!-- let's say this is a product review article -->
    <h1>
        Product A</h1>
    <p>
        This is a description of product A</p>
    <!-- here is a rateit plugin placeholder -->
    <!-- I've added a data-* attribute that contains the product ID -->
    <div class="rateit" data-productid="32423">
    </div>
 
    <!-- and finally , the rating plugin code reference -->
    <script src="/scripts/jquery.rateit.min.js" type="text/javascript"></script>
 
    <script>
        //bind to the rated event
        $('.rateit').bind('rated', function () {
            var el = $(this);
            var id = el.data('productid'); //get the product ID
            $.ajax({ url: '/rating.php', //the URL to send it to
                data: { productID: id }, //the form data to send
                success: function () { 
                    //this function executes when everyting is ok
                    alert('the rating was succesfull');
                    //perhaps we want to disable further rating?
                    el.rateit('readonly', true);
                },
                type: 'POST' //post the data
            });
        });
</script>
 
</body>
</html>



Read the full discussion online.
To add a post to this discussion, reply to this email (rateit@discussions.codeplex.com)
To start a new discussion for this project, email rateit@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com
Coordinator
Mar 12, 2011 at 5:14 PM

 

Hi Michael,

There was one important upgrade in jQuery 1.4.3 on which RateIt depends, namely Html5 data-* support.
I don't think they introduced any breaking changes, so you might want to just try updating to 1.4.3 or 1.4.4. And check if everything still works.

I wouldn't update to 1.5 because that might cause some problems.

Bye

Gidon