CODEWITHSUNDEEP
jqueryajaxdjangodjango-viewsdjango-ajax-selects
Sreesa Ranga Ramanujam
Sreesa Ranga Ramanujam

Reputation: 21

How to use ajax in django, to pass the model object and store it in database without refreshing the page?

I'm doing a small project in Django, in that I thought of adding a favorite button in one of the pages so that on clicking on that button it has to return the model object and it has to be stored in another database for the reference, but it's not happening Here is my home/bookdetails.html

<!DOCTYPE html>

{% extends 'home/Base.html' %}

{% block title %} Book Details {% endblock %}
{% load staticfiles %}

<link rel="stylesheet" href="{{ STATIC_URL }}/home/css/heart.css">
<script src="{% static 'js/heart.css' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="{% static 'js/app.js' %}"></script>

{% block body %}

{% if error_message %}<p><strong> {{ error_message }} </strong></p>{% endif %}
<script type="text/javascript">
$(document).ready(function(){
$("#sub").click(function(event) {
 var userbooks = '{{ userbooks }}';
 $.ajax({
            type: "GET",
            url: "{% url 'home:favoriteAjax' %}"
            data:{userbbooks:userbooks}
            datatype:'json'
            success: function() {
            alert("successfully added to favorites")
            }
        }
        });
});
});

</script>
<p>Book name:{{ userbooks.book_name }}</p><br>
<p>Book author:{{ userbooks.book_author }}</p><br>
<p>Book genre:{{ userbooks.book_genre }}</p><br>
<p>Book ISBN:{{ userbooks.book_ISBN }}</p><br>
<button type="submit" id="sub" onclick="changeText()">Favourite</button>

{% endblock %}

my urls.py:

from django.urls import path
from . import views
app_name='home'
urlpatterns=[
    path('',views.HomeView,name='home'),
    path('addBooks/',views.addBooks,name='addBooks'),
    path('myBooks/',views.BooksView.as_view(),name='myBooks'),
    path('<int:pk>/', views.BookDetailsView.as_view(), name='myBooks'),
    path('search/', views.SearchedBooks.as_view(), name='searchedBooks'),
    path('favorite_ajax/', views.favorite_ajax, name='favoriteAjax'),
    ]

my models.py:

from django.db import models
from django.contrib.auth.models import User
class UserBooks(models.Model):
    user_id = models.ForeignKey(User,on_delete=models.CASCADE,null=True)
    username = models.CharField(max_length=200)
    book_name = models.CharField(max_length=200)
    book_author = models.CharField(max_length=200)
    book_ISBN=models.CharField(max_length=200)
    book_genre = models.CharField(max_length=200)
    book_status=models.BooleanField(default=False)
    class Meta:
        unique_together = (("username", "book_ISBN"),)
    def __str__(self):
        return self.book_name

class FavBooks(models.Model):
    user_id = models.ForeignKey(User,on_delete=models.CASCADE,null=True)
    book_id= models.ForeignKey(UserBooks,on_delete=models.CASCADE,null=True)
    class Meta:
        unique_together = (("user_id", "book_id"),)

my views.py:

def favorite_ajax(request):
    if(request.method=='GET'):
        book=request.GET['userbooks']
        fav=FavBooks()
        fav.book_id=book
        fav.user_id=request.user
        fav.save()
    return HttpResponse("done")

I want to take the userbooks model object from the bookdetails.html through ajax call and want to store that reference in the FavBooks model. How could I make it happen? Thanks!

Upvotes: 1

Views: 4217

Answers (1)

Ahtisham
Ahtisham

Reputation: 10116

This is the right way of doing it:

html:

 <form id="form_id" method='post'>{% csrf_token %}
     <button type="submit">Favourite</button>
 </form>

jQuery:

 $("#form_id").on('submit', function(event) {
       event.preventDefault(); 
       var userbooks = '{{ userbooks }}';
       $.ajax({
           type: "POST",
           url: "{% url 'home:favoriteAjax' %}",
           data:{
                 userbooks:userbooks, 
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
           },
           datatype:'json',
           success: function(data) {
             if (data['success'])
                alert("successfully added to favorites")
           }
       }); 
  });

views.py:

 from django.http import JsonResponse

 def favorite_ajax(request):
   data = {'success': False} 
   if request.method=='POST':
      book = request.POST.get('userbooks')
      fav = FavBooks()
      fav.book_id = book
      fav.user_id = request.user
      fav.save()
      data['success'] = True
   return JsonResponse(data)

Upvotes: 4

Related Questions