Develop Reference

404 error while implementing async function

detail.html
{% if request.user.is_authenticated %}
<form class="like-forms d-inline" data-book-id="{{ book.pk }}" data-review-id="{{ review.pk }}">
{% csrf_token %}
<h4>
{% if request.user in review.like_users.all %}
<button type="submit" id="btn-like-{{ review.pk }}" class="btn-none bi bi-emoji-heart-eyes"></button>
{% else %}
<button type="submit" id="btn-like-{{ review.pk }}" class="btn-none bi bi-emoji-angry"></button>
{% endif %}
</h4>
</form>
{% endif %}
<!-js-->
<script>
const likeForms = document.querySelectorAll('.like-forms')
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value
likeForms.forEach((form) => {
form.addEventListener('submit', function (event) {
event.preventDefault()
const reviewId = event.target.dataset.reviewId
const bookId = event.target.dataset.bookId
axios({
method: 'post',
url: `/detail/${bookId}/like/${reviewId}/`,
headers: {'X-CSRFToken': csrfToken},
})
.then(response => {
const isLiked = response.data.isLiked
const likeBtn = document.querySelector(`#btn-like-${reviewId}`)
console.log(isLiked)
if (isLiked === true) {
likeBtn.classList.add('bi-emoji-heart-eyes')
likeBtn.classList.remove('bi-emoji-angry')
} else {
likeBtn.classList.add('bi-emoji-angry')
likeBtn.classList.remove('bi-emoji-heart-eyes')
}
})
.catch(error => {
console.log(error)
})
})
})
</script>
urls.py
path("detail/<int:book_pk>", views.detail, name="detail"),
path("detail/<int:book_pk>/like/<int:review_pk>", views.like, name="like"),
.....
views.py
def detail(request, book_pk):
reviews = Review.objects.order_by("-pk")
book = Book.objects.get(pk=book_pk)
context = {
"reviews": reviews,
"book": book,
}
return render(request, "review/detail.html", context)
def like(request, book_pk, review_pk):
review = Review.objects.get(pk=review_pk)
book = Book.objects.get(pk=book_pk)
if review.like_users.filter(pk=request.user.pk).exists():
review.like_users.remove(request.user)
is_liked = False
else:
review.like_users.add(request.user)
is_liked = True
data = {
"isLiked": is_liked,
}
return JsonResponse(data)
I got a 404 not found error while writing code for a "like" async function.
data-book-id="{{ book.pk }}" data-review-id="{{ review.pk }} in the form
I seem to get pk values ​​for books and book reviews, but I don't know what causes the 404 error.
Console error message : POST http://localhost:8000/detail/1/like/2/ 404 (Not Found)
I am running this on localhost (http://localhost:8000/)
Thanks for reading..!

Method Not Allowed (POST) in ajax request with django

I am trying to pass the values of form data through ajax .And getting method not allowed error. I am trying to add comment in a blog post.
This is my form which is inside blog_detail page
<form id="commentform" class="commentform" method="post">
{% csrf_token %}
{%with allcomments.count as total_comments%}
<p>
{{total_comments}} comment{{total_comments|pluralize}}
</p>
{%endwith%}
<select name="blog" class="d-none" id="id_blog">
<option value="{{blog.id}}" selected="{{blog.id}}"></option>
</select>
<label class="small font-weight-bold">{{comment_form.parent.label}}</label>
{{comment_form.parent}}
<div class="d-flex">
<img class="avatar_comment align-self-center" src="{% for data in avatar%}{{data.avatar.url}}{%endfor%}" alt="">
{{comment_form.content}}
</div>
<div class="d-flex flex-row-reverse">
<button value="commentform" id="newcomment" type="submit" class="newcomment btn btn-primary">Submit</button>
</div>
</form>
And when I click the button it should call the ajax
$(document).on('click','#newcomment',function(e){
e.preventDefault();
var button =$(this).attr("value");
var placement = "commentform"
if (button=="newcommentform"){
var placement = "newcommentform"
}
$.ajax({
type: 'POST',
url: '{% url "website:addcomment" %}',
data: $("#" + button).serialize(),
cache: false,
sucess: function(json){
console.log(json)
$('<div id="" class="my-2 p-2" style="border: 1px solid grey"> \
<div class="d-flex justify-content-between">By ' + json['user'] + '<div></div>Posted: Just now!</div> \
<div>' + json['result'] + '</div> \
<hr> \
</div>').insertBefore('#' + placement);
},
error: function(xhr,errmsg,err){
}
});
})
This is my urls.py
path('blog/<int:blog_id>', BlogDetails.as_view(), name="blog_detail"),
path('addcomment/',addcomment, name="addcomment"),
and my views.py is:
class BlogDetails(View):
def get(self, request, blog_id):
query = request.GET.get('query')
if query:
return redirect(reverse('website:search') + '?query=' + query)
blog = Blog.objects.get(id=blog_id)
total_comment = Comment.objects.filter(blog=blog).count()
allcomments = blog.comments.filter(status=True)
blog_list = Blog.objects.all()
comment_form = NewCommentForm()
data = {
'blog': blog,
'blog_list': blog_list,
'total_comment': total_comment,
'comment_form': comment_form,
'allcomments': allcomments
}
return render(request, "blog_detail.html", data)
def addcomment(request):
if request.method == 'post':
comment_form = NewCommentForm(request.POST)
print(comment_form)
if comment_form.is_valid():
user_comment = comment_form.save(commit=False)
user_comment.user = request.user
user_comment.save()
result = comment_form.cleaned_data.get('content')
user = request.user.username
return JsonResponse({'result': result, 'user': user})
Please help me with this it is not calling addcomment view

If how I've interpreted your code is correct, it would probably work if changed your BlogDetails class to this:
class BlogDetails(View):
def get(self, request, blog_id):
query = request.GET.get('query')
if query:
return redirect(reverse('website:search') + '?query=' + query)
blog = Blog.objects.get(id=blog_id)
total_comment = Comment.objects.filter(blog=blog).count()
allcomments = blog.comments.filter(status=True)
blog_list = Blog.objects.all()
comment_form = NewCommentForm()
data = {
'blog': blog,
'blog_list': blog_list,
'total_comment': total_comment,
'comment_form': comment_form,
'allcomments': allcomments
}
return render(request, "blog_detail.html", data)
def post(self, request, *args, **kwargs):
return self.addcomment(request)
def addcomment(self, request):
comment_form = NewCommentForm(request.POST)
print(comment_form)
if comment_form.is_valid():
user_comment = comment_form.save(commit=False)
user_comment.user = request.user
user_comment.save()
result = comment_form.cleaned_data.get('content')
user = request.user.username
return JsonResponse({'result': result, 'user': user})
Because you are trying to POST to a view that doesn't have a post method defined.
Then you would need to remove addcomment from the URL you are calling and just post to whatever URL you are currently at.

Why Django modelform is submitted with enter key

I'm using Django modelform and it's submitted by pressing the enter key. This is what I wanted, but I don't know why it works. I didn't add any JS codes related to keydown but other codes to practice Ajax. Also, I found out that when there's only one input inside the form, it's submitted with the enter key, but my form has two inputs.
What I'm doing is to add a comment on a post like instagram. I used Ajax to create a comment instance.
models.py
class Comment(models.Model):
parent_post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name="comments")
author = models.CharField(max_length=10)
content = models.CharField(max_length=100)
forms.py
class CommentForm(ModelForm):
class Meta:
model = Comment
exclude = ["parent_post"]
HTML
{% for post in posts %}
<form method="POST" data-id="{{post.id}}" class="d-flex align-items-center w-100 mt-2">
{% load widget_tweaks %} <!-- this is a django package for easy CSS -->
{% csrf_token %}
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.author.errors }}
{{ form.author|add_class:"form__author"|attr:"placeholder:name" }}
</div>
<div class="fieldWrapper w-100">
{{ form.content.errors }}
{{ form.content|add_class:"form__content"|attr:"placeholder:content" }}
</div>
<button class="btn btn-sm btn-warning w-auto">Write</button>
</form>
{% endfor %}
JS (Here I didn't put the codes after getting JSON response from views.py)
const forms = document.querySelectorAll("form");
forms.forEach((value) => {
const post_id = Number(value.getAttribute("data-id"));
value.addEventListener("submit", (e) => {
e.preventDefault(); // prevents reload, still submits form data but views.py does nothing for this data
writeComment(post_id);
});
const requestWrite = new XMLHttpRequest();
const writeComment = (post_id) => {
const form = document.querySelector(`form[data-id="${post_id}"]`);
const author = form.querySelector(".form__author");
const content = form.querySelector(".form__content");
const url = "/write/";
if (author.value && content.value) {
requestWrite.open("POST", url, true);
requestWrite.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);
requestWrite.send(
JSON.stringify({
post_id: post_id,
author: author.value,
content: content.value,
})
);
author.value = null;
content.value = null;
}
};
views.py
#csrf_exempt
def write(request):
req = json.loads(request.body)
post_id = req["post_id"]
author = req["author"]
content = req["content"]
comment = Comment.objects.create(parent_post=get_object_or_404(Post, id=post_id), author=author, content=content)
return JsonResponse({"post_id":post_id, "comment_id":getattr(comment, "id"), "author":author, "content":content})
Thank you!

JSONDecodeError at /update_item/ Expecting value: line 1 column 1 (char 0)

I’m a beginner. I have tried everything in the Django E-commerce website course, but it does not work for me. I also tried documentation but I didn’t get any solution. I have this error when I go to /update_item/ and the data is not showing up in the terminal:
Expecting value: line 1 column 1 (char 0)
error screenshot
tutorial link
tutorial link
https://youtu.be/woORrr3QNh8
cart.js
var updateBtns = document.getElementsByClassName('update-cart')
for (i = 0; i < updateBtns.length; i++) {
updateBtns[i].addEventListener('click', function(){
var productId = this.dataset.product
var action = this.dataset.action
console.log('productId:', productId, 'Action:', action)
console.log('USER:', user)
})
}
function updateUserOrder(productId, action){
console.log('User is authenticated, sending data...')
var url = '/update_item/'
fetch(url, {
method:'POST',
headers:{
'Content-Type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify({'productId':productId, 'action':action})
})
.then((response) => {
return response.json();
})
.then((data) => {
location.reload()
});
}
views.py
def updateItem(request):
data = json.loads(request.body)
productId = data['productId']
action = data['action']
print("Action",action)
print("Pordutcs:",productId)
customer = request.user.customer
product = Product.objects.get(id=productId)
order, created = Order.objects.get_or_create(customer=customer , complete=False)
orderitem, created = Orderitem.objects.get_or_create(order= order,product=product)
if action == 'add':
orderitem.quantity = (orderitem.quantitiy +1)
elif action == 'remove':
orderitem.quantity = (orderitem.quantity -1)
orderitem.save()
if orderitem.quantity <= 0:
orderitem.delete()
return JsonResponse("Item was added", safe=False)
store.html
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
{%for i in products %}
<!-- {{i.image.url}} -->
<div class="col-lg-4">
<!-- <img class="thumbnail" src="{{i.image.url}}" alt="sorry"> -->
<img class="thumbnail" src="static{{i.imageURL}}">
<!-- {% static 'my_app/example.jpg' %} -->
<div class="box-element product">
<h6><strong>{{i.name}}</strong></h6>
<hr>
<button data-product="{{i.id}}" data-action='add' class="btn btn-outline-secondary add-btn updatecart">Add
to Cart</button>
<a class="btn btn-outline-success" href="#">View</a>
<h4 style="display: inline-block; float:right"><strong>Rs {{i.price|floatformat:2}}</strong></h4>
</div>
</div>
{% endfor %}
<!-- <img src="static/images/robot.jpg"> -->
</div>
{% endblock content %}

I tried making a dummy django project with the code you provided to see if I counter such error.
Following JS code I used:
function updateUserOrder(){
console.log('User is authenticated, sending data...')
var url = '/update_item/'
fetch(url, {
method:'POST',
headers:{
'Content-Type':'application/json',
},
body:JSON.stringify({'productId':5, 'action':'Add'})
})
.then((response) => {
return response.json();
})
.then((data) => {
location.reload()
});
}
I gave dummy data to productId and action.
Then my views.py goes like this:
from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
#csrf_exempt
def updateItem(request):
data = json.loads(request.body)
productId = data['productId']
action = data['action']
print("Action",action)
print("Pordutcs:",productId)
return JsonResponse("Item was added", safe=False)
Not much with html part, it was just a click button to call the js code.
<button onclick="updateUserOrder()">Add</button>
And worked like a charm, following is the screenshot of my output in django server:
I would suggest you to try running with the same code.
If error is still there, try giving dummy data to productId and action in js code to make sure if there is a problem with the data in productId and action.

I assume you've solved this issue otherwise,...
if you're using Django version 4.0
change the url for the cart.js to update_item, cart.js should look like this
cart.js:
var updateBtns = document.getElementsByClassName('update-cart')
for (i = 0; i < updateBtns.length; i++) {
updateBtns[i].addEventListener('click', function(){
var productId = this.dataset.product
var action = this.dataset.action
console.log('productId:', productId, 'Action:', action)
console.log('USER:', user)
})
}
function updateUserOrder(productId, action){
console.log('User is authenticated, sending data...')
var url = 'update_item/'
fetch(url, {
method:'POST',
headers:{
'Content-Type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify({'productId':productId, 'action':action})
})
.then((response) => {
return response.json();
})
.then((data) => {
location.reload()
});
}
then import csrf_exempt decorator , your views should look like this
views.py(after adding "from django.views.decorators.csrf import csrf_exempt" to the top of your file)
#csrf_exempt
def updateItem(request):
data = json.loads(request.body)
productId = data['productId']
action = data['action']
print("Action",action)
print("Pordutcs:",productId)
customer = request.user.customer
product = Product.objects.get(id=productId)
order, created = Order.objects.get_or_create(customer=customer , complete=False)
orderitem, created = Orderitem.objects.get_or_create(order= order,product=product)
if action == 'add':
orderitem.quantity = (orderitem.quantitiy +1)
elif action == 'remove':
orderitem.quantity = (orderitem.quantity -1)
orderitem.save()
if orderitem.quantity <= 0:
orderitem.delete()
return JsonResponse("Item was added", safe=False)
Then Clear Your Cache and try adding the item to cart again...it should work this time

Stripe 'card-element' is not displaying. Why?

Completely losing my mind with this...
I am creating a ecommerce website with django. I use Stripe as Payment Gateway Provider. I don't understand ...Stripe 'card-element' is not displaying. Why ?
For information, the card-element used to be displayed correclty in the previous days. I could simulate payments which were recorded in my Stripe account... The thing is, I have checked with older versions of my code which used to work (in case I did a mistake since). But none of them is working... It's driving me crazy.
Anything wrong with my code ? Any idea ?
checkout.html
{% extends 'main.html' %}
{% load static %}
{% block content %}
<script src="https://js.stripe.com/v3/"></script>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center align-items-center">
<h3 class="text-primary fw-bold">PAIEMENT PAR CARTE</h3>
</div>
</div>
<div class="row ">
<div class="col d-flex justify-content-center align-items-center">
<form id="payment-form" method='POST' class="col">
{% csrf_token %}
<div class="form-control" id="card-element"></div>
<div class="sr-field-error" id="card-errors" role="alert"></div>
<button id="payer-submit" class="btn btn-primary">
<div class="spinner-border spinner-border-sm text-light d-none" id="spinner" role="status"></div>
<span class="text-white" id="button-text">Pay</span>
<span class="text-white" id="order-amount"></span>
</button>
</form>
</div>
</div>
<div class="row ">
<div class="col d-flex justify-content-center align-items-center">
<form id="payload" method='POST' class="col" action="/payment/payment-bycard-complete">
{% csrf_token %}
<input id ="data-payload" type="hidden" name="payload"/>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="{% static '/js/stripe.js' %}"></script>
{% endblock content %}
stripe.js
document.getElementById("payer-submit").disabled = true;
fetch("/payment/bycard", {
method: "POST",
headers: {
"Content-Type": "application/json",
}
})
.then(function(result) {
return result.json();
})
.then(function(data) {
return setupElements(data);
})
.then(function({ stripe, card, clientSecret }) {
document.getElementById("payer-submit").disabled = false;
// Handle form submission.
var form = document.getElementById("payment-form");
form.addEventListener("submit", function(event) {
event.preventDefault();
// Initiate payment when the submit button is clicked
pay(stripe, card, clientSecret);
});
});
// Set up Stripe.js and Elements to use in checkout form
var setupElements = function(data) {
stripe = Stripe(data.publishableKey);
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4"
}
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a"
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
return {
stripe: stripe,
card: card,
clientSecret: data.clientSecret
};
};
/*
* Calls stripe.confirmCardPayment which creates a pop-up modal to
* prompt the user to enter extra authentication details without leaving your page
*/
var pay = function(stripe, card, clientSecret) {
changeLoadingState(true);
// Initiate the payment.
// If authentication is required, confirmCardPayment will automatically display a modal
stripe
.confirmCardPayment(clientSecret, {
payment_method: {
card: card
}
})
.then(function(result) {
if (result.error) {
// Show error to your customer
showError(result.error.message);
} else {
// The payment has been processed!
orderComplete(clientSecret);
}
});
};
/* ------- Post-payment helpers ------- */
/* Shows a success / error message when the payment is complete */
var orderComplete = function(clientSecret) {
//// Just for the purpose of the sample, show the PaymentIntent response object
stripe.retrievePaymentIntent(clientSecret).then(function(result) {
// var paymentIntent = result.paymentIntent;
// var paymentIntentJson = JSON.stringify(paymentIntent, null, 2);
// post data and show new page
// var input = document.getElementById("data-payload");
// input.value = paymentIntentJson;
var form2 =document.getElementById("payload");
form2.submit();
changeLoadingState(false);
});
};
var showError = function(errorMsgText) {
changeLoadingState(false);
var errorMsg = document.querySelector(".sr-field-error");
errorMsg.textContent = errorMsgText;
setTimeout(function() {
errorMsg.textContent = "";
}, 4000);
};
// Show a spinner on payment submission
var changeLoadingState = function(isLoading) {
if (isLoading) {
document.getElementById("payer-submit").disabled = true;
document.querySelector("#spinner").classList.remove("d-none");
document.querySelector("#button-text").classList.add("d-none");
} else {
document.getElementById("payer-submit").disabled = false;
document.querySelector("#spinner").classList.add("d-none");
document.querySelector("#button-text").classList.remove("d-none");
}
};
views.py
import stripe
from django.shortcuts import render, redirect
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
from django.contrib import messages
from core.settings import STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY
from core.utils import display_price_in_euro_string
from basket.basket import Basket
from payment.checkout import calculate_order
from payment.save_order import create_invoice_xls, save_order_in_db, save_ordered_items_in_db, save_stripe_payment_in_db
from payment.send_mail import send_order_confirmation
def checkout(request):
if not request.session.get('cart', None):
return redirect('store:all_products')
elif not request.session.get('shipping-form', None):
return redirect('address:create_shipping_address')
else:
calculate_order(request)
context = {
'shipping_fees_in_euros': display_price_in_euro_string(request.session['order']['shipping_fees_in_cent']),
'cart_price_with_discount_in_euros': display_price_in_euro_string(request.session['order']['cart_price_in_cent_with_discount']),
'cart_price_without_discount_in_euros': display_price_in_euro_string(request.session['order']['cart_price_in_cent_without_discount']),
'order_total_in_euros': display_price_in_euro_string(request.session['order']['order_total_in_cent']),
'cart_discount_in_euros': display_price_in_euro_string(request.session['order']['cart_discount_in_cent']),
}
return render(request, 'payment/checkout.html', context)
#csrf_exempt
def create_stripe_payment_intent(request):
try:
total_to_pay = request.session['order']['order_total_in_cent']
stripe.api_key = STRIPE_SECRET_KEY
if request.method == "POST":
# Create a PaymentIntent with the order amount and currency
# https://stripe.com/docs/api/payment_intents/create
intent = stripe.PaymentIntent.create(
amount = total_to_pay,
currency = "eur",
metadata = {
"Adresse de livraison": request.session['shipping-form']['id'],
"Adresse de facturation": request.session['billing-form']['id'],
"Montant commande TTC (centimes)": request.session['order']['order_total_in_cent'],
"Panier avant réduction TTC (centimes)": request.session['order']['cart_price_in_cent_without_discount'],
"Panier après réduction TTC (centimes)": request.session['order']['cart_price_in_cent_with_discount'],
"Frais de livraison TTC (centimes)": request.session['order']['shipping_fees_in_cent'],
"TVA (centimes)": request.session['order']['tva_in_cent'],
"Montant commande HT (centimes)": request.session['order']['order_total_in_cent_HT'],
"SESSION KEY": request.session.session_key,
"PANIER": str(request.session['cart']),
},
receipt_email = 'monoi#laposte.net',
)
request.session['order']['stripe-intent'] = {}
request.session['order']['stripe-intent']['client-secret'] = intent.client_secret
request.session['order']['stripe-intent']['id'] = intent.id
request.session.modified = True
try:
return JsonResponse({
'publishableKey': STRIPE_PUBLISHABLE_KEY,
'clientSecret': intent.client_secret
})
except Exception as e:
return JsonResponse({'error': str(e)}, status = 403)
else:
return redirect('payment:checkout')
except:
return redirect('payment:checkout')
def payment_bycard_complete(request):
stripe.api_key = STRIPE_SECRET_KEY
payment_intent = stripe.PaymentIntent.retrieve(
request.session['order']['stripe-intent']['id'],
)
if payment_intent.status == "succeeded":
save_order_in_db(request, "STRIPE")
save_ordered_items_in_db(request)
save_stripe_payment_in_db(request)
is_invoice = create_invoice_xls(request)
is_mail = send_order_confirmation(request)
basket = Basket(request)
basket.clear()
request.session.flush()
messages.success(request, 'Merci pour votre achat')
return redirect('home_page:home')
else:
return redirect('home_page:error')
Versions :
Django 3.1.6
stripe 2.60.0
EDIT
Console
Promise { <state>: "pending" }
​
<state>: "fulfilled"
​
<value>: Object { publishableKey: "pk_test_51Ia5dlE8XikcpErQEGGuA56itbGvPLmnZSNALSKvVGK2syFR21CvPoYMCJtOjb2DArvAKT1hd1z2KSS4wZmpDqre00ZppDWLLl", clientSecret: "pi_3JPkJfE8XikcpErQ0NuBgyfq_secret_C94xiK71RDMFaZImXYc12c1rn" }
Uncaught (in promise) TypeError: Response.json: Body has already been consumed.
<anonymous> http://127.0.0.1:8000/static/js/stripe.js:16
promise callback* http://127.0.0.1:8000/static/js/stripe.js:13
stripe.js:16:21
According to debugger :
In
.then(function(result) {
return result.json();
})
return result.json() bugs
EDIT 2
I had console.log(result.json()) before return result.json(), which I think is not allowed with fetch. I have removed this console.log(result.json()).
There is still something I don't understand ... My code works well in Chrome (I am able to fill credit card number etc.) but not with Firefox. Any ideas ?

I had console.log(result.json()) before return result.json(), which is not allowed with fetch. I have removed this console.log(result.json()) and it works now.