I have implemented an ajax "follow" button on my website. Currently, the button's attribute disabled changes to "disabled" after submission. However, I would like to modify the button from "follow" to "unfollow" upon submission, similar to how it works on Twitter. How can I achieve this? I attempted to change the button's attribute "form" to submit another form using the following code:
success:function(){
$button.attr('form','unfollow');
Unfortunately, this approach did not work as intended.
Below is a snippet of the template file event.html:
{% if user in event.users.all %}
<form id="unfollow">
{% csrf_token %}
<input type="hidden" value="{{ event.id }}" name="remove">
<button type="submit" class="btn btn-warning btn-block">{% trans "Unfollow"%}</button>
</form>
{% else %}
<form id="follow">
{% csrf_token %}
<input type="hidden" value="{{ event.id }}" name="add">
<button type="submit" class="btn btn-primary btn-block">{% trans "Follow"%}</button>
</form>
{% endif %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('submit','#unfollow', function(e){
var $button = $(this).find('button');
e.preventDefault();
$.ajax({
url:'/event/{{ event.id }}/',
data: "remove={{ event.id }}",
success:function(){
$button.attr('disabled', 'disabled').text('{% trans "Unfollowed" %}');
}
})
});
$(document).on('submit','#follow', function(e){
var $button = $(this).find('button');
e.preventDefault();
$.ajax({
url:'/event/{{ event.id }}/',
data: "add={{ event.id }}",
success:function(){
$button.attr('disabled', 'disabled').text('{% trans "Followed" %}');
}
})
});
</script>
views.py
user = request.user
if request.GET.get('add'):
event.users.add(user)
event.save()
if request.GET.get('remove'):
event.users.remove(user)
event.save()