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");
}
});
});
});
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");
}
});
});
});
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()?
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.
Tbere are different approaches to this problem:
<script src='' /> with the help of PHP.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.