I have a small Django project consisting of one app. I am very very new to Django and have run into a problem. I have an app that is a webpage with a question posed and a form that must have input. Once the button is pressed to submit the form, I would like to update the page without refreshing. I have heard AJAX is a good way to handle this but I have not been able to find any examples working with just forms.
UPDATE
after researching another users suggestions I have made some progress implementing ajax to display my form submission text. The problem is now that when navigating to the app page it displays just raw html. I am not sure why.
My Forms
from django import forms
from . import models
class AnswerForm(forms.Form):
answer = forms.CharField(label='Answer', required=True, max_length=500)
def save(self):
answer_instance = models.Answer()
answer_instance.answer_txt = self.cleaned_data["answer"]
answer_instance.save()
return answer_instance
My Models
from django.db import models
from django.forms import ModelForm
class Riddle(models.Model):
riddle_txt = models.CharField(max_length=900)
def __str__(self):
return self.riddle_txt
class Answer(models.Model):
answer_txt = models.CharField(max_length=900)
def __str__(self):
return self.answer_txt
My Views
from django.http import JsonResponse
from django.shortcuts import get_object_or_404, render
from django.template import loader
from .models import Riddle, Answer
from . import forms
# Create your views here.
def index(request):
form = forms.AnswerForm()
response_data = {} #new line
if request.method == "POST":
form = forms.AnswerForm(request.POST)
if form.is_valid():
form.save()
form = forms.AnswerForm()
response_data['text'] = form.answer_txt #new line
else:
form = forms.AnswerForm()
riddle_list = Riddle.objects.all()
answer_list = Answer.objects.all()
form = forms.AnswerForm()
template = loader.get_template('CricksRiddles/index.html')
context = {
'riddle_list': riddle_list,
'form': form,
'answer_list': answer_list,
}
#form_answer = request.POST['_form']
return render(request, 'CricksRiddles/index.html', context, {'json_data': json.dumps(response_data)}) #new line
My JS
$('#answer_form').on('submit', function(e){
e.preventDefault();
console.log("form submitted");
post_answer();
});
function post_answer() {
console.log("answer is posted without refresh");
console.log($('#answer_text').val());
}
and finally here is
MY Templates
{% extends 'base.html' %}
{% load static %}
{% block content%}
<body>
{% if riddle_list %}
<div class="riddle_box">
{% for riddle in riddle_list %}
<!-- -->
<p>{{ riddle.riddle_txt }}</p>
{% endfor %}
<!--
<!--{% for ans in answer_list %}-->
<li>{{ ans.answer_txt }}</li>
<!--{% endfor %}-->
</div>
<form id="answer_form" action="/" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" class="button" name="_form" value="Submit Answer">
</form>
{% else %}
<p>Out foraging for sticks and dogs.</p>
{% endif %}
</body>
{% endblock %}
{% block js_block %}
{% endblock %}
It's my understanding that the AJAX code would go in the block js_block, but again I can not find any information on using AJAX with a django form. Everything I have found has been model forms, but I do not want to use those. Thank you for any help.
Related
I can't post in Django, because when I import an image it doesn't work for me. it tells me that there's no file selected but I selected one.
This is the post model that I created, models.py file:
class Post(models.Model):
publisher = models.ForeignKey(User,on_delete=models.CASCADE)
caption = models.CharField(max_length=100)
date_created = models.DateTimeField(default=timezone.now())
image = models.ImageField(upload_to="post_images")
def __str__(self):
return self.caption
here's the forms.py file for the Post model:
from django import forms
from .models import Post
class CreatePostForm(forms.ModelForm):
class Meta:
model = Post
fields = ['caption','image']
here's the Publish function in views.py file which implements the logic for my publish feature:
#login_required
def Publish(request):
if request.method == "POST":
form = CreatePostForm(request.POST,request.FILES)
if form.is_valid():
form.publisher = request.user
form.save()
return redirect("home")
else:
form = CreatePostForm()
return render(request,"posts/publish.html",{
"form":form,
})
int the urls.py file:
from django.urls import path
from . import views
urlpatterns = [
path('publish/',views.Publish,name="publish"),
path('',views.home,name="home"),
]
and here's in html template:
{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% block title %}create{% endblock title%}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-5 authentification">
<div class="form-header">
<h1>
publish
</h1>
</div>
<div class="form-body">
<form method="POST">
<fieldset class="form-group" enctype="multipart/form-data">
{% csrf_token %}
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button type="submit" class="btn btn-primary form-control">publish</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock content %}
the Django version used is 2.2 and the Python 3.8. and Windows 10 Pro
You should alter the .publisher attribute of the .instance wrapped in the form, not the form itself, so:
#login_required
def Publish(request):
if request.method == 'POST':
form = CreatePostForm(request.POST,request.FILES)
if form.is_valid():
form.instance.publisher = request.user
form.save()
return redirect('home')
else:
form = CreatePostForm()
return render(request,'posts/publish.html',{
'form': form,
})
Since you are submitting both files and data, you should specify the enctype=… attribute [mdn] in the <form>:
<form enctype="multipart/form-data" method="POST">
…
</form>
Note: Django's DateTimeField [Django-doc]
has a auto_now_add=… parameter [Django-doc]
to work with timestamps. This will automatically assign the current datetime
when creating the object, and mark it as non-editable (editable=False), such
that it does not appear in ModelForms by default.
Note: It is normally better to make use of the settings.AUTH_USER_MODEL [Django-doc] to refer to the user model, than to use the User model [Django-doc] directly. For more information you can see the referencing the User model section of the documentation.
#MODS- Although it has been asked on here before I can not find a suitable answer in Django 3, please read through all I have tried before deleting
Preamble:
I am working through This Tutorial that is taught in Django 1, I am following it but making necessary changes for Django 3.
QUESTION:
I receive an error when loading my page with a form on it.
HTML for the form page:
{% block title %}Start a New Topic{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item">Boards</li>
<li class="breadcrumb-item">{{ board.name }}</li>
<li class="breadcrumb-item active">New topic</li>
{% endblock %}
{% block content %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-success">Post</button>
</form>
{% endblock %}
Base HTML:
{% block title %}Start a New Topic{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item">Boards</li>
<li class="breadcrumb-item">{{ board.name }}</li>
<li class="breadcrumb-item active">New topic</li>
{% endblock %}
{% block content %}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-success">Post</button>
</form>
{% endblock %}
urls.py
from django.contrib import admin
from django.urls import path , re_path
#uses path and re_path for regex when needed.
from boards import views
urlpatterns = [
path('admin/', admin.site.urls),
re_path('boards/(?P<pk>\d+)/$', views.board_topics, name='board_topics'),
re_path('boards/(?P<pk>\d+)/new/$', views.new_topic, name='new_topic'),
path('', views.home,name='home'),
]
Forms.py
from .models import Topic
class NewTopicForm(forms.ModelForm):
message = forms.CharField(
widget=forms.Textarea(
attrs={'rows': 5, 'placeholder': 'What is on your mind?'}
),
max_length=4000,
help_text='The max length of the text is 4000.'
)
class Meta:
model = Topic
fields = ['subject', 'message']
views.py
from .models import Board, Topic, Post
from django.contrib.auth.models import User
from .forms import NewTopicForm
from django.http import HttpResponseRedirect
# Create your views here.
def home(request):
boards = Board.objects.all()
return render(request, 'home.html', {'boards': boards})
def board_topics(request, pk):
try:
board = Board.objects.get(pk=pk)
except Board.DoesNotExist:
raise Http404
return render(request, 'topics.html', {'board': board})
def new_topic(request, pk):
board = Board.objects.get(pk=pk)
user = User.objects.first() # TODO: get the currently logged in user
if request.method == 'POST':
form = NewTopicForm(request.POST)
if form.is_valid():
topic = form.save()
return HttpResponseRedirect('/')
else:
form = NewTopicForm()
return render(request, 'new_topic.html', {'form': form})
I believe my issue is coming from return HttpResponseRedirect('/').
in the tutorial they use a redirect
return redirect('board_topics', pk=board.pk)
However to my knowledge this is not possible in django 3. Also when I looked on the official django 3.1 documentation in forms they use a HttpResponseRedirect aswell.
I have tried using a render but was not able to make it work either.
Any suggestions? I have been stuck on this for a few hours and want to get past it.
Try using reverse:
from django.shortcuts import reverse
... your form ...
return redirect(reverse('board_topics', kwargs={'pk': board.pk}))
btw the regular redirect should also work, try it.
edit
you actually need to pass board as a parameter in your context in your form view:
return render(request, 'new_topic.html', {'form': form, 'board': board})
I have these two functions, one of them (first one) adds a new entry and the second one edits the entry:
def add_entry(request):
if request.method == 'POST':
form = AddForm(request.POST)
if form.is_valid():
title = form.cleaned_data["title"]
content = form.cleaned_data["content"]
if util.get_entry(title) is None:
util.save_entry(title, content)
return redirect('entry', title)
else:
return render(request, "encyclopedia/add_entry.html", {
"form": AddForm(),
"title": title
})
return render(request, "encyclopedia/add_entry.html", {
"form": AddForm()
})
def edit_entry(request, title):
content = util.get_entry(title)
if request.method == 'POST':
form = AddForm(request.POST)
if form.is_valid():
title = form.cleaned_data["title"]
content = form.cleaned_data["content"]
util.save_entry(title, content)
return redirect('entry', title)
return render(request, "encyclopedia/edit_entry.html", {
"title": title,
"content": content
Here is my edit_entry.html page:
{% extends "encyclopedia/layout.html" %}
{% block title %}
Edit page
{% endblock %}
{% block body %}
<form action="{% url 'edit_entry' title %}" method="POST">
{% csrf_token %}
<h5>Title</h5>
<input type="text" value="{{ title }}">
<h5>Content</h5>
<textarea cols="30" rows="10">{{ content }}</textarea>
<input type="submit" value="Save Editing">
</form>
{% endblock %}
This is add_entry.html template
{% extends "encyclopedia/layout.html" %}
{% block title %}
Add new entry
{% endblock %}
{% block body %}
<h1>Create a new page</h1>
{% if title %}
<h6 style="color: red;">"{{title}}" page is already exists. Please, enter a different title</h6>
{% endif %}
<form action="{% url 'add_entry' %}" method="POST">
{% csrf_token %}
{{ form }}
<input type="submit" value="Create">
</form>
{% endblock %}
And here is my urls.py:
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("wiki/<str:title>", views.entry, name="entry"),
path("search", views.search, name="search"),
path("add_entry", views.add_entry, name="add_entry"),
path("wiki/<str:title>/edit_entry", views.edit_entry, name="edit_entry")
]
My entry view:
def entry(request, title):
if title not in util.list_entries():
return render(request, "encyclopedia/error.html", {
"error": "Page Not Found",
"query": title
})
else:
return render(request, "encyclopedia/entry.html", {
"entry": markdown2.markdown(util.get_entry(title)),
"title": title
})
The issue here when I click to save the content of the page doesn't change, I want to save the edits and display it with new content. Instead, it returns an old form with the old content (like doesn't change).
EDIT: based on your comments, I think it is better to start over.
Since you are doing some simple create and update, it maybe better to use generic views. Here is an example.
1.First and formost, you need a model.
in models.py,
from django.db import models
class Entry(models.Model):
title = models.CharField(max_length=200)
content = models.TextField(max_length=2000)
2. in your forms.py
Note: this is not necessary if you want to just use django default form. Because class-based generic views will automatically generate forms for you. However, if you need to add widget, or to add attributes (for example, add css class or id), you need to generate a customform.
from django import forms
from .models import Entry
class EntryForm(forms.ModelForm):
class Meta:
model = Entry
fields = ('title', 'content')
widgets = {
'title': forms.TextInput(attrs={'placeholder': 'Title'}),
'content': forms.TextInput(attrs={'class': 'content'}),
}
3. views.py
from .models import Entry
from django.views.generic.edit import CreateView, UpdateView
class CreateEntry(CreateView):
model=Entry
template_name = 'create_edit_entry.html' # this is the template, you might need to change its path.
form_class= EntryForm # this is added because we are using customform
success_url = '/' #this can be changed
class UpdateEntry(UpdateView):
model=Entry
template_name = 'create_edit_entry.html'
form_class= EntryForm
4. urls.py
from django.urls import path
from .views import CreateEntry, UpdateEntry
urlpatterns = [
path('entry/', CreateEntry.as_view(), name='create_entry'),
path('entry/<int:pk>', UpdateEntry.as_view(), name='update_entry'),
]
5. admins.py
from django.contrib import admin
from .models import Entry
class EntryAdmin(admin.ModelAdmin):
list_display = (('id', 'title', 'content'))
admin.site.register(Entry, EntryAdmin)
6. templates (create_edit_entry.html)
{% extends 'base.html' %}
{% block extrahead %}
{% load static %}
{% endblock %}
{% block content %}
<form action="." method="POST">
{% csrf_token %}
{{ form }}
<button type="submit">SUBMIT</button>
</form>
{% endblock %}
After you update all these files and update mysite/urls.py, you will 1) open http://127.0.0.1:8000/entry to add an entry. Check if the entry is created in your admin page. 2) then you will open http://127.0.0.1:8000/entry/1 (if the id=1) to see if your original entry is shown. 3) then you will update the form, and check if the update is successful or not in your admin.
This backbone should be able to get you started. Note that I did not put DetailView, ListView, so you need to check if the object is created and updated in your admin page. Of cause, you can add DetailView and ListView by yourself (check out django document here to learn more about generic views).
**************************************earlier answer **************
1. First thing first, it is always helpful to access form.errors when you are having trouble with forms. What you do is to add else: print(form.errors) like the following:
if form.is_valid():
# other code
else:
print(form.errors)
2.
Your edit_entry.html change to something like below: I guess you wanted use your own styling (add Title, Content etc) to the form, so you did not use {{form}}. If what I suggest worked, you can add form styling later.
{% extends "encyclopedia/layout.html" %}
{% block title %}
Edit page
{% endblock %}
{% block body %}
<form action="{% url 'edit_entry' title %}" method="POST">
{% csrf_token %}
{{form}}
</form>
{% endblock %}
3. your edit_entry view:
def edit_entry(request, title):
entry = get_object_or_404(Entry, title=title) # i assume your Model name is "Entry"
if request.method == 'POST':
form = AddForm(request.POST, instance = entry)
if form.is_valid():
print('under form.is_valid) # add this line to keep track
title = form.cleaned_data["title"]
content = form.cleaned_data["content"]
form.save()
return redirect('entry', title=entry.title)
else:
print(form.errors)
else:
form = AddForm(instance = entry)
return render(request, "encyclopedia/edit_entry.html", {
'form': form})
I cannot save the data taken from the form to database. The form is displayed properly and it seems that I can submit. Whenever I was redirected to "project_list.html", I cannot see the new project.
I also checked the admin site to whether new instance is saved to model but it seems that something is wrong with my code.
Here is my files:
model.py
class Project(models.Model):
project_id = models.CharField(max_length=30)
project_name = models.CharField(max_length=100)
view.py
def projects_list(request):
projects = Project.objects.all()
table = ProjectTable(Project.objects.all())
RequestConfig(request, paginate={'per_page':25}).configure(table)
return render(request, 'portal/project/list.html', {'projects':
projects, 'table': table})
def project_add(request):
if request.method == 'POST':
form = ProjectAddForm(request.POST)
if form.is_valid():
form.save()
return redirect('project_list',)
else:
form = ProjectAddForm()
return render(request, 'portal/project/add.html', {'form': form})
forms.py
from django import forms
from .models import Project
class ProjectAddForm(forms.ModelForm):
class Meta:
model = Project
fields = ['project_id', 'project_name',]
add.html
{% extends 'portal/base.html' %}
{% block title %}Add Project{% endblock title %}
{% block content %}
<div class="col-sm-10 offset-sm-1 text-center">
<form action="{% url 'portal:projects_list' %}" method="POST">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit">
</form>
</div>
{% endblock content %}
projects_list.html
{% extends 'portal/base.html' %}
{% load render_table from django_tables2 %}
{% block content %}
<h1>Projects List</h1>
{% render_table table %}
{% endblock content %}
urls.py
from django.urls import path
from . import views
app_name = 'portal'
urlpatterns = [
path('', views.homepage, name='homepage'),
path('password_generator/', views.password_generator,
name='password_generator'),
path('projects_list/', views.projects_list, name='projects_list'),
path('project/<str:project_id>/', views.project_detail,
name='project_detail'),
path('add/', views.project_add, name='project_add'),
]
I found the issue in my code. In my project_add view, I was trying to redirect to "project_list" url but it didnt exists. That was the mistake....
I'm just doing a quick test of a CBV Formview. However for some reason the form won't submit and I've gone blind from looking at it to find out why. There is no error shown, when I click on submit nothing happens and it doesn't redirect to the success url or print out the test message.
Form:
class EmailTestForm(forms.Form):
email = forms.EmailField()
View:
class EmailTestFormView(FormView):
form_class = EmailTestForm
template_name = "site/test_email.html"
success_url = "/signup"
def form_valid(self, form):
print('form is good')
Template:
{% extends "site/signup.html" %}
{% load crispy_forms_tags %}
{% block inner %}
<form action="" method="post" >{% csrf_token %}
{% crispy form %}
<input id="submit" class="btn btn-block btn-cta-primary" type="submit"/>
</form>
{% endblock inner %}
urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^signup/$', views.signup_view, name="signup"),
url(r'^emailtest/$', views.EmailTestFormView.as_view(), name="email_test"),
]
this is caused by using cripsy forms to render the form, which automatically inserts a <form> tag when rendering the form.
From cripsy form docs:
form_tag = True
It specifies if <form></form> tags should be rendered when using a Layout. If set to False it renders the form without the <form></form> tags. Defaults to True.