I am trying this below requirement where there is a voice synthesizer and it converts my voice (which is a question) into a text and it sends that text to the back-end Django through Ajax.
At the back-end, Django takes that data and use that data (question) to access the database and get the result and send that result to the frontend which should get caught by the success part of the Ajax. But it's not working.
I am not able to figure out where is the problem. I am posting the Ajax and Django code below for your reference.
views.py
def GetAnswer(request):
if request.method=='GET' and request.is_ajax():
question_asked=str(request.GET.get("message_now"))
try:
answer=QuestionAnswer.objects.filter(question=question_asked).value_list('answer', flat=True)[0]
print(answer)
data={"data":answer}
return JsonResponse({"success": True}, data, status=200)
except:
return JsonResponse({"success": False}, status=400)
else:
print("Not Suceess")
main.js
function chatbotvoice(message) {
const speech = new SpeechSynthesisUtterance();
if (message !== null && message !== '') {
$.ajax({
url: "http://127.0.0.1:8000/getanswer",
type: 'GET',
data: {
message_now: message
},
success: function (data) {
speech.text = JSON.parse(data);
window.speechSynthesis.speak(speech);
chatareamain.appendChild(showchatbotmsg(speech.text));
},
error: function (error) {
speech.text = "Oh No!! I don't Know !! I am still learning!! Your question got recorded and answer for your question will be available with me in 24 hours";
window.speechSynthesis.speak(speech);
chatareamain.appendChild(showchatbotmsg(speech.text));
},
});
}
}
I tried to check whether the Ajax request is reaching the function and I am able to view the value of the variable "question_asked" in the back-end.
$.ajax({
crossDomain: true,
url: "{% url 'getanswer' %}",
type: 'GET',
data: {
message_now: message,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
return JsonResponse({"success": True}, data, status=200)
that line will fail with some error message, because you pass data as a second positional argument. Django documentation tells you that second positional argument is encoder. Since a list with data isn't an encoder - you will get an error.
Your error would be catched by try/except block. So the execution flow will move to except block - where you return {"success": false} JSON response.
So your code should become like this:
def GetAnswer(request):
if request.method=='GET' and request.is_ajax():
question_asked=str(request.GET.get("message_now"))
try:
answer=QuestionAnswer.objects.filter(question=question_asked).value_list('answer', flat=True)[0]
print(answer)
data={"data":answer}
return JsonResponse({"success": True, "data": data}, status=200)
except:
return JsonResponse({"success": False}, status=400)
else:
print("Not Suceess")
Please, refer to this part of documentation for more details https://docs.djangoproject.com/en/3.1/ref/request-response/#jsonresponse-objects
UPDATE (21.09.2020)
You should fix this line:
answer=QuestionAnswer.objects.filter(question=question_asked).value_list('answer', flat=True)[0]
to
answer=QuestionAnswer.objects.filter(question=question_asked).values_list('answer', flat=True)[0]
because there's no value_list function, but there's values_list.
UPDATE 2 (21.09.2020)
So the final code should be:
def GetAnswer(request):
if request.method == 'GET' and request.is_ajax():
question_asked = request.GET["message_now"]
try:
answer = QuestionAnswer.objects.filter(question=question_asked).values_list('answer', flat=True)[0]
return JsonResponse({"success": True, "answer": answer}, status=200)
except:
return JsonResponse({"success": False}, status=400)
and JS code should be modified as well
function chatbotvoice(message) {
const speech = new SpeechSynthesisUtterance();
if (message !== null && message !== '') {
$.ajax({
url: "http://127.0.0.1:8000/getanswer",
type: 'GET',
data: {
message_now: message
},
success: function (data) {
if (data.success == true){
speech.text = data.answer;
window.speechSynthesis.speak(speech);
chatareamain.appendChild(showchatbotmsg(speech.text));
} else {
speech.text = "Oh No!! I don't Know !! I am still learning!! Your question got recorded and answer for your question will be available with me in 24 hours";
window.speechSynthesis.speak(speech);
chatareamain.appendChild(showchatbotmsg(speech.text));
}
},
error: function (error) {
speech.text = "Oh No!! I don't Know !! I am still learning!! Your question got recorded and answer for your question will be available with me in 24 hours";
window.speechSynthesis.speak(speech);
chatareamain.appendChild(showchatbotmsg(speech.text));
},
});
}
}
Related
I am writing the view for accepting the friend request, I dont know what is happening,
i am fetching jason data to the view but i doesn't working .
i have tried all of the solutions that are on this website but they doesn't work for me
here is my Javascript
<script >
function acceptFriendRequest(friend_request_id, uiUpdateFunction){
var url = "{% url 'friend:friend-request-accept' friend_request_id=53252623623632623 %}".replace("53252623623632623", friend_request_id)
$.ajax({
type: 'GET',
dataType: "json",
url: url,
timeout: 5000,
success: function(data) {
console.log("SUCCESS", data)
if(data['response'] == "Friend request accepted."){
// ui is updated
}
else if(data['response'] != null){
alert(data['response'])
}
},
error: function(data) {
console.error("ERROR... this is the error from accept", data)
alert("Something went wrong")
},
complete: function(data){
uiUpdateFunction()
}
});
}
Here is my view
def accept_friend_request(request, *args, **kwargs):
user = request.user
payload = {}
if request.method == "GET" and user.is_authenticated:
friend_request_id = kwargs.get("friend_request_id")
# print(f"friend request id {friend_request_id}")
if friend_request_id:
friend_request = FriendRequest.objects.get(pk=friend_request_id)
# print(f"friend request object {friend_request}")
# confirm that is the correct request
if friend_request.receiver == user:
if friend_request:
# found the request. Now accept it
friend_request.accept()
payload['response'] = "Friend request accepted."
else:
payload['response'] = "Something went wrong."
else:
payload['response'] = "That is not your request to accept."
else:
payload['response'] = "Unable to accept that friend request."
else:
# should never happen
payload['response'] = "You must be authenticated to accept a friend request."
return HttpResponse(json.dumps(payload), content_type="application/json")
here is the accept()
def accept(self):
"""
Accept a friend request
update both SENDER and RECEIVER friend lists
"""
receiver_friend_list = FriendList.objects.get(username = self.receiver)
if receiver_friend_list:
receiver_friend_list.add_friend(self.sender)
sender_friend_list = FriendList.objects.get(user = self.sender)
if sender_friend_list:
sender_friend_list.add_friend(self.receiver)
self.is_active = False
self.save()
I often had the problem that I couldn't see the error message (with PHP) with the Jquery Ajax / json return. Change dataType:"json" to "text" and you may see the error message
My template.html:
...
<button class="btn btn-success" onclick="save_post(event, 'publish')">Publish</button>
...
My javascript.js:
function save_post(event, action) {
event.preventDefault();#new line
var tag_string=document.getElementById('id_tags').value;
if (action=='publish' || action=='draft') {
var url_post='/blog/post/new/'
} else {
var url_post='/blog/post_edit/'
};
$.ajax({type: 'POST',
url: url_post,
data: {
tagstring: tag_string,
action: action
},
success: function (lista) {
//code
}
});
};
My views.py:
#staff_member_required
def post_new(request):
context_dict=[]
if request.method == "POST":
if request.is_ajax():
#code
...
else:
form = PostForm()
return render(request, 'blog/post_edit.html', context_dict)
My url.py:
app_name = 'blog'
urlpatterns = [
...
path('post/new/', views.post_new, name='post_new'),
path('post/<int:pk>/edit/', views.post_edit, name='post_edit'),
...
My views is called by the url (browser), then the button call a javascript function and it call (with ajax) again the same view, this time with request.method = "POST" and this works, but request.is_ajax() gives False.
For call post_edit (probabily) I need the id of the post. Where can I get it?
Should I pass it to save_post() from the template?
Edit: ignore these lines below
Also should I use preventDefault() somewhere?
Thank you
Edit: now I use preventDefault() but it gives this error:
Not Found: /blog/post_new/
[26/Jan/2018 19:07:20] "POST /blog/post_new/ HTTP/1.1" 404 10871
and ajax dosn't call the view. Edit: I solved this problem, but I continue tomorrow :)
Your Ajax code some problems and view is correct
I have attached my Code attached Image and code
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'myajaxview', // the url where we want to POST
data :{
'csrfmiddlewaretoken': '{{csrf_token}}',
'text': text,
'search': search,
'email': email,
'url': url,
'telephone': telephone,
'password': password,
'number': number,
},
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
How would i return error message with django?
I am thinking something like this ( i am using jsonresponse just as an example of how i want to do this):
def test(request):
if request.method == "POST":
if form.is_valid():
form.save
return JsonResponse({"message":"Successfully published"})
else:
'''here i would like to return error something like:'''
return JsonResponse({"success": false, "error": "there was an error"})
else:
return JsonResponse({"success}: false, "error": "Request method is not post"})
What I am trying to achieve is to render error messages in template from ajax error function. Something like this:
$("#form").on("submit", function(){
$.ajax({url: "url",
data: ("#form").serialize,
success: function(data){
alert(data.message);
},
error: function(data){
alert(data.error);
}
});
Would that be possible?
You can of course return error messages from your Django App. But you have to define what type of error you want to return. For this purpose you'll have to use error codes.
The most known are 404 for page not found or 500 for a server error. You can also have 403 for a forbidden access... It depends of the case you want to treat. You can see the wikipedia page for a view of the possibilities.
Instead of sending a 'success':False use this :
response = JsonResponse({"error": "there was an error"})
response.status_code = 403 # To announce that the user isn't allowed to publish
return response
With this jQuery will recognize the answer as an error and you will be able to manage the error type.
To manage your errors in JavaScript :
$("#form").on("submit", function(){
$.ajax({
url: "url",
data: ("#form").serialize,
success: function(data){
alert(data.message);
},
error: function(data){
alert(data.status); // the status code
alert(data.responseJSON.error); // the message
}
});
Try this. I think there is a syntax error in your code. Also, it will be better if you post your error message. I changed the false to False
Also did you omit your form instance in your code.
def test(request):
if request.method == "POST":
form = MyForm(request.POST)
if form.is_valid():
form.save()
return JsonResponse({"message":"Successfully published"})
else:
'''here i would like to return error something like:'''
return JsonResponse({"success": False, "error": "there was an error"})
else:
return JsonResponse({"success}: False, "error": "Request method is not post"})
Here is my solution. I rewrote your code:
def test(request):
if request.method == "POST":
if form.is_valid():
form.save()
return JsonResponse({"message":"Successfully published"}, status=200)
else:
return JsonResponse({"error": "there was an error"}, status=403)
else:
return JsonResponse({"error": "Request method is not post"}, status=403)
$(document).on("submit","#form", function(){
$.ajax({
url: "url",
data: ("#form").serialize,
success: function(data){
alert(data.message);
},
error: function(data){
alert(data.responseJSON.error);
}
});
I'm trying to display the error messages that I provided on my forms, but it only display the id name instead of error message.
Here's my code
Form.py
class SecurityCode(forms.Form):
sCode = forms.RegexField(regex=r'^\w+$', widget=forms.TextInput(attrs=dict(id="scode", name="scode", required=True, size=25, placeholder=" Security Code")), error_messages={ 'invalid': "This value must contain only letters, numbers and underscores." })
Views.py
def security(request):
if request.method == 'POST':
securityField = SecurityCode(request.POST)
if taxpayerField.is_valid():
return HttpResponse("success")
else:
return HttpResponse(taxpayerField.errors)
Note: I'm trying to get the error message in this views not on my html because I'm trying to alert that on my javascript. Also this is just my sample code not the original one.
You can try this:
views.py:
from django.http import JsonResponse
def security(request):
form = SecurityCode(request.POST)
if not form.is_valid():
return JsonResponse({
'success': False,
'err_code': 'invalid_form',
'err_msg': form.errors,
})
#[...] Actions if form is valid ...
return render(request, 'template.html')
javascript code:
def submit_form(){
var data = {
field1: '...',
field2: '...',
csrfmiddlewaretoken: 'csrftoken',
};
$.ajax({
url: '/submit/form/',
method: 'POST',
data: data,
dataType: 'json',
success: function (data){
if (data.success){
// Actions ...
}
else if (data.err_code === 'invalid_form'){
for(var key in data.err_msg){
console.log('[error] for ' + key + ': ' + data.err_msg[key][0]);
}
}
},
});
}
I use console.log to illustrate the recovery of the error message for each field.
I'm trying to compile project https://github.com/kannan4k/django-carpool
please refer this project repo for this issue.
and end up with following error during ajax call.
Failed to load resource: the server responded with a status of 400 (BAD REQUEST).
I know this is because of ajax post request & CSRF tokens.
following is my setting.
1. disable "django.middleware.csrf.CsrfViewMiddleware"
2. in new_trip page I have a button (Postdata)so this button sends an ajax request.
My View:-
#login_required
def save_journey(request):
if request.is_ajax() and request.method == "POST":
try:
res = json.loads(request.body)
cords = res['cords']
cords = [[x['d'], x['e']] for x in cords]
distance = res['distance']
start_place = res['start']
end_place = res['end']
clusters = clusterize_latlngs(cords, distance)
time = datetime.datetime.strptime(res['time'], "%m/%d/%Y %H:%M")
Trip.objects.create(user=request.user, time=time, cluster=json.dumps(clusters), travel_distance=distance,
start_place=start_place, end_place=end_place)
return HttpResponse()
except:
return HttpResponseBadRequest()
else:
return HttpResponseNotAllowed(['POST'])
Ajax call (home.js)
function postData() {
radius = 0;
var url = "/save_journey/";
var dataType = 'json';
if (type == 'r') {
radius = $('#radius').val();
url = "/get_results/";
dataType = 'html';
}
var data = JSON.stringify({
cords: myroute,
time: document.getElementById('dateStart').value,
start: document.getElementById('startPlace').innerHTML,
end: document.getElementById('endPlace').innerHTML,
radius: radius,
distance: distance
});
$.ajax({
type: "POST",
url: url,
dataType: dataType,
data: data,
success: function (data) {
if (type == 'r') {
window.location.href = "/search_results/";
}
else {
window.location.href = '/trip_success/';
}
},
error: function () {
console.log('Error getting options list...')
}
});
console.log(data);
}
this code is not able to call /save_journey/ URL.
I tried many answers from stack overflow & didn't figure out what is the problem .
You should never disable csrftoken unless you're absolutely sure about what you're doing. It's an important part of the security features implemented in Django.
Here is an example of how you can use Ajax with Django with csrftoken:
You can use Ajax Post to send JSON to Django and then handle the arguments as a dict(). Here is an example:
In browser (JQuery/JavaScript):
function newModule() {
var my_data = $("#my_element").val(); // Whatever value you want to be sent.
$.ajax({
url: "{% url 'modules' %}", // Handler as defined in Django URLs.
type: "POST", // Method.
dataType: "json", // Format as JSON (Default).
data: {
path: my_data, // Dictionary key (JSON).
csrfmiddlewaretoken:
'{{ csrf_token }}' // Unique key.
},
success: function (json) {
// On success do this.
},
error: function (xhr, errmsg, err) {
// On failure do this.
}
});
In server engine (Python):
def handle(request):
# Post request containing the key.
if request.method == 'POST' and 'my_data' in request.POST.keys():
# Retrieving the value.
my_data = request.POST['my_data']
# ...
Hope this helps.