JQuery Updating Problem?

Question

I can only get the functions getRating(); and getRatingText(); to update without reloading the web page. But the other functions getRatingText2(); and getRatingAvg(); wont update until I reload the web page.

How can I get all the functions to update without reloading my web page?

Here is the JQuery script.

$(document).ready(function() {

    if($("#rating-text").length) {

      getRatingText();

      getRatingText2();

      getRatingAvg();

      getRating();
    }


    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");
            }
        });
    }



        function getRatingText2(){
            $.ajax({
                type: "GET",
                url: "update.php",
                data: "do=getavgrate2",
                cache: false,
                async: false,
                success: function(result) {

                    $("#rating-text2").text(result);
                },
                error: function(result) {
                    alert("some error occured, please try again later");
                }
            });
        }



        function getRatingAvg(){
            $.ajax({
                type: "GET",
                url: "update.php",
                data: "do=getavgrate3",
                cache: false,
                async: false,
                success: function(result) {

                    $("#grade-avg").text(result);
                },
                error: function(result) {
                    alert("some error occured, please try again later");
                }
            });
        }


    function getRating(){
        $.ajax({
            type: "GET",
            url: "update.php",
            data: "do=getrate",
            cache: false,
            async: false,
            success: function(result) {

                $("#current-rating").css({ width: "" + result + "%" });

                $("#rating-text").text(getRatingText());
            },
            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) {

                $("#ratelinks").remove();

                getRating();
            },
            error: function(result) {
                alert("some error occured, please try again later");
            }
        });

    });
});

Answer 1

The $(document).ready function is only called when the page is finished loading and the dom is ready. getRatingText2() and getRatingAvg() are only called in that function so that is why they are only called when the page is loaded.

Perhaps they should be called in the click event along with you other functions or from getRating()? (getRating(); and getRatingText(); )

Answer 2

Are your "click" items generated dynamically? If they are, use
$('#ratelinks li a').live('click', funcion())