Setting a value to a predefined readonly starrating div withouth reloading the page

Aug 7, 2012 at 5:32 PM

Hi, back again with an other question. The user can rate a movie and than the average needs to be recalculated. I can do this by simply reloading the page after the succes (I'm using sort of MVC) so when the view pops up it does this accordingly. But it isn't logical to reload a page with AJAX ;-). I'm pretty noobish in javascript (just know the basic formchecking and stuff).

So I'm echoing the average in the action. and want to change the htmelement of the rating-value

 

        $.ajax({
            url : 'index.php?module=movies',
            type : 'POST',
            data : data,
            success : function(data) {
                $("#raaagh").html(data);
            },
            error: function () {
                alert('Error occured during rating!')
            }
        });

 
 /**
	 * Star rating action
	 */
        public function doRating() {
            if (PlonkFilter::getPostValue('formAction') === 'rating') {
                    $movieId = PlonkFilter::getPostValue('movie_id');
                    $rating = PlonkFilter::getPostValue('rating');

                    $username = PlonkSession::get('username');
                    $userId = MoviesDB::getUserIdByUsername($username);
                                        
                    // create array to insert
                    $values = array(
                            'rating' => $rating,
                            'user_id' => $userId,
                            'movie_id' => $movieId
                    );
                    
                    
                    // store the rating
                    MoviesDB::insertRating($values);
                    
// recalculate the rating $avgRating = MoviesDB::getAverageRatingByMovieId($movieId); echo $avgRating; } }

This works in a test paragraph giving back the required average rating. :)

Now I want to change the value in the average div.

Coordinator
Aug 19, 2012 at 2:08 PM

It's pretty simple, the function that does the ajax, already gets the value from the rating plugin, which brings you already more than half way your solution

 

   var el = $(this);
   // I guess this is your data obj.
   var data =  { rating:  el.rateit('value') };

    $.ajax({
            url : 'index.php?module=movies',
            type : 'POST',
            data : data,
            success : function(data) {

                 //if i want to change the rateit element that was changed:
                 el.rateit('value', data);

                 //if i want to change some other rateit element:
                 $('#myotherrateit').rateit('value', data);



            },
            error: function () {
                alert('Error occured during rating!')
            }
        });