Functionality I am trying to implement– When I send a friend request to a user by clicking the send friend request button, the button dynamically changes to withdraw friend request button. And, When I click the same withdraw friend request button to withdraw my friend request, the button dynamically changes to send friend request button.
When I use jQuery replaceWith() outside of success() of ajax call, it works perfectly. Here is the Working Code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<a href="/users/friends/sendRequest/<%=profile_user.id%>" class="btn btn-success send-friend-request" data-targetUser="<%=profile_user.id%>">Send Friend Request</a>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
{
function sendFriendRequest(){
$('.send-friend-request').click(function(event){
event.preventDefault();
let targetUser = $(this).attr("data-targetUser");
$.ajax({
type:'get',
url:$(this).prop('href'),
success:function(data){
//empty
},error:function(err){
console.log('Error');
}
});
$('.send-friend-request').replaceWith(`
<a href="/users/friends/withdrawRequest/${targetUser}" class="btn btn-danger withdraw-friend-request" data-targetUser="${targetUser}">Withdraw Friend Request</a>
`);
withdrawFriendRequest();
});
}
function withdrawFriendRequest(){
$('.withdraw-friend-request').click(function(event){
event.preventDefault();
let targetUser = $(this).attr("data-targetUser");;
$.ajax({
type:'get',
url:$(this).prop('href'),
success:function(data){
//empty
},error:function(err){
console.log('Error');
}
});
$('.withdraw-friend-request').replaceWith(`
<a href="/users/friends/sendRequest/${targetUser}" class="btn btn-success send-friend-request" data-targetUser="${targetUser}">Send Friend Request</a>
`);
sendFriendRequest();
});
}
withdrawFriendRequest();
sendFriendRequest();
}
However, when i move the replaceWith() inside the success function of ajax, it doesn’t work. All, the html is replaced correctly on the DOM, class names are correct. I used inspect to check that. Also, i used console.log() statements statements to recheck my code. But I am not able to find the mistake:
{
function sendFriendRequest(){
$('.send-friend-request').click(function(event){
event.preventDefault();
let targetUser = $(this).attr("data-targetUser");
$.ajax({
type:'get',
url:$(this).prop('href'),
success:function(data){
$('.send-friend-request').replaceWith(`
<a href="/users/friends/withdrawRequest/${targetUser}" class="btn btn-danger withdraw-friend-request" data-targetUser="${targetUser}">Withdraw Friend Request</a>
`);
},error:function(err){
console.log('Error');
}
});
withdrawFriendRequest();
});
}
function withdrawFriendRequest(){
$('.withdraw-friend-request').click(function(event){
event.preventDefault();
let targetUser = $(this).attr("data-targetUser");;
$.ajax({
type:'get',
url:$(this).prop('href'),
success:function(data){
$('.withdraw-friend-request').replaceWith(`
<a href="/users/friends/sendRequest/${targetUser}" class="btn btn-success send-friend-request" data-targetUser="${targetUser}">Send Friend Request</a>
`);
},error:function(err){
console.log('Error');
}
});
sendFriendRequest();
});
}
withdrawFriendRequest();
sendFriendRequest();
}
The problem which I am facing is that, after sending a request, the send request link is replaced with withdraw request link using ajax. But when I click the withdraw request link, the page simply refreshes, that is, event is not prevented when clicking on the withdraw request button. Why does this happen ? Does it has to do anything with the asynchronous nature of AJAX calls ?