![](/img/trans.png)
[英]Having trouble getting a number from an AJAX request to a javascript variable
[英]Having trouble getting variable to pass to jquery
我的網站上有保存功能,以便用戶可以保存項目。 第一次單擊它會更新並保存得很好,因為它經過了PHP文件,但是我遇到的問題是第二次單擊時使ajax更新了鏈接,因為該鏈接是在jquery代碼中創建的,用於使用AJAX。 (通過正確的ID是問題所在),應將心臟更新為紅色或綠色,並添加或刪除“保存”一詞。 我需要在第二,第三等點擊上更新正確的ID。 這是jquery代碼:我有2個函數。 saveLink和deleteLink。
這是我的JavaScript文件:
$(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>');
}
}
});
}
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="sav-button pull-"' + 'data-del-id='+ deleteIDFunc + '">Save <i class="fa fa-heart"></i></a></span>');
}
else {
alert('Your saved post was not removed. Please try again');
}
}
});
}
這是處理初始點擊的PHP代碼:
$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'].'"><a href="javascript:void();" class="del-button pull-right" data-sav-id="'.$row['saveLink_id'].'"><i class="fa fa-heart" style="color:#d52917;"></i></a></span>';
}
else if(isset($_SESSION['user_session'])){
$returnValues .= '<span id="showSaved'.$row['topic_id'].'"><a href="javascript:void();" class="sav-button pull-right" data-del-id="'.$row['topic_id'].'">Save <i class="fa fa-heart"></i></a></span>';
}
else{
$returnValues .= '<a href="javascript:void();" class="pull-right" data-toggle="modal" data-target="#loginModal" >Save <i class="fa fa-heart"></i></a>';
}
$returnValues .= '</div></div></span></div>
}
echo $returnValues;
這是用於顯示結果的html代碼:
<div role="tabpanel" class="tab-pane active" id="Top">
<div id="rowDisplayResults">
<!--Display results here-->
</div>
</div>
這就是我想要的保存功能。 保存時為紅色的心,未保存時為綠色。
我是否應該在保存和刪除鏈接函數中添加另一個變量,以便在第二次單擊后傳遞正確的ID? 任何幫助將非常感激。 謝謝。
像這樣更改您的代碼。 同時更改此邏輯的html
$(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'); } } }); }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.