Incrementing a mysql value by one on click with AJAX? - php

Question

I'm very new to AJAX and PHP. I'm trying to implement a "like" feature on a website where users can post memes. The user should be able to click a heart-shaped image to "like" next to a meme and the "likes" value for that particular meme should increase by one in the MySQL database, however, it is not doing anything.
The MySQL table is called meme_information and it has 5 columns, "name", "email", "likes", "image_path", and "id" which is the primary key and auto increments.
Below is the code for the page where all the memes are displayed. There is some html above that I left out, but it is just the navbar and sourcing in files. I am pretty sure that the "data" value in the AJAX is wrong, but I'm not sure what I'm supposed to put in there.
browse.php
<?php
include("connecttodb.php");
$files = glob("uploads/*.*");
for ($i=0; $i<count($files); $i++) {
$image = $files[$i];
$supported_file = array(
'gif',
'jpg',
'jpeg',
'png'
);
$image = $files[$i];
$path = substr($image,8);
$q = "SELECT name, email, id FROM meme_information WHERE image_path= \"$path\"";
$id = 0;
$result = $link->query($q);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "Name: ". $row["name"] ."<br>";
echo "Email: ". $row["email"] ."<br>";
echo "Id: ". $row["id"] . "<br>";
$id = $row["id"];
}
}
echo '<img src="'.$image.'" style="width:400px;height:400px;"></img>';
echo '<img onclick="myFunction()" src="heart-unclicked.png" style="width:50px;height:50px;">like</img>';
echo
'<script>
function myFunction() {
$.ajax({
type: "POST",
url: "update_likes.php",
data: {"increment_by": 1},
success: function() {
alert("works");
},
error: function() {
alert("doesnt work");
},
});
}
</script>';
}
?>
I believe the part after WHERE in the SQL query is wrong. Not sure how I can get the id number from the meme that was "liked."
update_likes.php
<?php
require('connecttodb.php');
$q2 = "UPDATE meme_information SET likes = likes + 1 WHERE id='".$id."'";
echo "The id is $id" . "<br>";
$result = mysqli_query($link, $q2);
echo "<br> this is the id" . "$result";
?>
connecttodb.php
<?php
global $link;
include("dbconnect.php");
$link = new mysqli($server,$user,$password,$dbname);
if ($link->connect_errno) {
die("Connection failed: " . $link->connect_error);
} else {
print"Connection successful.";
}
?>

Answer 1

This might solve the issue.
<?php
include("connecttodb.php");
$files = glob("uploads/*.*");
for ($i=0; $i<count($files); $i++) {
$image = $files[$i];
$supported_file = array(
'gif',
'jpg',
'jpeg',
'png'
);
$image = $files[$i];
$path = substr($image,8);
echo '<img src="'.$image.'" style="width:400px;height:400px;"></img>';
$q = "SELECT name, email, id FROM meme_information WHERE image_path= \"$path\"";
$id = 0;
$result = $link->query($q);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "Name: ". $row["name"] ."<br>";
echo "Email: ". $row["email"] ."<br>";
echo "Id: ". $row["id"] . "<br>";
$id = $row["id"];
echo '<img onclick="myFunction('.$id.')" src="heart-unclicked.png" style="width:50px;height:50px;">like</img>';
}
}
echo
'<script>
function myFunction(id) {
$.ajax({
type: "POST",
url: "update_likes.php",
data: {"increment_by": 1,"id": id},
success: function() {
alert("works");
},
error: function() {
alert("doesnt work");
},
});
}
</script>';
}
?>
update_likes.php
<?php
require('connecttodb.php');
if(isset($_POST['id']))
{
$q2 = "UPDATE meme_information SET likes = likes + 1 WHERE id='".$_POST['id']."'";
echo "The id is $id" . "<br>";
$result = mysqli_query($link, $q2);
echo "<br> this is the id" . "$result";
}
?>