Update database with html link click using ajax php mysql

Question

I've read through a number of similar questions and tried my hand at putting it to work on my website, but it is not working (when you click the link there is no response on the console and the database is not updated).

Here's what I want to do: I want users to rate a comment +1 by clicking an icon next to the comment. I want that to update my mysql comment_table column called rating with rating+1 . When I do it without AJAX (ie, just set the form action to a php page?id=10 ) it works fine. I can't get the AJAX to update the database though.

My main page with the comment:

<a href="javascript:void(0);" onClick="updateRating(1,<?php echo $thisperspective_row['id']; ?>)" alt="UPVOTE" id="upvote_<?php echo $thisperspective_row['id']; ?>"><span class="glyphicon glyphicon-chevron-up"></span></a>

The javascript below that link:

<script type="text/javascript"> 
function updateRating(rating, id){

$.ajax({
    type: "GET",
    url: "rating.php",
    mode: "vote",
    rating: rating,
    id: <?php echo $thisperspective_row['id']; ?>,
    success: function(response) {
     console.log(response); 
    }
});
return false; // Prevent the browser from navigating to the-script.php
                };
</script>

and my rating.php file is

<?php
require_once('connectiontodatabase.php'); 

/* simple comment up and down voting script */
$mode = $_GET['mode'];
$rating = $_GET['rating'];
$id = $_GET['id'];

if ($mode=="vote")
    {
    // The name of the 
    $cookie = "nameofmycookie".$id;  
    if(isset($_COOKIE[$cookie])) 
        { 
        echo '<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Sorry You have already rated this comment within the last 14 days.</div>'; 
        } 
    else 
        {
        $expiry = 1209600 + time();  // 14 day expiry
        setcookie ($cookie, "voted", $expiry);
        mysql_query ("UPDATE comment_table SET rating = rating+$rating WHERE id=$id", $connection);
        }
    }

?>

The php runs fine and all the variables are listed properly when I view the source. However, when I click the link, there is no response at all and the console does not output the response. What am I doing wrong? Thanks in advance!

Answer 1

Firstly you should change the way you are detecting the click event. Check out this fiddle . Then secondly you need to pass all the variables through in one JSON string using the data option. Your code should look something like this:

<span class="glyphicon glyphicon-chevron-up clickable" 
    data-rating="1" 
    data-id="<?php echo $thisperspective_row['id']; ?>"></span>

<script type="text/javascript">
    $('.clickable').on('click', function() {
        var data = {
            mode: "vote",
            rating: $(this).data('rating'),
            id: $(this).data('id')
        };
        $.ajax({
            type: 'GET',
            url: 'rating.php',
            data: data,
            success: function(response) {
                console.log(response);
            }
        });
    });
</script>

Answer 2

First off all, check that you are loading jQuery, then use this code

function updateRating(rating, id){
  $.ajax({
    type: "GET",
    url: "rating.php",
    mode: "vote",
    data: { rating: rating, id: id },
    success: function(response) {
     console.log(response); 
    }
  });
return false; // Prevent the browser from navigating to the-script.php
};

is working for me. note that I removed ` inside Ajax, since you are already sending the params in the function, also to send params you have to use data: , you can see more examples here Ajax jQuery