| d'Anconia |
10-07-2012 06:23 AM |
Once I fixed the unexpected token problem... which by the way I am still not sure how I fixed... I was able to keep debugging to find out how far my JSON (I switched it to JSON from originally being just text because I was running out of ideas).
First problem I think it was being returned as text and failing the !NaN test. Secondly, and perhaps more importantly, I forgot to remove the event that was added earlier that resets the blue stars to whatever rating the entity had from the user when the page was loaded. So now I remove that event and replace it with the next rating (as responded from the server upon success).
Final relevant code looked like this:
Code:
/*
star_ratings.js
*/
window.onload = function () {
'use strict';
var entityId = <?php echo $entity_id; ?>;
var username = <?php echo '"' . $current_username .'"'; ?>;
var ajax = getXMLHttpRequestObject();
<?php
//if there has already been a rating, create blue stars
if (mysqli_num_rows($already_reviewed_query_result) == 1) {
$review_score = $current_user_review_rows["review_score"];
for ($l = 1; $l <= $review_score; $l++) {echo "document.getElementById('rating_star_" . $l . "').src ='../images/blue_star_17px.png'; \n"; }
} //end of user review conditional / clause
if ($current_username) { //if logged in
for ($star_submit = 1; $star_submit <= 10; $star_submit++ ) {
//get each rating_star_x and create event for starSubmitFxn on click with given parameters
echo "U.addEvent(U.$('rating_star_" . $star_submit . "'), 'click', function(){ starSubmitFxn(" . $star_submit . ", '" . $current_username . "'); } ); \n";
}
}
?>
U.addEvent(U.$('rating_star_1'), 'mouseover', function(){ newStarRating(1, "yellow_full"); } );
U.addEvent(U.$('rating_star_2'), 'mouseover', function(){ newStarRating(2, "yellow_full"); } );
U.addEvent(U.$('rating_star_3'), 'mouseover', function(){ newStarRating(3, "yellow_full"); } );
U.addEvent(U.$('rating_star_4'), 'mouseover', function(){ newStarRating(4, "yellow_full"); } );
U.addEvent(U.$('rating_star_5'), 'mouseover', function(){ newStarRating(5, "yellow_full"); } );
U.addEvent(U.$('rating_star_6'), 'mouseover', function(){ newStarRating(6, "yellow_full"); } );
U.addEvent(U.$('rating_star_7'), 'mouseover', function(){ newStarRating(7, "yellow_full"); } );
U.addEvent(U.$('rating_star_8'), 'mouseover', function(){ newStarRating(8, "yellow_full"); } );
U.addEvent(U.$('rating_star_9'), 'mouseover', function(){ newStarRating(9, "yellow_full"); } );
U.addEvent(U.$('rating_star_10'), 'mouseover', function(){ newStarRating(10, "yellow_full"); } );
<?php
if (mysqli_num_rows($already_reviewed_query_result) == 1) {
echo "U.addEvent(U.$('star_rating_div'), 'mouseout', function(){ newStarRating(" . $current_user_review_rows['review_score'] .", 'blue'); } );";
}
else {
echo "U.addEvent(U.$('star_rating_div'), 'mouseout', function(){ newStarRating(0, 'yellow_full'); } );";
echo "/* \$already_reviewed_query is:*" . $already_reviewed_query . "*/";
}
?>
}
function newStarRating(starNumber, color) {
'use strict';
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 <= starNumber; j++) {
document.getElementById('rating_star_' + j).src='../images/' + color + '_star_17px.png';
}
}
function starSubmitFxn(starNumber) {
'use strict';
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);
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
} //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
And PHP:
PHP Code:
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
require_once ($_SERVER["DOCUMENT_ROOT"] . '/includes/config.inc.php');
if ($_POST['currentUsername'] && $_POST['currentEntityId'] && $_POST['starNumber']) {
require_once (MYSQL);
$trimmed_username = mysqli_escape_string($dbc, trim($_POST['currentUsername']));
$trimmed_entity_id = mysqli_escape_string($dbc, trim($_POST['currentEntityId']));
$trimmed_star_number = mysqli_escape_string($dbc, trim($_POST['starNumber']));
$check_rating_query = "SELECT entity_id, created_by_username, review_score FROM reviews WHERE
created_by_username = '$trimmed_username' AND entity_id = $trimmed_entity_id
LIMIT 1";
$results = mysqli_query($dbc, $check_rating_query);
if (mysqli_num_rows($results) == 1) {
$update_rating_query = "UPDATE reviews SET review_score = $trimmed_star_number, date_of_submission = NOW() WHERE
created_by_username = '$trimmed_username' AND entity_id = $trimmed_entity_id
LIMIT 1";
$update_results = mysqli_query($dbc, $update_rating_query);
if (mysqli_affected_rows ($dbc) == 1) {
echo 'var starResponse = {
"1": { "value": "' . $trimmed_star_number . '" }
}';
}
}
}
And thank you AndrewGSW, I ended up using some of your code in my solution. I appreciate it! |
