I want to create a LIKE BUTTON for 3 separate columns in my table, which I have created using Handsontable. On clicking any of these like buttons the response should be taken and sent to a PHP file. The PHP file, fetches the data and processes the SQL query to update the number of likes on the post. The required system is exactly like any other LIKE BUTTON feature (For Ex: Instagram).
Columns in the table:
- Employee Name
- Employee ID
- Rank (For the top 3 best targets)
- Goal Comment
- Goal Commit
- Result (target reached: O/X)
- Reply Comment
- Goal Comment Like (like button corresponding to 4. Goal Comment)
- Goal Commit Like (like button corresponding to 5. Goal Commit)
- Reply Comment Like (like button corresponding to 7. Reply Comment)
Column 8,9 and 10 are displayed within column 4,5 and 7 respectively since they represent like button using innerHtml and a custom Renderer like this:
function detailRenderer(instance, td, row, col, prop, value, cellProperties) {
if (col == 4) {
if (value != null && instance.getDataAtCell(row, 8) != null){
Handsontable.renderers.TextRenderer.apply(this, arguments);
cellProperties.readOnly = false;
td.innerHTML = '<div class="like">'+value+'<div class="in-like" style="color:red;"><i class="far fa-heart"></i>' + instance.getDataAtCell(row, 9) + '</div</div>';
console.log(instance.getDataAtCell(row, 8));
}
else if(value != null && instance.getDataAtCell(row, 8) == null){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value+'<i class="far fa-heart" style="color:red;"></i></div>';
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
else if (col == 6) {
if (value != null && instance.getDataAtCell(row, 9) != null){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red;"><i class="far fa-heart"></i>' + instance.getDataAtCell(row, 9) + '</div></div>';
}
else if(value != null && instance.getDataAtCell(row, 10) == null){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value+'<i class="far fa-heart" style="color:red;"></i></div>';
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
else if (col == 8) {
if (value != null && instance.getDataAtCell(row, 10) != null){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red;"><i class="far fa-heart"></i>' + instance.getDataAtCell(row, 11) + '</div></div>';
}
else if(value != null && instance.getDataAtCell(row, 10) == null){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value+'<i class="far fa-heart" style="color:red;"></i></div>';
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
This is my AJAX function which I know is definitely wrong since I am new to AJAX:
$(document).on("click", ".in-like", function(e) {
e.preventDefault();
var likesCounter = hot.getDataAtRowProp(row, 9);
$.ajax({
url: '/mycommit/like.php',
type: 'POST',
data: {
'challengeId': '{{challengeId}}',
'userId': '{{SYANM}}',
'likesCounter': '{{likesCounter}}',
type: 'POST',
},
success: function(data) {
likesCounter = data;
console.log(likesCounter);
},
});
});
My PHP file is:
<?php
use serviceLoginService;
use utilTwigCommon;
use utilDbUtil;
$out = array();
$challengeID = $_GET['challengeID'];
$userID = $_GET['userID'];
$likesCounter = getLikesCounter($challengeID, $userID);
$out['SYANM'] = $_SESSION["login"]["SYANM"];
if(LoginService::hasRole(['system'])){
$out["systemUser"] = 1;
}
else {
$out["systemUser"] = 0;
}
$out['challengeID'] = $challengeID;
$out['userID'] = $userID;
$out['likesCounter'] = $likesCounter;
function getLikesCounter($challengeID, $userID){
$params = array();
$params['challengeID'] = $challengeID;
$params['userID'] = $userID;
$sql = <<<SQL
SELECT COUNT(*) as likesCounter from HB_MYC_LIKES
WHERE CHALLENGE_ID = :challengeID
SQL;
$result = DbUtil::query($sql, $params);
$list = array_values($result);
foreach ($list as $key => $value) {
$list[$key]['GOAL_COMMIT_LIKES'] = count($list[$key]['GOAL_COMMIT_LIKES']);
$list[$key]['GOAL_COMMENT_LIKES'] = count($list[$key]['GOAL_COMMENT_LIKES']);
$list[$key]['REPLY_COMMENT_LIKES'] = count($list[$key]['REPLY_COMMENT_LIKES']);
}
return $list;
}
//-----------------------------------------------//
/*This is just an attempt for different approach*/
//-----------------------------------------------//
if(isset($_GET('challengeID'))) {
$challengeID = $_GET['challengeID'];
$likesCounter = getLikesCounter($challengeID, $userID);
echo json_encode($likesCounter);
}
I am unable to understand how to get categorized LIKES data, currently this code is taking just likes if it exists without categorizing and I do not want to assign separate value to each like column in the frontend. Instead I want to do it in the backend with the PHP file. Since I am a beginner to this, any help would be appreciated.
