Develop Reference

Why does my http response keep showing like an html page?

Here's the thing: I thought I could receive an HTTP response and manage it with javascript ajax and do whatever I wanted with that response without the user even noticing. For example using console.log(response).
But it's not working and the response is showing in text form like an html.
I'll explain what I'm doing and my problem:
I'm making a comment section for a django app. My comment system was working fine. The user could post comments and see other peoples comments.
The thing is that I had to refresh the page every time to load the recently published comments.
That's not very cool, I want to be able to post a comment and see it immediately without reloading the page.
I did my research and found this comment on quora
You use AJAX and a Django backend view.
Something (a user leaving a new comment, a timer etc.) will trigger a
JavaScript AJAX call to a Django view requesting comments for the
page. That Django view will return the result to the JavaScript AJAX
call. It can be done in two ways:
it can just return the data, typically in JSON and then JavaScript
worries about rendering that data on the page
or, the view can run the
data through a Django template and return the partial HTML and then
the JavaScript just needs to swap out the HTML response chunk in the
content area for the comments (typically identified by a HTML ID,
where you replace the HTML content of the div with a certain ID with
the HTML you received from the view both approaches have pros and cons
and which is better depends on many factors
I am trying to follow the second way.
My problem is that the HttpResponse changes my entire page and displays what's in the response as html text!
Here's my views.py. This is the view that renders the page where the comment section is at
(I'm not sending the rendered html yet because I'm having problems with HTTP response)
def make_bid(request, pk):
listing = Listing.objects.get(id = pk)
comments = listing.comments.all()
if request.method == "POST":
if request.user.is_authenticated:
comment = Comment(
user = request.user,
comment= request.POST['comment'],
date = datetime.datetime.now().date(),
listing = listing)
comment.save()
context = {'comments': listing.comments.all()}
rendered = render_to_string("auctions/comments.html", context)
return HttpResponse("this a http response")
else:
return HttpResponse("user is not even authenticated")
else:
return render(request, "auctions/make-bid.html", {
'article' : listing,
'comments': comments
})
The html for the comment section
<aside class="comment__section">
<h3>Comments</h3>
<form action="{% url 'make-bid' article.id %}" method="post" id="form-comment">
{% csrf_token%}
<textarea id="textbox" class="field form__field--block" value="" name="comment" placeholder="What do you think about this listing?"></textarea>
<input class="button button__primary" type="submit" value="Publish">
</form>
<section class="comment__container">
<!-- comments from the http response should be inserted here with javascript-->
</section>
</aside>
The javascript. I copied this from another stackoverflow question. I was doing it myself with plain javascript and thought that might be the problem. It's not. It still doesn't give me the result I want
<script>
aside = document.querySelector(".comment__section")
// this is the id of the form
$("#from-comment").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
console.log('Submission was successful.');
console.log(data);
},
error: function(data){
console.log("no response")
}
});
});
</script>
I already tried using return JsonResponse. And still the same result :(
I am really lost here. I'm very new to Django and server-side stuff. And I have no idea why is the response showing like a whole page?
What am i missing?
Do http responses actually work differently as I think they do?
I would really appreciate any help. Thank you!!!

You have to serialize the data. Means, to convert django queryset into json format to send it to ajax.
from django.core import serializers
def make_bid(request, pk):
listing = Listing.objects.get(id = pk)
comments = listing.comments.all()
if request.method == "POST":
if request.user.is_authenticated:
comment = Comment(
user = request.user,
comment= request.POST['comment'],
date = datetime.datetime.now().date(),
listing = listing)
comment.save()
comments = listing.comments.all()
serialized_qs = serializers.serialize('json', list(comments))
data = {"queryset" : serialized_qs}
return JsonResponse(data)
else:
return HttpResponse("user is not even authenticated")
else:
return render(request, "auctions/make-bid.html", {
'article' : listing,
'comments': comments
})

I fixed it! My main problem was me. I made a few stupid mistakes. I had a typo and jquery wasn't loading. Here's how the script looks now:
<script src="{%static 'auctions/scripts/jquery-3.6.0.js' %}"></script>
<script>
$(document).ready(function(){
$("#form-comment").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
$("#comments").html(data);
$("#textbox").val('')
},
error: function(data){
console.log("no response")
}
});
});
})
</script>
And views.py. Now I'm sending the rendered comment section with an HttpResponse
def make_bid(request, pk):
listing = Listing.objects.get(id = pk)
context = {'comments': listing.comments.all()}
rendered = render_to_string("auctions/comments.html", context)
if request.method == "POST":
if request.user.is_authenticated:
comment = Comment(
user = request.user,
comment= request.POST['comment'],
date = datetime.datetime.now().date(),
listing = listing)
comment.save()
context = {'comments': listing.comments.all()}
rendered = render_to_string("auctions/comments.html", context)
return HttpResponse(rendered)
else:
return HttpResponse("user is not even authenticated")
else:
return render(request, "auctions/make-bid.html", {
'article' : listing,
'comments': rendered
})
And html looks like this
<aside class="comment__section" >
<h3>Comments</h3>
<form method="post" id="form-comment">
{% csrf_token%}
<textarea id="textbox" class="field form__field--block" value="" name="comment" placeholder="What do you think about this listing?"></textarea>
<input class="button button__primary" type="submit" value="Publish">
</form>
<section class="comment__container" id="comments">
{{comments}}
</section>
</aside>
I would still love to see a way to make the ajax call and handle the response with javascript. But I'm done with this comments section for now!
Thanks to everybody who answered this question!

How can I show a loading animation in Django while the server is processing a view?

So I'm currently working on a Django project that has a view that takes quite a bit of time to load and it can be rather user unfriendly to keep the user wondering what's wrong with the website until the page loads.
My website works in way such that the user would have a url such as:
http://www.example.com/Name/JohnRichards
Saved to their bookmarks. Upon visiting the above URL the server should display a loading message (probably with a GIF and AJAX or JS) of a loading screen until the server finishes loading data and then display it.
Note: Just in case it matters, when he user goes to the above mentioned link, they won't be redirected there, rather, this would be their entry point since it's a url that they have saved in their bookmarks
What I thought would work is returning some sort of a loading template of sorts as soon as somebody visits the page, and then after the data processing has finished, I would return the final response. But I can't have two returns in a function.
The following is my urls.py file:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('', views.index, name='index'),
path('Name/'+'<str:Name>', views.NameInLink, name='NameInLink'),
]
And the following is my views.py file
from django.shortcuts import render
from django.http import HttpResponse
from django.http import HttpResponseRedirect
from .forms import NameForm
from . import DataProcessor
import time
def NameInLink(request, Name):
UserData = DataProcessor.process(Name)
return render(request, "UserData.html", {"UserData": UserData})
How could I add a loading screen of sorts between user using visiting the URL and the data processing finishing?

What I would suggest is putting the loading template (the GIF or whatever) in your default template for the page. And then, when the Ajax call has returend successfully, hide or remove the loading GIF using javascript.
I do not think it is necessary to send the loading template using Ajax, if I understand your scenario correctly.
EDIT
You cannot send two consecutive responses from one view. In your view the reponse cannot be send before the User data is processed.
So I think your flow should look like this:
Open the loading template without the user data
def NameInLink(request, Name):
return render(request, "UserData.html")
When loaded your page should send a AJAX request (receiving html data) to a second view, e.g.:
def process_data(request, name):
userData = DataProcessor.process(name)
context = {'data': userData}
result = render_to_string("some_results_template", context)
data = {'data': result}
return JsonReponse(data)
On successful return of the AJAX call remove the GIF and add the returned data using javaScript
Here is an example of a very stripped down possible template with the script, just to make the answer clearer
<head>
<!-- Don't forget to load jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>Default Page</h1>
<!-- The loading image -->
<div id="loading">
<p>Loading</p>
</div>
<!-- Container for result -->
<div id="success">
</div>
<script>
// Function for adding User data and removing loading animation
var replace_data = function(data){
$('#success').append(data.data);
$('#loading').remove();
}
// AJAX call when page has loaded
$(document).ready(function(){
$.ajax({
url: '/test2/',
data: {
'name': 'FOO'
},
data_type: 'html',
success: function(data){
replace_data(data);
}
});
});
</script>
</body>

Passing a parameter through AJAX URL with Django

Below is my code. 'n' logs correctly in the console, and everything works perfectly if I manually enter the value for 'n' into url: '{% url "delete_photo" iddy=2%}'. Alas, when I try to use 'n' as a variable (seen below) it gives me a reverse match not found error. Can anyone help with this?
javascript
function test(n){
console.log(n);
$.ajax({
type: 'get',
url: '{% url "delete_photo" iddy=n%}',
datatype:'json',
success: function(data){
alert(n)
console.log(data)
console.log(n)
},
error: console.log("SSS"),
});}
html
{% for t in photos %}
<div id="photobox" ><img id="img_pb3"src="{{t.photo.url}}">
<div><a><span onclick="test({{t.id}})" class="closeBtn">×</span></div></a>
</div>
{% endfor %}
urls
urlpatterns = [
path('', views.explore, name='explore'),
path('home/', views.home, name='home'),
path('home/comment', views.comment, name='comment'),
path('home/photo_del/<iddy>', views.delete_photo, name='delete_photo')
]
views
def delete_photo(request, iddy):
data = {'a':iddy, 'b': iddy}
return JsonResponse(data, safe=False)

You can't possibly do this. You have fundamentally misunderstood the relationship between backend Django code and front-end Javascript code. Django templates are fully evaluated on the server, at which point the template tags are converted into plain HTML text. There is therefore no way that a Javascript function - which runs much, much later, on the browser itself - can pass a parameter to be used in a template tag.
The only way to do this would be to render the URL with a dummy value - one you know can't occur in the URL itself - and then replace that value in the JS with the one from the parameter, using normal JS string replace functions.
To be honest, it would be better to remove the ID from the URL altogether. Apart from anything else, a delete action should be a POST, not a GET - you don't want the Googlebot accidentally crawling your URLs and deleting all your items - and with a POST you can send the ID in the posted data.

Maybe something like this:
<a class="closeBtn" href="{% url 'delete_photo' iddy=t.id %}" id="{{t.id}}"></a>
And then you can retrieve the reference using attr:
$.ajax({
url: $('.closeBtn').attr("href"),
data: { "iddy": $('.closeBtn').attr("id")},
.....
})

Making a django html template request with multiple key values

I'm new to using Django or even creating a website, so please bear with me if I have provided too little/much detail about the issue I'm facing. Also, I've spent the better part of the last week trolling SO pages, blogs, Django tutorials, Django documentation, etc. trying to solve the issue myself. Maybe I've overlooked something or I'm just unlucky, but nothing I've found addresses my particular situation in its entirety. Most examples seem to focus on handling requests in views.py and not on how the original request is made in the Django template.
I have a Django template, view_table.html, that displays a Bootstrap DataTable table object to a user. The second column of this table is a BigIntegerField called MyRow_ID. I currently have code in MyCode.js that allows the user to highlight multiple rows, and when button modify_button is clicked, the MyRow_ID values for the selected rows (e.g. [2, 13, 14]) are captured into a JS dict called sent_data. After these values have been captured, I'd like for modify_button to create a GET request that sends sent_data along with it. After matching in urls.py and calling the modify_data function in views.py, modify_data should render a new page modify_table.html while passing back the model instances matching MyRow_ID in order to display only the selected rows' data. I think I'm really close, and perhaps only a tweak to the regex expression is what I need, but here are my questions:
How do I create a GET request in the Django template view_table.html that passes sent_data along to Django? Currently I'm using a form with the method and action attributes set to "GET" and "{% url 'modify_data' sent_data=sent_data %}" respectively. I'm assuming GET and not POST should be used because the request isn't modifying the backend, it's more of a "filter the view" type of request. Is this a correct assumption? What would the requested url look like? Say MyRow_ID values are [2,13,14]. Would the get request look something like /modify_data/matched_row_1=2&matched_row_2=13&matched_row_3=14? Do I have to create this url string myself in the template by iterating over sent_data and attaching a "matched_row_n=" string, or is there a simpler way for the template to create this automatically in the request?
What's the correct regex pattern that should be used in myapp/urls.py, given sent_data could have anywhere from 1 to n unique MyRow_ID values, assuming 1 to n rows are selected respectively? (Obviously robust code would include handling where 0 rows are selected and modify_button is clicked, but let's set that aside for now.) Currently I'm getting a NoReverseMatch Error at /myapp/view_data/: Reverse for 'modify_data' with arguments '()' and keyword arguments '{u'sent_data': ''}' not found. I'm new to using regex, and I know what I have in myapp/urls.py is wrong.
Is the code in myapp/views.py correct to filter the matching model instances and render modify_table.html with the selected rows?
view_table.html:
<!DOCTYPE html>
<html>
<head>
## Bunch of code… ##
</head>
<body>
<div class="col col-xs-12 text-right">
<form style="display" method="get" action="{% url 'modify_data' sent_data=sent_data %}">
<button id="modify_button" type="button" class="btn btn-primary btn-create">Modify Data</button>
</form>
</div>
<br><br><br>
<table id="my_table">
## Code that displays my_table ##
</table>
<!-- Execute JS scripts -->
<script type="text/javascript" src="{% static "myapp/js/jquery-1.12.0.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/jquery.dataTables.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/bootstrap.min.js" %}"></script>
<script type="text/javascript" src="{% static "myapp/js/dataTables.bootstrap.min.js" %}"></script>
<script type="text/javascript">
var sent_data = [];
</script>
<script type="text/javascript" src="{% static "myapp/js/MyCode.js" %}"></script>
</body>
</html>
MyCode.js:
$(document).ready(function(){
var oTable = $('#my_table').DataTable();
var selected_data = [];
$('#my_table tbody').on('click','tr',function(){
$(this).toggleClass('active');
});
$('#modify_button').click(function(event){
selected_data = $.map(oTable.rows('.active').data(), function (item) {
return item[1]
});
sent_data = { 'modify_rows': selected_data };
});
});
I should note that I'm using MyRow_ID and not the native DataTable attribute rowID because I'm assuming DataTable's automatically-created rowID do not match the automatically-created primary keys (pk) that Django is using. Is this a correct assumption?
myapp/urls.py:
from django.conf.urls import url
from . import views
from .models import MyDataModel
urlpatterns = [
url(r'^view_data/$', views.view_data, name='view_data'),
url(r'^modify_data/(?P<sent_data>\d+)/$', views.modify_data, name='modify_data'),
]
myapp/views.py:
from django.forms import modelformset_factory
from django.shortcuts import render
from django.http import HttpResponse
from .models import MyDataModel
def view_data(request):
myData = MyDataModel.objects.all()
return render(request, 'myapp/view_table.html', {'myData': myData})
def modify_data(request, sent_data):
MyDataFormSet = modelformset_factory(MyDataModel, fields=('MyRow_ID','MyRow_Text'))
if request.method == 'GET':
selected_rows = sent_data['modify_rows']
## selected_rows = request.GET['modify_rows']
formset = MyDataFormSet(queryset=MyDataModel.objects.filter(MyRow_ID__in=selected_rows))
selected_data = MyDataModel.objects.filter(MyRow_ID__in=selected_rows)
return render(request, 'myapp/modify_data.html', {'formset': formset, 'selected_data': selected_data})
else:
return HttpResponse('A GET request was not received.')
Finally, modify_data.html:
<!DOCTYPE html>
<html>
<head>
## Bunch of code… ##
</head>
<body>
<div class="col col-xs-12 text-right">
<form method="post" action="">
{% csrf_token %}
{{ formset }}
<button id="submit_changes" type="button" class="btn btn-primary btn-create">Submit Changes</button>
</form>
</div>
<br><br><br>
<table id="selected_rows_table">
## Code that displays selected rows passed as selected_data ##
</table>
</body>
</html>
Any help is much appreciated, thank you in advance!

Through much trial and error and good old-fashioned googling I was able to work out the above issues and gain a better understanding of query strings, regex patterns and even how to use an AJAX request to accomplish my original goal.
My original goal had been to allow the user to select multiple rows of data, click a button, and then edit them simultaneously in a form, said form either being rendered on a new page or in a modal. The following posts/blogs were very helpful for each piece of the puzzle:
Django documentation on urls, request/responses and model formsets:
https://docs.djangoproject.com/en/1.10/topics/http/urls/
https://docs.djangoproject.com/en/1.10/ref/request-response/
https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/#model-formsets
Guide to creating Bootstrap modals:
https://coolestguidesontheplanet.com/bootstrap/modal.php
Understanding of how urls and query strings work with multiple values for a single key:
http://meyerweb.com/eric/tools/dencoder/ (for testing)
How to pass multiple values for a single URL parameter?
Capturing url parameters in request.GET
Example of using Django AJAX Form:
http://schinckel.net/2013/06/13/django-ajax-forms/
Code for handling response from server of an AJAX request, and refreshing the page:
Update div with jQuery ajax response html
One important thing to note about using a query string with multiple values for a single key, e.g. say the url of my GET request is something like www.myurl.com/?page=1&page=2&page=3; when using an AJAX GET request, it will create a query string for this url with www.myurl.com/?page[]=1&page[]=2&page[]=3, i.e. it adds the "[]" brackets for any key with multiple values. The usual answers (as documented by Django and others) to retrieve all values of the "page" key in views.py when processing the request is to use request.GET.getlist('page'). THIS WILL NOT WORK. You need to use request.GET.getlist('page[]'). Add the brackets in request.method.getlist() or remove them from the original query string in the url requested.
Finally, here are some snippets of modified code that addressed my original questions:
In view_data.html, updated form:
<form id="modify_form" method="post" action="{% url 'modify_data' %}">
{% csrf_token %}
{{ formset }}
</form>
In myapp/urls.py, fixed url finder to handle any query string passed:
url(r'^modify_data/$', views.modify_data, name='modify_data'),
In myapp/views.py, change modify_data code:
def modify_data(request):
MyDataFormSet = modelformset_factory(MyDataModel, fields=('MyRow_ID','MyRow_Text'))
if request.is_ajax():
template = 'myapp/view_data.html'
else:
template = 'myapp/modify_data.html'
if request.method == 'GET':
selected_rows = request.GET.getlist['modify_rows[]']
formset = MyDataFormSet(queryset=MyDataModel.objects.filter(MyRow_ID__in=selected_rows))
selected_data = MyDataModel.objects.filter(MyRow_ID__in=selected_rows)
return render(request, template, {'formset': formset, 'selected_data': selected_data})
else:
return HttpResponse('A GET request was not received.')
In MyCode.js, code has been updated to reflect using modal form, AJAX GET request and refreshing the DOM with Django view.py's response:
$("#modify_button").click(function(){
selected_data = $.map(oTable.rows('.active').data(), function (item) {
return item[1]
});
$.ajax({
// The URL for the request
url: URL,
// The data to send (will be converted to a query string)
data: {
modify_rows: selected_data,
},
// Whether this is a POST or GET request
type: "GET",
})
// Code to run if the request succeeds (is done);
// The response is passed to the function
.done(function( json ) {
var forms_result = $('<div />').append(json).find('#modify_form').html();
$('#modify_form').html(forms_result);
var table_result = $('<div />').append(json).find('#my_table').html();
$('#my_table').html(table_result);
})
// Code to run if the request fails; the raw request
// and status codes are passed to the function
.fail(function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
})
});
Hope all of this is somewhat helpful to someone else, if not, this whole process has been a great learning experience for me!

Django , want to load a website and then update it

I'm new to Django and Python so bear with me.
I'm trying to submit a form (in test.html page) And once the form is submitted I want to load a new page(test.html/web1.html) and then the page will display continuous updates on tasks running.
This currently works on a single page, where I submit the form I get the updates on the same page using AJAX. I want to implement this on a new page. Below is my code.
test.js
$('#Submit_button').on('submit',function(event){
event.preventDefault();
console.log("form submitted!")
call_func();
});
function call_func() {
$.ajax({
url : "start_task/", // the endpoint
data:{...,'init':call_func.i}, // call_func.i to iterate 2 times
headers: {Accept: "application/json"},
success : function(json) {
if(call_func.i==0){
call_func.i=1;
call_func();
}
else ...
views.py
def start_task(request):
if request.method == 'POST':
init = request.POST.get('init')
print('init =',init)
if init==0:
return render(request, 'my_app/web1.html')
elif init==1:
# work on updates
return HttpResponse(
json.dumps(response_data),
content_type="application/json"
)
html
<form action="/test.html/start_task/" method="POST" id="Submit_button">
How do I use AJAX only for the latter part (to update the new page) and just load the page first after submit?

I think you need something like HttpResponseRedirect instead of HttpResponse:
if form.is_valid(): # validation
# Process your data
# ...
return HttpResponseRedirect('/new_page_url/')