Okay so I am having the following problem. I have gotten AJAX to work and am trying to get Javascript to fade out an old review score and fade in with a new score. The important part right now is that when I try to run it I get the following error:
Code:
Uncaught ReferenceError: preciseResponseAverage is not defined
(anonymous function)
The following is my current code:
Code:
function starSubmitFxn(starNumber) {
function fadeIn(average, color){
'use strict';
var ratingAverage = document.getElementById('rating_average');
ratingAverage.innerHTML = (average);
//now time to change the ratings color
var entityRating = document.getElementById('rating');
entityRating.style.color = color;
window.color = color;
}
'use strict';
window.fade('rating');
//setTimeout("fade('rating')", 1000);
var ajax = getXMLHttpRequestObject();
if (ajax) {
var currentUsername = '<?php echo $current_username; ?>';
var currentEntityId = <?php echo $entity_id; ?>;
// Create the Ajax object:
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
//Check the status code:
if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status === 304) ) {
//document.getElementById('ajax_status').innerHTML = ajax.responseText;
var starResponse = JSON.parse(ajax.responseText);
var starResponseNumber = parseInt(starResponse["1"].value);
var starResponseAverage = (parseInt(starResponse["1"].average));
var preciseResponseAverage = starResponseAverage.toPrecision(2);
var starResponseColor = starResponse["1"].newColor;
//var ratingDiv = document.getElementById('rating');
U.removeEvent(U.$('star_rating_div'), 'mouseout', function(){ newStarRating("<? echo $current_user_review_rows['review_score'] ?>", 'blue'); } );
U.addEvent(U.$('star_rating_div'), 'mouseout', function(){ newStarRating(starResponseNumber, 'blue'); } );
if (!isNaN(starResponseNumber)) {
//newStarRating(ratingNumber, "blue");//end of newStarRating call
var i = null;
for (i = 1; i <= 10; i++) {
document.getElementById('rating_star_' + i).src = '../images/white_star_17px.png';
} //end of star color reset
var j = null;
for (j = 1; j <= starResponseNumber; j++) {
document.getElementById('rating_star_' + j).src = '../images/blue_star_17px.png';
}
} //end of response text check
if(!isNaN(preciseResponseAverage)) { //if a number is returned, time to fade out / in
setTimeout("fadeBackIn(preciseResponseAverage, starResponseColor)", 400);
}
} //end of Ajax connectivity check
else { //if Ajax status text is a failure
}
} //end of Ajax ready state
}; //end of function for execution on ready state change
var data = 'currentUsername=' + encodeURIComponent(currentUsername) + '¤tEntityId=' + encodeURIComponent(currentEntityId) + '&starNumber=' + encodeURIComponent(starNumber);
ajax.open('POST', '../resources/star_submit.php?' + data, true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(data);
} //end if ajax object exists
else {
} //end if it doesn't exist
} //end of starSubmitFxn
There are some functions defined outside of this function but I don't think those are necessary for me to post right now. The issue seems to be that I'm not sure how to properly send a variable to a function when that function is called via setTimeout. Any help would be appreciated. Thank you.