JQuery Alert Problem?

Question

I'm trying to get the following code to display only on specific pages but when I click through certain pages like the home page or any other pages that does not use this code I get the following `alert("some error occured, please try again later");.

How can I have the code not display the alert box on pages that do not use this JQuery code and still have the code work?

I'm using JQuery, PHP & MySQL.

Here is the JQuery code.

$(document).ready(function() {

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

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


    // 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

You are calling your functions for every document, because they're not triggered by a specific selector. Why not simply remove those calls to getRating() and getRatingText() outside of the $('#ratelinks li a').click()?

Answer 2

Try this, using an if to check if the id="rating-text" element is there:

$(document).ready(function() {

    if($("#rating-text").length) {
      // get average rating
      getRatingText();
      // get current rating
      getRating();
    }
    // 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");
            }
        });
    }

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


    // 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 3

How can I have the code not display the alert box on pages that do not use this JQuery code and still have the code work?

They do use it, that's the problem. One option is to move everything inside a function and only call the javascript function in the pages that need this code to run. If you have a php include like a header.inc you need to pass some parameter to your head and call the function only when you need it.

Answer 4

Tbere are different approaches to this problem:

1. Try inserting the code into a js file and include it via <script src='' /> with the help of PHP.
2. Use a switch for every page that should include this script.
3. Use an absolute url for the update.php instead of a relative one.

For what I imagine you have, you need number 2. In a few minutes will post code about this.