JQuery displaying PHP functions.

Question

I've been trying to do add a couple of new features to my script all day for example, I want to be able to display the average rate and votes casted under my star rating images, like some thing in the example below.

**********
9.8/10 (1160 vote cast)

I've been trying everything and run into new problem after problem after problem. For instance now each new PHP function I have interferes with one another.

For instance my first PHP function getRating() works correctly all by itself but it will not display correctly when using it with my second PHP function evaluateRatingText() and my first PHP function messes up my second PHP function by displaying the average rating all wrong for example it actually displays the value twice.

So how can I make both of my PHP functions work correctly along with my JQuery function which displays my first php function getRating() correctly so that my JQuery function can display both PHP functions accordingly? Can anyone help me out examples would be great?

Here is my PHP functions.

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

// function to retrieve average rating and votes
function evaluateRatingText(){
    $sql= "select * from vote";
    $result=@mysql_query($sql);
    $rs=@mysql_fetch_array($result);
    $avg = (@round($rs['value'] / $rs['counter'],1)) * 10;
    $votes = $rs['counter'];
    echo $avg . "/10  (" . $votes . " votes cast)";
}

Here is the JQuery function.

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

HTML Markup.

<ul class='star-rating'>
  <li class="current-rating" id="current-rating"></li>
  <li class="rating-text" id="rating-text"></li>
  <span id="ratelinks">
  <li><a href="javascript:void(0)" title="1 star out of 10" class="one-star">1</a></li>
  <li><a href="javascript:void(0)" title="2 stars out of 10" class="two-stars">2</a></li>
  <li><a href="javascript:void(0)" title="3 stars out of 10" class="three-stars">3</a></li>
  <li><a href="javascript:void(0)" title="4 stars out of 10" class="four-stars">4</a></li>
  <li><a href="javascript:void(0)" title="5 stars out of 10" class="five-stars">5</a></li>
  <li><a href="javascript:void(0)" title="6 stars out of 10" class="six-star">6</a></li>
  <li><a href="javascript:void(0)" title="7 stars out of 10" class="seven-stars">7</a></li>
  <li><a href="javascript:void(0)" title="8 stars out of 10" class="eight-stars">8</a></li>
  <li><a href="javascript:void(0)" title="9 stars out of 10" class="nine-stars">9</a></li>
  <li><a href="javascript:void(0)" title="10 stars out of 10" class="ten-stars">10</a></li>
  </span>
</ul>

Answer 1

If you're using

echo $rating;

to print the rating out of 10 stars, then just echo a string that uses this rating and the number of votes cast:

echo $rating . "/10  (" . $votesCast . " votes cast)";

Looks like you're almost there.

Answer 2

Add this...

<ul class='star-rating'>
  <li class="current-rating" id="current-rating"></li>
  <li class="rating-text" id="rating-text"></li>
  <span id="ratelinks">
  [...]
  </span>
</ul>

And this...

function getRating(){
    $.ajax({
        [...]
        success: function(result) {
            // apply star rating to element
            $("#current-rating").css({ width: "" + result + "%" });
            // add rating text
            $("#rating-text").text(evaluateRatingText());
        },
        [...]
    });
}

function evaluateRatingText() {
    // Replace the line below with a new call to $.ajax() that gets the information you need from a server-side resource;  sorry, I don't know PHP
    return "9.8/10 (1160 vote cast)";
}

Answer 3

One of the problems is on this line, in the javascript success callback:

$("#rating-text").text(evaluateRatingText());

It looks like you're hoping that it will call the PHP function, which it won't. It's actually calling the same javascript function again (sending another request).

You might want to change it to this:

$("#rating-text").text(result);

Answer 4

Your php functions do not retrieve the data, they print it out immediately.

Instead of 'echo' you should use 'return'.

The reason it shows the rating double is the fact that both functions echo the average rating, only evaluateRatingText appends some more data.

Maybe you'd be better of by starting with some basic php tutorials regarding functions, variables and handling return values before mixing php and javascript.

Answer 5

Aside from the HTML problems (spans wrapping an li and a strange mixture of text and list) you should make one return function plus a calculate function to deal with the whole thing like this

PHP

function echoRatingAll ()
{
     list($value, $counter) = getRating2();  //function returns doesn't print
     echo "$value,$counter"; //we need to echo for the AJAX & we comma delimit

}
function getRating2(){
    $sql= "select `value`, `counter` from vote";
    $result=@mysql_query($sql);
    list($v,$c) = mysql_fetch_row($result);

    return array($v, $c);
 }

JS

success: function(result) {
            var values=result.split(",", result);
            var value = values[0];
            var counter = values[1];
            //do your jquery stuff from here with the two values
        }

if you are unsure how to do the averaging in Javascript just make the PHP return 3 values rather than 2.