Question

I can’t seem to figure out this problem for some reason my piece of code (no votes cast) will be displayed if there are no votes casted in Firefox but not in Internet Explorer I was wondering if some can show me how to fix this problem so the code is displayed in both browsers?

I’m using JQuery and PHP.

Here is the PHP code.

// function to retrieve average and votes
function getRatingText(){
    $sql= "SELECT * FROM vote";
    $result = mysql_query($sql);
    $rs = mysql_fetch_array($result);
    if (!empty($rs['value']) && !empty($rs['counter'])){
        $avg = (round($rs['value'] / $rs['counter'],1));
        $votes = $rs['counter'];
        echo $avg . "/10  (" . $votes . " votes cast)";
    } else {
        echo "(no votes cast)";
    }
}

JQuery code.

$(document).ready(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 dynamically
                $("#current-rating").css({ width: "" + result + "%" });
                 // add rating text dynamically
                $("#rating-text").text(getRatingText());
            },
            error: function(result) {
                alert("some error occured, please try again later");
            }
        });
    }

    // get average rating
    getRatingText();
    // get average rating function
    function getRatingText(){
        $.ajax({
            type: "GET",
            url: "update.php",
            data: "do=getavgrate",
            cache: false,
            async: false,
            success: function(result) {
                // add rating text
                $("#rating-text").text(result);
            },
            error: function(result) {
                alert("some error occured, please try again later");
            }
        });
    }

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

    });
});

Answer 1

In the JavaScript, your first call to getRatingText() is incorrect (The call inside the getRating() function):

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

You are actually executing this because your method does not return anything:

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

Change that line to just:

getRatingText();