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>

Brian Warshaw · Accepted Answer · 2012-05-07 18:27:44Z

1

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.

answered May 7, 2012 at 18:27

Brian Warshaw

23k9 gold badges55 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Lanciaux · Accepted Answer · 2012-05-07 18:31:41Z

1

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 */}
});

answered May 7, 2012 at 18:31

Ryan Lanciaux

5,9442 gold badges40 silver badges49 bronze badges

Comments

Farhan Ahmad · Accepted Answer · 2012-05-07 18:33:46Z

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

edited May 7, 2012 at 18:33

answered May 7, 2012 at 18:26

Farhan Ahmad

5,1987 gold badges43 silver badges70 bronze badges

1 Comment

Brian Warshaw Over a year ago

I was the original downvote, because it originally just had the first sentence--but I removed the downvote since your edit.

mgraph · Accepted Answer · 2012-05-07 18:33:06Z

0

$('.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
}

answered May 7, 2012 at 18:33

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Collectives™ on Stack Overflow

Changing a PHP value dynamically with Javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related