Changing a PHP value dynamically with Javascript

Question

I'm making a blog type webpage, with a div that has a 'like' and 'dislike' button, and a rating above which is a mysql query of likes/(likes+dislikes). When a user clicks like or dislike, I want to add their vote to the db, and dynamically change the rating value without reloading the page. Here's a little snippet of the html, I have barely worked with javascript, so any help would be great.

<div class="narrow_right_container">
   <?php 
    $popularity = get_popularity($row);
   ?>
   <div class="yellow_bg">Rating:  <?php echo $popularity . "%"; ?></div>
   <div style="margin-left:2px;">
    <div class="dislike">
       <a href="#"><img src="ui_images/dislike.png"/></a>
       <span>Dislike</span>
    </div>
    <div class="like">
       <a href="#"><img src="ui_images/like.png" /></a>
       <span>Like</span>
        </div>
   </div>
</div>

Answer 1

You will have to use ajax to accomplish this. Its not possible to alter PHP variables VIA javascript.

You will have to call an Ajax function that will handel the database work and after its done that, you will have to update the count using javascript. This will give the allusion that the count was updated while the count will also be updated in the database (from the Ajax)

Here is a great example of how you could accomplish this:

Example Code
Live Demo

Answer 2

You would not actually be changing a PHP value--once the page is output to the browser, consider PHP gone--you can't interact with it because it's on the server. Instead, think of interacting with the document that's in the browser.

The best way to do this is to make an ajax call to a server-side script. That server-side script can commit the like or dislike to the database, and then return the new rating, which you can insert in place of the old one using javascript.

You'll probably want to check out some tutorials on javascript and ajax, as it seems you have a more general need for a tutorial than for a specific problem. In other words, if you fill in your knowledge gaps on the general subject, you'll be able to solve your specific problem quite easily.

Answer 3

You will want to create some PHP code for handling the saving to the database on the Server side. You will POST the like / dislike value information to this server side script. If possible, I would use jQuery's AJAX helper to post data to the PHP page you just created.

Something like this:

$.ajax({
  url: "whatever.php",
  type: "POST",
  data: {Like: true},
  success: function(data){ /* update view */}
});

Answer 4

$('.like').click(function(){
   rate(1);
})
$('.dislike').click(function(){
   rate(-1);
})

function rate(_val){
$.ajax({
  url: 'ajax/rate.php?val='+_val,
  success: function(data) {
    alert('Rate was performed.');
    $(".narrow_right_container").find(".yellow_bg").append("Rating: "+data+"%");
  }
});
}

in rate.php :

if(isset($_GET['val'])){
  $sql = "UPDATE.........."; //do an update to your rate table
  echo get_popularity($row); //return rating to ajax
}