0

I am building a mock Flickr site where you can rate the photos by clicking on 1-10 stars. When the page loads, it creates an object for the photo and sets its values based on the db entry corresponding to its id. When you hover over the stars they light up (from 1) to the number star your cursor is on, designating your rating. When you click a star it submits the rating (through AJAX) and updates the database, then sets the stars to reflect the new rating.

The problem is if you hover over stars then mouse off of them (without clicking on one) then the stars that are lit up reflect the rating the photo had when the page was initially loaded, and not what the rating currently is (based on the ratings that were logged using AJAX when the user clicks on a star).

The database is being updated, the stars reflect the right rating right after the AJAX call (since I call the same function at the end of the AJAX call as I do with onmouseout, stars_current_rating(rating)). The only difference is at the end of the AJAX call I am passing in the xmlhttp.responseText as the parameter. And in the onmouseout I pass in (what I am trying to have be) the most current rating in the database for that photo.

onmouseout="stars_current_rating(<?php echo Photograph::find_by_id($_GET['id'])->rating?>);"

My logic behind this call is the assumption that I am getting the new rating that has been saved to the db by finding it and passing the new rating to stars_current_rating(...). The only problem is onmouseout passes the original rating parameter that was pulled from the db when the page loaded, and not the new value in the DB (which is what the find_by_id() sql function does)... Here is the code which handles the displaying of the stars.

        <div id="rating" class="rating">
        <?php 
            for($i=1; $i<11; $i++){
        ?>
        <a id="rating_star<?php echo $i ?>" href="#" onmouseover="decide_rating(<?php echo $i ?>);" 
        onmouseout="stars_current_rating(<?php echo Photograph::find_by_id($_GET['id'])->rating?>);" 
        onmousedown="set_rating(<?php echo $photo->id.", ".$i ?>);">
        <img id="star<?php echo $i ?>" class="rating_star" src=
        <?php 
            // Sets up stars with initial rating in db when page is first loaded
            if($photo->rating >= $i){ 
                echo "images/assets/rating_star.png";
            } else {
                echo "images/assets/rating_star_off.png";
            }
        ?>
        />
        </a>
        <?php } ?>

    </div>

Any help or insight would be appreciated for more details on the question click the link below for the original question.

Original Question with all the code and specific details

4

1 に答える 1

1

関数を使用してset_rating関数を変更できonmouseoutます..このようなもの

function set_rating(photo_id,rating) {
    //do your ajax or whatever here, don't need to change anything

    //we need some way to select all the 'rating_star' links
    for(var i=1, i<11; i++) {
        var star = document.getElementById('rating_star' + i);

        //overwrite the current mouseout function with a new one,
        // providing the new current rating

        star.onmouseout = function() {
            stars_current_rating(rating);
        }
    }
}
于 2012-10-05T20:22:36.197 に答える