Having trouble getting variable to pass to jquery - php

Question

I have a save feature on my website so that the user can save an item. On the first click it updates and saves fine because it went through the PHP file, but what I am having trouble with is getting the ajax to update the link when clicked the second time since the link is created in the jquery code for updating it with AJAX. (passing the proper ID's is the problem) It should update the heart to red or green and add or remove the word 'Save'. I need to get the proper id updated on the second, third, etc. click.
Here is the jquery code:
I have 2 functions. saveLink and deleteLink.
This is my javascript file:
$(document).on("click", '.del-button', function () {
var savId = $(this).attr('data-sav-id');
deleteLink(savId);
});
$(document).on("click", '.sav-button', function () {
var delId = $(this).attr('data-del-id');
saveLink(delId);
});
function saveLink( saveID ){
var id = saveID;
$.ajax({
method: "POST",
url: "saveLink.php",
dataType: "json",
data: {
'id' : id,
},
success: function(returnID){
var returnID = $.trim(returnID);
if(returnID){
$('#showSaved' + id).html('<span id="removeSaved('+ id +');"><i class="fa fa-heart" style="color:#d52917;"></i></span>');
}
}
});
}
function deleteLink( deleteID ){
var deletedID = deleteID;
$.ajax({
method: "POST",
url: "deleteLink.php",
dataType: "json",
data: {
'deletedID' : deletedID,
},
success: function(deleteIDFunc){
var deleteIDFunc = $.trim(deleteIDFunc);
if(deleteIDFunc){
$('#removeSaved' + deletedID).html('<span id="showSaved('+ deletedID +');">Save <i class="fa fa-heart"></i></span>');
}
else {
alert('Your saved post was not removed. Please try again');
}
}
});
}
Here is the PHP code that handles the initial click:
$query = "SELECT
count(replies.reply_topic) as replyCount,
topics.topic_id,
topics.topic_subject,
topics.topic_date,
topics.topic_cat,
topics.topic_creator,
topics.topic_likes,
users.user_id,
users.username,
profile.profile_id,
profile.profile_pictureMain,
profile.profile_users,
savelink.saveLink_id,
savelink.saveUser_id,
savelink.link_id
FROM
topics
LEFT JOIN
users
ON
topics.topic_creator = users.user_id
LEFT JOIN
replies
ON
replies.reply_topic = topics.topic_id
LEFT JOIN
profile
ON
profile.profile_users = users.user_id
LEFT JOIN
savelink
ON
savelink.link_id = topics.topic_id
GROUP BY
topics.topic_id
ORDER BY
topics.topic_date DESC
LIMIT ?, ?
";
$stmt = $conn->prepare($query);
$stmt->bindParam(1, $start, PDO::PARAM_INT);
$stmt->bindParam(2, $limit, PDO::PARAM_INT);
$stmt->execute();
$returnAmt = $stmt->fetchAll();
if($stmt->rowCount() > 0){
$returnValues = "";
foreach($returnAmt as $row){
$returnValues .=
if(isset($_SESSION['user_session']) && $row['saveUser_id'] == $_SESSION['user_session']){
$returnValues .= '<span id="removeSaved'.$row['saveLink_id'].'"><i class="fa fa-heart" style="color:#d52917;"></i></span>';
}
else if(isset($_SESSION['user_session'])){
$returnValues .= '<span id="showSaved'.$row['topic_id'].'">Save <i class="fa fa-heart"></i></span>';
}
else{
$returnValues .= '</i>';
}
$returnValues .= '</div></div></span></div>
}
echo $returnValues;
Here is the html code for displaying the results:
<div role="tabpanel" class="tab-pane active" id="Top">
<div id="rowDisplayResults">
<!--Display results here-->
</div>
</div>
This is what I would like the save feature to look like. A red heart when saved and green when not.
Should I be adding another variable to the save and delete link functions to pass the proper ID's after the second click?
Any help would be much appreciated. thanks.

Answer 1

Change your code like this. Also change the html for this logic
$(document).on("click", '.del-button', function () {
var savId = $(this).attr('data-sav-id');
deleteLink(savId);
});
$(document).on("click", '.sav-button', function () {
var delId = $(this).attr('data-del-id');
saveLink(delId);
});
function saveLink( saveID ){
var id = saveID;
$.ajax({
method: "POST",
url: "saveLink.php",
dataType: "json",
data: {
'id' : id,
},
success: function(returnID){
var returnID = $.trim(returnID);
if(returnID){
$('#showSaved' + id).html('<span id="removeSaved('+ id +');"><a href="javascript:void();" class="del-button pull-right"'+
' data-sav-id=' + returnID + '"><i class="fa fa-heart" style="color:#d52917;"></i></a></span>');
//onclick="deleteLink('+ returnID +');
}
}
});
}
function deleteLink(deleteID) {
var deletedID = deleteID;
$.ajax({
method: "POST",
url: "deleteLink.php",
dataType: "json",
data: {
'deletedID': deletedID,
},
success: function (deleteIDFunc) {
var deleteIDFunc = $.trim(deleteIDFunc);
if (deleteIDFunc) {
$('#removeSaved' + deletedID).html('<span id="showSaved(' + deletedID + ');"><a href="javascript:void();" '+
'class="pull-right sav-button" data-del-id=' + deleteIDFunc + '">Save <i class="fa fa-heart"></i></a></span>');
}
//onclick="saveLink(' + deleteIDFunc + ');
else {
alert('Your saved post was not removed. Please try again');
}
}
});
}