Use PHP variable in AJAX

Question

I am trying to accomplish the following on the page "videos.php" (note, this is all inside of a PHP echo):

1. User clicks .star_' . $pvid_ID . ' which submits a video rating to a form (this is working properly)
2. Now, I need to refresh the div that displays the current video rating to show the updated video rating, which is stored in the variable $avg_rating (grabbed from the DB in an earlier query on videos.php).
3. To update the variable $avg_rating , I want to POST the id of the video to find_ratings2.php (that video ID is currently stored on "videos.php" as $pvid_ID )

Here is what I have as my jquery/ajax on "videos.php":

echo'
<script type="text/javascript" language="javascript">
$(document).ready(function() {
   $(".star_' . $pvid_ID . '").click(function() {
       $.ajax({
           type: "POST",
           url: \'/dev/scripts/find_ratings2.php\',
           data: { videoid: ' . $pvid_ID . ' },
           success: function(data) {
               $(".parent_video_' . $pvid_ID . '").load(\'testratings.php .vid_frame_id_' . $pvid_ID . '\').hide().fadeIn(2000);
            }
        });
    });
});                        
</script>
';

then, on find_ratings2.php I've got:

<?php
require('config.php');
require('checklogin.php');

$video_id = $_POST['videoid'];
$mysqlicon3 = mysqli_connect($db_host, $db_username, $db_password, $db_name);
$find_rating = mysqli_query($mysqlicon3, "SELECT AVG(rating) AS avgRating FROM videoRatings WHERE videoID = '$video_id'");

while ($rating_row = mysqli_fetch_array($find_rating)) {
    $avg_rating = $rating_row['avgRating'];
}
?>

When .star_' . $pvid_ID . ' is clicked, the div is being refreshed properly (the .hide() and .fadeIn() are also working), but $avg_rating is not being updated.

For reference, $avg_rating is on "videos.php" like this:

echo'
<div class="parent_video_' . $pvid_ID . '">
    <div class="comment_iconimg-stars vid_frame_id_' . $pvid_ID . '">
        <div class="video-stars"><input class="imgstar star_' . $pvid_ID . '" type="image" src="';
        if ($avg_rating > 0){echo '/dev/images/rate_video_icon_yellow.png';} else{echo '/dev/images/rate_video_icon.png';}
        echo '" border="0" /></div>
        </div>
    </div>
</div>';

Answer 1

While multiple problems found in your code apart from echo html/js from php as @MatRt indicate. Still one problem why $avg_rating variable not updated because $avg_rating variable takes its inital value since page load not from ajax request. You need to update this from javascript something like that.

if(data > 0)
{ 
    $("video-stars input.imgstar").attr('src', '/dev/images/rate_video_icon_yellow.png');   
}
else
{
    $("video-stars input.imgstar").attr('src','/dev/images//dev/images/rate_video_icon.png');   
}  

Also echo $avg_rating in find_ratings2.php in last.

Answer 2

Close PHP end tag and add javascript code:

<script type="text/javascript" language="javascript">
$(document).ready(function() {

   var pvid = "<?php echo $pvid_ID; ?> ";

   $(".star_' + pvid + '").click(function() {
       $.ajax({
           type: "POST",
           url: \'/dev/scripts/find_ratings2.php\',
           data: { videoid: ' + pvid +  ' },
           success: function(data) {
               $(".parent_video_' + pvid +  '").load(\'testratings.php .vid_frame_id_' . + pvid +  '\').hide().fadeIn(2000);
            }
        });  });});                        
</script>
<?php some code ?>