Unbekannter Autor ;)

Programming & Webdesign Resources

By

No-MVC Zend Framework: jQuery Star Rating code / Part IV

Now for the easy part: creating the page for our jQuery Star Rating plugin. It’s going to be just a bit of HTML, JavaScript with Ajax components, and PHP. If you want to integrate the Star Rating in an existing page, you can just copy the relevant parts into any HTML file.

The JavaScript

Before continuing (or if this doesn’t work for you), you might want to familiarize yourself with the Star Rating plugin at http://zensoftware.org/archives/483.

Add the following lines to the HEAD section of your “index.php”. This assumes that you already have one… if not, use you standard HTML template, and don’t forget to include your bootstrap ;-)

<script type="text/javascript" src="/js/jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/rating/jquery.rating.js"></script>
<link type="text/css" href="/js/rating/jquery.rating.css" rel="stylesheet" media="screen" />

<script type="text/javascript">
$(function(){

 $(".rating")
 .rating({"showCancel": false})
 .bind("change", function(){
   var id = $(this).attr("id");
   var rate = "id=" + id + "&val=" + $(this).val();
   var loading = 'Loading';
   // Or use image instead, looks prettier ;-) 
   // var loading = '<img src="/images/loading.gif" />';
   $.ajax({
     type: "GET",
     url: "/includes/rating.php",
     dataType: "json",
     data: rate,
     timeout: 10000,
     beforeSend: function(){
       $("#rating_value_" + id).html(loading);
     },
     success: function(response){
       $("#rating_value_" + id).html(response.average + " points");
     },
     error: function(){
       $("#rating_value").html("Error!");
     }
    }); // end ajax
  }); // end rating / bind

}); // end $()
</script>

I used “loading” as a variable (as opposed to the direct output of “Error!”). You can Google the standard Ajax loading image, and put the HTML image tag in that variable to pretty things up, instead of that boring message.

BTW, I always use a leading slash and the complete path in relation to the root directory (e.g. “/images”) before each image, JS and CSS file. This way, I don’t have to worry about broken links when I split header and content sections into different files, and move them to different directories… which I favorize, because header sections are the same throughout the website, whereas content sections might use different templates.

The PHP / HTML code

You can put this code anywhere within your BODY section of your “index.php”, even in existing pages’ DIVs:

<?php
$id = 1;
$rating = new Mylib_Rating_Controller();
echo $rating->getRatingView($id);
?>

Set the variable “$id” to any unique id you want to rate. On my website surfspot.de, I use it to rate a page, so the id comes from my database, and represents the page id. If you have more than one rating on one page, say for a couple of images, instantiate the class once, and only use echo $rating->getRatingView($id) with a different id for each image.

Next up: The jQuery Ajax receiver

5 Responses to No-MVC Zend Framework: jQuery Star Rating code / Part IV

  1. Mahboob says:

    Hi

    If I set a Value 0 then one STAR is show as select how can if this.
    using ASP.net MVC

    Test with
    jquery-1.3.2.min.js
    jquery-1.5.min.js

  2. admin says:

    Hi Mahboob,

    $(“.rating”).rating({showCancel: true, startValue: null,}) should do the trick, but I haven´t tested it yet. Pls refer to http://zensoftware.org/archives/483 for details on options.

    Cheers, Joerg

  3. Mahboob says:

    Hi Cheers, Joerg

    dear i don’t want to show Cancel Button. but when getting value 0 then not star selected.

  4. admin says:

    I know ;) Set showCancel to false, then. I just copied the line from the options documentation. On that page, there´s a comment describing how to show blanks instead of one default selected option, check that one out for details.

  5. Jogi says:

    Its a nice example, but here is a code with a new ajax-kind of fetching that works on remote servers. http://www.ratingcode.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>