简体   繁体   中英

Simple ajax star rating with php

I trying to setup a simple 5 star rating system and have managed to thoroughly frustrate myself. I am already using one PHP query pull from the table called "place". I have a second table labeled "vote". I have no problems with the "place" table, those elements populate just fine. The only issues is getting the Ajax requests to work with the PHP which at this time is leaving sobbing in a corner.

I been trying to use the following tutorial but for all my effort can't seem to figure out what is blocking my code from executing properly?

http://sandbox.ronggur.com/2010/01/19/jquery-tutorial-simple-ajax-star-rating-with-php-extended/

Any help is greatly appreciated.

Here's my Code

    <div id="pagewrap">
        <div id="widgets">
<?php

$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);



   $query = "SELECT * FROM place";

        $data = mysqli_query($dbc, $query)
            or die("Error: ".mysqli_error($dbc));   

            while ($row = mysqli_fetch_array($data)) 
            {       
                echo '<div class="content">';                                           
                    echo '<p id="type"> ' . $row['free'] . $row['paid'] . '</p>';  
                    echo '<div id="holder">';

                    echo '<div id="loc_cont"><a href="site_info.php?id=' . $row['placeId'] . '"><img id="place_logo" alt="' . $row['placename'] . '" src="' . THUMBNAILS . $row['thumb'] . '" /></a>';

                        echo '</div>';

                        echo '<div class="info">';

                        echo '<p id="loc">' . $row['placename'] . ' - ' . $row['city'] . '</p>';

                        echo '</div>';
                   echo ' </div>';
                    echo '<div class="review">';
                    echo '<div class="rates">';
                    include_once('PHP/rating.php');
                        #$star = fetchStar();
                        #echo '<h2>Star Rater - '. $row['placeId'] .'</h2>';
                        echo '<ul class="star-rating" id="star-rating-<'. $row['placeId'] .'"';
                            echo '<li current-rating-<'. $row['placeId'] .'" style="width:getRating('. $row['placeId'] .')%"><!-- will show current rating --></li>';
                                echo '<span id="'. $row['placeId'] .'">';
                                    echo '<li><a href="javascript:void(0)" title="1 star out of 5" class="one-star">1</a></li>';
                                    echo '<li><a href="javascript:void(0)" title="2 stars out of 5" class="two-stars">2</a></li>';
                                    echo '<li><a href="javascript:void(0)" title="3 stars out of 5" class="three-stars">3</a></li>';
                                    echo '<li><a href="javascript:void(0)" title="4 stars out of 5" class="four-stars">4</a></li>';
                                    echo '<li><a href="javascript:void(0)" title="5 stars out of 5" class="five-stars">5</a></li>';
                                echo '</span>';
                        echo '</ul>';
                    echo '</div>';
                    echo '</div>';
               echo '</div>';
          }                  

mysqli_close($dbc);

?>
        </div>
</div><!--End PageWrap div-->
    <?php
    if($_GET['do']=='rate'){
         // do rate and get id
         rate($_GET['placeId']);
            }else if($_GET['do']=='getrate'){
             // get rating and get id
             getRating($_GET['placeId']);
            }

    // function to retrieve
    function getRating($placeId){
      $sql= "select * from vote where placeId = '".$placeId."' ";
     $result=@mysql_query($sql);
     $rs=@mysql_fetch_array($result);
     // set width of star
     $rating = (@round($rs[value] / $rs[counter],1)) * 20;
     echo $rating;
    }


    // function to insert rating
    function rate($placeId){
     $text = strip_tags($_GET['rating']);
      $update = "UPDATE vote SET counter = counter + 1, value = value + ".$_GET['rating']."  WHERE placeId = '".$placeId."' ";

     $result = @mysql_query($update);
    }
    ?>

/




 / JavaScript Document
     $(document).ready(function() {
     // get rating function


     function getRating(id){
     $.ajax({
     type: "GET",
     url: "../PHP/rating.php",
     data: "do=getrate&placeId="+id,
     cache: false,
     async: false,
     success: function(result) {
     // apply star rating to element
     $("#current-rating-"+id+"").css({ width: "" + result + "%" });
       },
     error: function(result) {
     alert("some error occured, please try again later");
     }
     });
     }

     // link handler
     $('.rates li a').click(function(){
     // get the parent id
     var idStar = $(this).parent().parent().attr('id');
     $.ajax({
     type: "GET",
     url: "../PHP/rating.php",
     data: "rating="+$(this).text()+"&do=rate&placeId="+idStar,
     cache: false,
     async: false,
     success: function(result) {
     // remove #ratelinks element to prevent another rate
     $("#ratelinks").remove();
     // get rating after click
     getRating(idStar);
     },
     error: function(result) {
     alert("some error occured, please try again later");
     }
     });

     });
     });

Nathan, I dont have coffee with me right now so cant go through your code. But can direct you to link where something similar is available with code hints.

Click Here

You can try this http://orkans-tmp.22web.net/star_rating/index.html its very easy to implement.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM