Ajax Repeating form several time - javascript

I am trying to add Ajax to my like button, and it is working except that when I press for the first time i is added. When I press to unlike on more time it starts to automatically repeat itself several
times and the more I press the more repeated like and unlike.
This is the first time I have seen this error before
Here is the models.py
class Post(models.Model):
likes = models.ManyToManyField(
User, related_name='liked', blank=True)
class Like(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
post = models.ForeignKey(Post, on_delete=models.CASCADE)
Here is the views.py
class PostDetailView(DetailView):
model = Post
template_name = "blog/post_detail.html" # <app>/<model>_<viewtype>.html
def get_context_data(self, *args, **kwargs):
context = super(PostDetailView, self).get_context_data()
post = get_object_or_404(Post, slug=self.kwargs['slug'])
comments = Comment.objects.filter(
post=post).order_by('-id')
total_likes = post.total_likes()
liked = False
if post.likes.filter(id=self.request.user.id).exists():
liked = True
if self.request.method == 'POST':
comment_form = CommentForm(self.request.POST or None)
if comment_form.is_valid():
content = self.request.POST.get('content')
comment_qs = None
comment = Comment.objects.create(
post=post, user=self.request.user, content=content)
comment.save()
return HttpResponseRedirect("blog/post_detail.html")
else:
comment_form = CommentForm()
context["comments"] = comments
context["comment_form"] = comment_form
context["total_likes"] = total_likes
context["liked"] = liked
return context
def LikeView(request):
# post = get_object_or_404(Post, id=request.POST.get('post_id'))
post = get_object_or_404(Post, id=request.POST.get('id'))
liked = False
if post.likes.filter(id=request.user.id).exists():
post.likes.remove(request.user)
liked = False
else:
post.likes.add(request.user)
liked = True
context = {
'total_likes': post.total_likes,
'liked': liked,
'post': post
}
if request.is_ajax:
html = render_to_string('blog/like_section.html', context, request=request)
return JsonResponse({'form': html})
Here is the main project url.py
path('like/', views.LikeView, name='like_post'),
Here is the post-details.html
<div id="like-section">
{% include 'blog/like_section.html' %}
</div>
here is the like_sections.html
<form class="mt-0" action="{% url 'like_post' %}" method='post'>
{% csrf_token %}
<i class="fas fa-heart"></i>
: {{total_likes}} </strong>
{% if user.is_authenticated %}
{% if liked %}
<br>
<button type='submit' id='like' name='post_id' value="{{post.id}}" class= "btn btn-danger btn-sm" > No ! Don't Like it </button>
{% else %}
<br>
<button type='submit' id='like' name='post_id' value="{{post.id}}" class= "btn btn-primary btn-sm"> Yes ! Like it </button>
{% endif %}
{% else %}
<p><small> Login to Like </small></p>
{% endif %}
</form>
Here is the scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
$( document ).ready(function() {
let display = false
$(".cmt_btn").click(function () {
if (display===false) {
$(this).next(".comment-box").show("fast");
display=true
} else {
$(this).next(".comment-box").hide("fast");
display=false
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).on('click','#like', function(event){
event.preventDefault();
var pk= $(this).attr('value');
$.ajax({
type:'POST',
url:'{% url "like_post" %}',
data:{'id': pk, 'csrfmiddlewaretoken':'{{csrf_token}}'},
dataType:'json',
success:function(response){
$('#like-section').html(response['form'])
console.log($('#like-section').html(response['form']));
},
error:function(rs, e){
console.log(rs.responseText);
},
});
});
});
</script>
Here is an image from the console log:

Related

Django - How to make a model that when an instance of this model is created, that data is saved to a page that is unique to a user

I'm making a website where you can post jobs to an 'explore page', and I was then wondering how I would go about making it so that when a job is posted to that 'explore page', that job will also be posted to a page where the person who posted the job can manage all of the jobs they have posted i.e. edit, delete. I can post jobs to the explore page but I need to find a way for the job to save to the 'employers' page
views.py
from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from base.forms import JobForm
#login_required(login_url='login')
def manage_jobs(request):
if request.user.is_employee:
return redirect('home')
else:
form = JobForm(request.POST)
if form.is_valid():
form.save()
context = {"form":form}
return render(request, 'employer/manage-jobs.html', context)
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.manage_jobs, name='manage-jobs'),
]
models.py
class Job(models.Model):
company = models.CharField(max_length=40, null=True, verbose_name="Company/Employer")
description = models.TextField(null=True)
role = models.CharField(max_length=25)
area_of_filming = models.CharField(max_length=50, verbose_name="Area Of Filming", default="")
contact_email = models.EmailField(verbose_name='Contact Email', max_length=60, default='')
created = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.company
class Account(AbstractBaseUser):
email = models.EmailField(verbose_name='email', max_length=60, unique=True)
name = models.CharField(max_length=45, unique=False)
date_joined = models.DateTimeField(verbose_name='date joined', auto_now_add=True)
last_login = models.DateTimeField(verbose_name='last login', auto_now=True)
is_admin = models.BooleanField(default=False)
is_active = models.BooleanField(default=True)
is_staff = models.BooleanField(default=False)
is_superuser = models.BooleanField(default=False)
is_employee = models.BooleanField(default=True, verbose_name='Are you using FilmLink as an employee?')
USERNAME_FIELD = 'email'
REQUIRED_FIELDS = ['name', 'is_employee']
objects = MyAccountManager()
class Meta:
permissions = [
("post_jobs", "Can post jobs"),
]
def __str__(self):
return self.name
def has_perm(self, perm, obj=None):
return True
def has_perms(self, perm):
return True
def has_module_perms(self, app_label):
return True
#property
def is_staff(self):
return self.is_admin
manage-jobs.html
<body>
<button id="myBtn">Post A Job</button>
<div id="main"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times</span>
<form action="" method="POST">
{% csrf_token %}
<div id="company-container">
<p>Employer Name</p>
<p id="employer">{{form.company}}</p>
</div>
<div id="role-container">
<p>Role (e.g. Actor, Director)</p>
<p id="role">{{form.role}}</p>
</div>
<div class="area-of-filming-container">
<p>Area Of Production/Filming</p>
<p id="area-of-filming">{{form.area_of_filming}}</p>
</div>
<div id="contact-email-container">
<p>Contact Email</p>
<p id="contact-email">{{form.contact_email}}</p>
</div>
<div id="description-container">
<p>Description Of Job</p>
<p id="description">{{form.description}}</p>
</div>
<button type="submit" id="post-job">Publish Job</button>
</form>
</div>
</div>
<script
src="{% static 'lng/js/manage-jobs.js' %} "
type="text/javascript"
></script>
</body>
manage-jobs.js
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I hope I've given you enough information + code to answer my question. Sorry about the confusing wording of the title too, I struggled to put that sentence together.
The easiest way is to use ListView from django.views.generic.list.ListView
You may override get_queryset to get desired behaviour:
def get_queryset(self):
qs = super().get_queryset()
qs = qs.filter(user=self.request.user)
return qs

How to change message design in the real time chat

I have real time chat in the project, where i have two types of users: students and teachers. I want to change design of teacher messages. I tried to change consumers.py and tried to work with template but it didn't work. I think that we can do that, if we'll work with consumers.py. Who knows how to implement that?
models.py
class CustomUser(AbstractUser,mixins.GuardianUserMixin):
email = models.EmailField(_('email_address'), unique=True, name='email')
username = models.CharField(_('username'), unique=True, max_length=128)
is_student = models.BooleanField(default=False)
is_teacher = models.BooleanField(default=False)
first_name = models.CharField(max_length=255)
last_name = models.CharField(max_length=255)
USERNAME_FIELD = 'email'
REQUIRED_FIELDS = ['username']
objects = UserManager()
consumers.py
class Consumer(WebsocketConsumer):
def connect(self):
self.room_name=self.scope['url_route']['kwargs']['room_name']
self.room_group_name='chat_%s' % self.room_name
self.name = self.scope['user'].username
if self.scope['user'].is_anonymous:
self.send({'close':True})
else:
async_to_sync(self.channel_layer.group_add)(
self.room_group_name,
self.channel_name
)
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
"type":"chat_message",
"message":self.name+" Joined Chat "
}
)
self.accept()
def disconnect(self, code):
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
"type":"chat_message",
"message":self.name+" Left Chat"
}
)
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name,
self.channel_name
)
def receive(self, text_data=None, bytes_data=None):
text_data_json=json.loads(text_data)
message=text_data_json['message']
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
'type':'chat_message',
'message':self.name+" : "+message
}
)
def chat_message(self,event):
message=event['message']
self.send(text_data=json.dumps({
'message':message
}))
template
<div class="ui form">
<div style="height:400px;width:100%;overflow-y:scroll" id="div_data"></div>
<input type="text" name="message" id="message" placeholder="Message" style="padding:10px;width:100%; border-radius: 0px;">
<script>
var roomName='{{ room_name }}';
var personname='{{ request.user.username }}';
var chatSocket=new WebSocket('ws://'+window.location.host+'/ws/chat/'+roomName+'/');
{% if request.user.is_anonymous %}
window.location.pathname = '{% url 'users:login' %}'
{% endif %}
chatSocket.onmessage=function(e){
var data=JSON.parse(e.data)
var message=data['message']
var div=document.querySelector("#div_data");
div.innerHTML+='<br><img class="ui avatar image" style="margin-left:2px;" src="{{user.profile.get_picture}}"><a style="padding:10px; margin-bottom:8px; " class="ui left pointing grey basic label">'+message+'</a>';
console.log(e)
}
chatSocket.onclose=function(e){
var data=JSON.parse(e.data)
console.log(data)
var message=data['message']
var div=document.querySelector("#div_data");
div.innerHTML+='<br><img class="ui avatar image" src="{% static "img/tom.jpg" %}"><a style="padding:10px; margin-bottom:8px;" class="ui right pointing teal basic label">'+message+'</a>';
}
document.addEventListener("keydown", function(event){
if(event.which == 13){
var message=document.querySelector("#message").value;
if(message.length == 0){
return false
}else{
chatSocket.send(JSON.stringify({'message':message}))
document.querySelector("#message").value=''
}
}
})
</script>
Just add a key "teacher":True or something like that to sent dictionary when a teacher sends.
You have to add some logic somewhere to know if the user is a teacher
def chat_message(self,event):
message=event['message']
dict_to_send = {'message':message}
if self.name in teachers_list:
dict_to_send['teacher'] = True
self.send(text_data=json.dumps(
dict_to_send
))
And then in js:
const data = JSON.parse(e.data);
if(data.teacher){
//this style
{
else{
//that style
}

Django ValidationError after javascript modifies the choice field

I'm working on a job scheduling app for a REST API and I've created a Tasks, Nodes, URL, Adom, BaseOptions, and Jobs tables in Django. The BaseOptions have a foreign key for src_adom and dst_adom and the Jobs have foreign keys for the Task, src_node, dst_node, url and baseOptions. I didn't use a ModelForm but a generic Form instead and just loaded up the initial values and choices for all the fields I need in order to process a job. I did that because I couldn't figure out how to make the form change when the user selects a different node and want to change the select field for the corresponding adoms. I'm using javascript to detect a new node and changing the select field with the appropriate adoms for that node. I get a validation error if I change the initial source and/or destination node and modify the adom selection list. I know it is because my list of choices have changed from what I initially rendered the form with.
Is there a way to change the choices associated with a ChoiceField during the "clean" method? I can't seem to find that in the documents or digging through the Django code on github.
Models:
FMG = 'FMG'
FOS = 'FOS'
NODE_TYPE_CHOICES = (
(FMG, 'FMG'),
(FOS, 'FOS'),
)
# Create the types of tasks to run
class TaskType(models.Model):
name = models.CharField(max_length=200)
command = models.CharField(max_length=200)
node_type = models.CharField(max_length=60, choices=NODE_TYPE_CHOICES, default=FMG)
def __str__(self):
return self.name
# Create the nodes for tasks to be run on
class Node(models.Model):
ip = models.GenericIPAddressField(protocol='IPv4')
name = models.CharField(max_length=200)
apiname = models.CharField(max_length=200)
apikey = EncryptedCharField(max_length=200)
node_type = models.CharField(max_length=60, choices=NODE_TYPE_CHOICES, default=FMG)
def __str__(self):
return "{0} ({1})".format(self.name, self.ip)
class FMG_URLManger(models.Manager):
def get_queryset(self):
return super(FMG_URLManger, self).get_queryset().filter(node_type='FMG')
class FOS_URLManger(models.Manager):
def get_queryset(self):
return super(FOS_URLManger, self).get_queryset().filter(node_type='FOS')
class NodeURL(models.Model):
name = models.CharField(max_length=200)
node_type = models.CharField(max_length=60, choices=NODE_TYPE_CHOICES, default=FMG)
table_id = models.CharField(max_length=100)
table_url = models.CharField(max_length=200)
help_text = models.CharField(max_length=400, null=True)
filename = models.CharField(max_length=200)
objects = models.Manager()
fmg_objects = FMG_URLManger()
fos_objects = FOS_URLManger()
def __str__(self):
return self.name
class Adom(models.Model):
name = models.CharField(max_length=200)
version = models.CharField(max_length=60)
fmg = models.ForeignKey(Node, related_name='fmgs', on_delete=models.CASCADE)
class Meta:
unique_together = (("name", "version", "fmg"),)
def __str__(self):
return self.name
class BaseOption(models.Model):
src_adom = models.ForeignKey(Adom, related_name="src_adom", on_delete=models.CASCADE)
dst_adom = models.ForeignKey(Adom, related_name="dst_adom", on_delete=models.CASCADE, null=True)
name_filter = models.CharField(max_length=100, null=True)
site_name_filter = models.CharField(max_length=100, null=True)
policy_id_list_filter = models.CharField(max_length=60, null=True)
keep_policy_id = models.BooleanField(default=False)
disable_policy = models.BooleanField(default=False)
import_only = models.BooleanField(default=False)
def __str__(self):
return self.src_adom.name
# Create the actual request for jobs
class Job(models.Model):
UNKNOWN = 'Unknown'
PENDING = 'Pending'
SUCCESS = 'Success'
FAILURE = 'Failure'
STATUS_CHOICES = (
(UNKNOWN, 'Unknown'),
(PENDING, 'Pending'),
(SUCCESS, 'Success'),
(FAILURE, 'Failure'),
)
description = models.CharField(max_length=400)
task = models.ForeignKey(TaskType, related_name='job_task', on_delete=models.CASCADE)
src_node = models.ForeignKey(Node, related_name='src_node', on_delete=models.CASCADE)
urls = models.ManyToManyField(NodeURL)
dst_node = models.ForeignKey(Node, related_name='dst_node', on_delete=models.CASCADE)
user = models.ForeignKey(User, related_name='jobs', on_delete=models.CASCADE)
opts = models.OneToOneField(BaseOption, related_name='job', on_delete=models.CASCADE)
created = models.DateTimeField(auto_now_add=True)
run_at = models.DateTimeField(editable=True, default=timezone.now)
start = models.DateTimeField(editable=True, null=True)
finished = models.DateTimeField(editable=True, null=True)
status = models.CharField(max_length=12, choices=STATUS_CHOICES, default=UNKNOWN, editable=True)
status_text = models.TextField(editable=True, null=True)
file_location = models.CharField(max_length=4086, editable=True, null=True)
objects = models.Manager()
def __str__(self):
return self.description
The ScheduleFormView:
class ScheduleView(LoginRequiredMixin, generic.FormView):
login_url = '/login/'
redirect_field_name = 'redirect_to'
template_name = 'tools/schedule.html'
form_class = ScheduleJobForm
def post(self, request, *args, **kwargs):
form = self.form_class(request.POST)
print("Got a POST request, checking for valid...")
if form.is_valid():
# <process form cleaned data>
taskID_nodeType = form.cleaned_data['task']
description = form.cleaned_data['description']
src_nodeID_name = form.cleaned_data['src_node']
dst_nodeID_name = form.cleaned_data['dst_node']
urlsID_tableID = form.cleaned_data['urls']
src_adomID = form.cleaned_data['src_adom']
dst_adomID = form.cleaned_data['dst_adom']
name_filter = form.cleaned_data['name_filter']
site_name_fiter = form.cleaned_data['site_name_fiter']
policy_id_list_filter = form.cleaned_data['policy_id_list_filter']
taskID = taskID_nodeType.split('.')[0]
src_nodeID = src_nodeID_name.split('.')[0]
dst_nodeID = dst_nodeID_name.split('.')[0]
# urlsID_tableID was a list, now it's a single URL
# urlIDs = []
# for urlID_tableID in urlsID_tableID:
# urlID = urlID_tableID.split('.')[0]
# print("Got back id {}".format(urlID))
# urlIDs.append(urlID)
urlID = urlsID_tableID.split('.')[0]
urls = NodeURL.objects.filter(id=urlID)
# print("List of URLS = {}".format(urls))
src_node = Node.objects.get(id=src_nodeID)
dst_node = Node.objects.get(id=dst_nodeID)
task = TaskType.objects.get(id=taskID)
src_adom = Adom.objects.get(id=src_adomID)
dst_adom = Adom.objects.get(id=dst_adomID)
job = Job(description=description,
task=task,
src_node=src_node,
dst_node=dst_node,
user=request.user)
opts = BaseOption(src_adom=src_adom,
dst_adom=dst_adom,
name_filter=name_filter,
site_name_filter=site_name_fiter,
policy_id_list_filter=policy_id_list_filter)
opts.save()
job.opts = opts
job.save()
for url in urls:
url.job_set.add(job)
return HttpResponseRedirect('job-list.html')
else:
print("The form was not valid. Return for more processing.")
return render(request, self.template_name, {'form': form})
The ScheduleJobForm (with my unfinished code for 'clean'):
class ScheduleJobForm(forms.Form):
def clean(self):
print("Don't actually check for on src_adom.")
cleaned_data = super(ScheduleJobForm, self).clean()
print(cleaned_data)
adom = self.cleaned_data.get("src_adom")
print(adom)
# if adom < 1:
# raise forms.ValidationError("You didn't choose a valid ADOM.")
print("Don't actually check for on dst_adom.")
cleaned_data = super(ScheduleJobForm, self).clean()
adom = self.cleaned_data.get("dst_adom")
print(adom)
# if adom < 1:
# raise forms.ValidationError("You didn't choose a valid ADOM.")
initTasks = []
selectedNodeType = ''
# Get the first node_type because it will be the default selection of tasks.
for task in TaskType.objects.all().filter(node_type='FMG').order_by('id'):
if selectedNodeType == '':
selectedNodeType = task.node_type
taskChoice = str(task.id) + '.' + task.node_type, task.name
initTasks.append(taskChoice)
# Fill in the initial Nodes for the selected task above.
initNodes = []
selectedNodeID = 0
for node in Node.objects.all().filter(node_type=selectedNodeType).order_by('id'):
nodeChoice = str(node.id) + '.' + node.name, node.name + ' (' + node.ip + ')'
if selectedNodeID == 0:
selectedNodeID = node.id
initNodes.append(nodeChoice)
# Also grab the URL's for those node types and fill them in.
initURLs = []
for url in NodeURL.objects.all().filter(node_type=selectedNodeType).order_by('table_id'):
urlChoice = str(url.id) + '.' + url.table_id, url.name
initURLs.append(urlChoice)
# Since we've got the first node selected, then all the ADOMs are the same. Get them.
initAdoms = []
for adom in Adom.objects.all().filter(fmg_id=selectedNodeID).order_by('id'):
adomChoice = adom.id, adom.name
initAdoms.append(adomChoice)
# Add some hidden fields for the jQuery script to examine.
selected_node_type = forms.CharField(initial=selectedNodeType, widget=forms.HiddenInput)
# After this, a jQuery will have to keep the select fields updated if they are changed.
task = forms.ChoiceField(choices=initTasks)
description = forms.CharField()
src_node = forms.ChoiceField(choices=initNodes)
dst_node = forms.ChoiceField(choices=initNodes)
urls = forms.ChoiceField(choices=initURLs)
# These fields will have to be updated by the jQuery to get the available ADOMS for the selected
# Nodes. We also have to create a custom validator since the choices will change via the JS.
src_adom = forms.ChoiceField(choices=initAdoms)
dst_adom = forms.ChoiceField(choices=initAdoms)
name_filter = forms.CharField()
site_name_fiter = forms.CharField()
policy_id_list_filter = forms.CharField()
The schedule.js script that modifies the adoms:
/*
Of cource, I could use the following but I think the code below is
a bit more readable.
$(function(){
initPage();
}
); */
const coreapi = window.coreapi
const schema = window.schema
$(document).ready(function(){
initPage();
}
);
function initPage() {
console.log("Adding the change code.")
// Fill in the initial srcAdom
getSrcAdom()
// and the initial dstAdom
getDstAdom()
// Hide the wait icon
$('.loading').hide();
$('#id_task').change(
function() {
var currentNodeType = $('#id_selected_node_type').val();
var selectedOption = $('#id_task option:selected').val();
var selectedNodeType = selectedOption.split(".").pop();
if (currentNodeType != selectedNodeType) {
// The more I look at the options, I think this will have to be locked
// into FMG only nodes and create another form for just FOS nodes.
}
}
);
$('#id_src_node').change(
function() {
// Need to change the src adoms
$('.loading').show();
getSrcAdom()
$('.loading').hide();
}
);
$('#id_dst_node').change(
function() {
// Need to change the src adoms
$('.loading').show();
getDstAdom()
$('.loading').hide();
}
);
}
function getSrcAdom() {
var selectedOption = $('#id_src_node option:selected').val();
var selectedNodeName = selectedOption.split(".").pop();
// Clear the src adom options.
$('#id_src_adom')
.find('option')
.remove();
// Initialize a client
var client = new coreapi.Client()
// Interact with the API endpoint
var action = ["adom", "list"]
var params = {
search: selectedNodeName,
}
client.action(schema, action, params).then(function(result) {
// Return value is in 'result'
$.each(result, function(index, obj) {
$('#id_src_adom')
.append('<option value="' + obj["id"] + '">' + obj["name"] + '</option>');
console.log(index + " got '" + obj["name"] + "' (id: " + obj["id"] + ")");
})
})
}
function getDstAdom() {
var selectedOption = $('#id_dst_node option:selected').val();
var selectedNodeName = selectedOption.split(".").pop();
// Clear the src adom options.
$('#id_dst_adom')
.find('option')
.remove();
// Initialize a client
var client = new coreapi.Client()
// Interact with the API endpoint
var action = ["adom", "list"]
var params = {
search: selectedNodeName,
}
client.action(schema, action, params).then(function(result) {
// Return value is in 'result'
$.each(result, function(index, obj) {
$('#id_dst_adom')
.append('<option value="' + obj["id"] + '">' + obj["name"] + '</option>');
console.log(index + " got '" + obj["name"] + "' (id: " + obj["id"] + ")");
})
})
}
function createNodeSelect(data) {
// This was to clear all selected nodes and list new node types.
// It's not going to be used in this form at this time.
// Need to determine data format from JSON return.
// Leaving for future code example of how to clear options
// and replace it with a single option.
$('#id_src_node')
.find('option')
.remove()
.end()
.append('<option value="whatever">text</option>')
.val('whatever');
}
The schedule.html template (with Bootstrap 4 tags):
{% extends "tools/base_site.html" %}
{% block extra_js %}
{% load static %}
<script src="{% static 'rest_framework/js/coreapi-0.1.1.js' %}"></script>
<script src="{% url 'api-docs:schema-js' %}"></script>
<script src="{% static 'js/schedule.js' %}"></script>
{% endblock %}
{% block content %}
<div id="content-main">
<br>
{% block loading %}
{% load static %}
<div id="loading" class="loading">
<img src="{% static 'images/spinning-wait-icons/wait30.gif' %}" alt="Wait" />
<!-- <h3>Loading Data from Server</h3> -->
</div>
{% endblock %}
{% load widget_tweaks %}
{% if form.errors %}
<div class="alert alert-primary">
<button type="button" class="close" data-dismiss="alert">×</button>
{% for field in form %}
{% if field.errors %}
<li>{{ field.label }}: {{ field.errors|striptags }}</li>
{% endif %}
{% endfor %}
</div>
{% endif %}
<form method="post">
{% csrf_token %}
{% for hidden_field in form.hidden_fields %}
{{ hidden_field }}
{% endfor %}
{% for field in form.visible_fields %}
<div class="form-group">
{{ field.label_tag }}
{% render_field field class="form-control" %}
{% if field.help_text %}
<small class="form-text text-muted">{{ field.help_text }}</small>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Schedule</button>
</form>
</div>
{% endblock %}
I must confess I didn't go through all the code (it's quite a lot), but at a first glance it looks to me as you should move the initialization of your choices (intTasks, initNodes...) into the __init__ method of your FormClass (ScheduleJobForm).
Because you want the code to be run when you instantiate the class, not when you load the module, right?
So:
class ScheduleJobForm(forms.Form):
selected_node_type = forms.CharField(initial=selectedNodeType, widget=forms.HiddenInput)
task = forms.ChoiceField(choices=initTasks)
# further fields
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# initialize initNodes and the rest
self.fields["src_node"]=initNodes
# and resp.
The form does not care about Javascript, as it is instantiated in the post request after all the Javascript magic on the frontend.
So there doesn't have to (and cannot) be any interaction between Javascript and your form.
I was able to figure out how to dynamically change the choices by using the getter and setter property of ChoiceField (see github repo).
The change I made was in the ScheduleJobForm view. I added these additional lines before calling 'is_valid':
print("Got a POST request, checking for valid...")
print("Fix the choices in the ADOMs first.")
src_nodeID_name = form['src_node'].value()
dst_nodeID_name = form['dst_node'].value()
src_nodeID = src_nodeID_name.split('.')[0]
dst_nodeID = dst_nodeID_name.split('.')[0]
srcAdoms = []
for adom in Adom.objects.all().filter(fmg_id=src_nodeID).order_by('id'):
adomChoice = adom.id, adom.name
srcAdoms.append(adomChoice)
dstAdoms = []
for adom in Adom.objects.all().filter(fmg_id=dst_nodeID).order_by('id'):
adomChoice = adom.id, adom.name
dstAdoms.append(adomChoice)
form.fields['src_adom'].choices = srcAdoms
form.fields['dst_adom'].choices = dstAdoms
For efficiency, I should probably check changed_data and see if the ADOM's have actually changed or not.

Page not found (404) error happens I did not write the url

I got an error,Page not found (404)
Request Method: GET
Request URL: http://localhost:8000/app/test.html?prop=value .
I wrote index.html like
<body>
  <form method="post" action="">
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;">
{% for i in json_data.items.values %}
<option value="{{forloop.counter}}">{{ i }}</option>
{% endfor %}
</select>
{% for key, values in preprocessed %}
<select name="type" id=type{{forloop.counter}}>
{% for counter, value in values %}
<option value="{{forloop.counter}}">{{ value }}</option>
{% endfor %}
</select>
{% endfor %}
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#mainDD').on('change', function() {
var thisType = "type" + $(this).val();
for(i=1; i<6; i++) {
var thisId = "type" + i;
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
}).trigger('change');
});
</script>
<form id="postform" action="http://localhost:8000/app/test_view" method="POST">
{% csrf_token %}
<input type="submit" value="SEND">
</form>
<script type="text/javascript">
let key = "prop";
let value = "value";
var array1 = [];
var array2 =[];
document.querySelector("input[type=submit]").onclick = e => {
const test = window.open(`test.html?${key}=${value}`, "_blank");
}
</script>
</body>
This part const test = window.open('test.html?${key}=${value}', "_blank"); causes error because I did not regist url http://localhost:8000/app/test.html?prop=value. I only register http://localhost:8000/app/test_view. But I wanna send selected i & value's values to test.html,so I wrote this like.
I wrote in test.html like
<body>
<h2>RESULT</h2>
<script type="text/javascript">
onload = () => {
document.body.appendChild(
document.createTextNode([...new URLSearchParams(location.search).entries()])
);
}
</script>
</body>
How should I fix this?What should I write this?
urls.py is
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^test_view$', views.test_view, name='test_view'),
]
views.py is
def test_view(request):
return render(request, 'test.html')
My app structure is
testapp(parent app)
-app(child app)
-inde.html&test.html&views.py
testapp's urls.py is
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^app/', include('app.urls')),
]
Now my code is
<form id="postform" action="http://localhost:8000/app/test_view" method="GET">
{% csrf_token %}
<a href={% url 'test_view' %}>Your link to test view</a>
</form>
<script type="text/javascript">
let key = "prop";
let value = "value";
var array1 = [];
var array2 =[];
document.querySelector("input[type=submit]").onclick = e => {
const test = window.open(`test.html?${key}=${value}`, "_blank");
}
</script>
You registred http://localhost:8000/app/test_html but try to go by http://localhost:8000/app/test.html link. Your GET parameters don't make a sense.
You should use url, that you registred in urls.py.
Read this tutorial about views and urls.
Change action attribute in your form. It might looks like that:
In your template your link may looks like this:
<form id="postform" action="{% url 'test_view' %}" method="GET">
or:
<form id="postform" action="app/test_view" method="GET">
Instead of:
<form id="postform" action="http://localhost:8000/app/test_view" method="POST">
This is because in action or another place where you add your url, when you develop in local machine you should write url path without domain:
app/test_view instead of http://localhost:8000/app/test_view

How to submit a Django form using JavaScript (jQuery)

I'm working on a web app project. I had a problem with file upload. Then I realized that my team mate changed the default submit button in create_form.html. It works like in 5. and 6. and i need to collect file data as well.
What should I add to .js files to submit and save file?
forms.py
class DocumentUpload(forms.ModelForm):
class Meta:
model = Form
fields = ('file',)
models.py
class Form(TimeStampedModel, TitleSlugDescriptionModel):
author = models.ForeignKey(User, on_delete=models.CASCADE)
title = models.CharField(max_length=512)
is_final = models.BooleanField(default=False)
is_public = models.BooleanField(default=False)
is_result_public = models.BooleanField(default=False)
file = models.FileField(null=True, blank=True)
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse('form-detail', kwargs={'slug': self.slug})
views.py
def create_form(request):
if request.method == 'POST':
user = request.user
data = ParseRequest(request.POST)
print(data.questions())
print(data.form())
parsed_form = data.form()
parsed_questions = data.questions()
# tworzy formularz o podanych parametrach
formfile = DocumentUpload(request.POST, request.FILES or None)
if formfile.is_valid():
form = formfile.save(commit=False)
print(form)
form.author = user
form.title = parsed_form['title']
form.is_final = parsed_form['is_final']
form.is_result_public = parsed_form['is_result_public']
form.description = parsed_form['description']
form.save()
# zapisuje pytania z ankiety wraz z odpowienimi pytaniami
for d in parsed_questions:
question = Question(form=form, question=d['question'])
question.save()
# dla kazdego pytania zapisz wszystkie opcje odpowiadania
for opt in d['options']:
option = Option(question=question, option=opt)
option.save()
return render(request, 'forms/form_form.html', {})
else:
form = DocumentUpload()
return render(request, 'forms/form_form.html', {'form': form})
create_form.html
Here I have to submit {{ form.as_p }} <- I have to submit this input in JS**
{% block content %}
<form method="post" id="form" enctype='multipart/form-data'>
{%csrf_token %}
<div class="form-group">
{% csrf_token %}
<label for="form-title">Tytuł formularza</label>
<input id="form-title" class="form-control" type="text"
placeholder="Tytuł" required/>
</div>
{{ form.as_p }}
.... more divs ...
<input class="btn btn-default" type="submit" value="zapisz"/>
</form>
{% endblock %}
collect_data.js
This is my function called to save inputs from create_form.html instead of:
<input class="btn btn-default" type="submit" value="zapisz"/>
but I don't know how to save input from:
{{ form.as_p }}
function collect_data() {
var csrftoken = getCookie('csrftoken');
var data = {
form_title: $('#form-title').val(),
is_final: $('#form-is-final').prop('checked'),
is_public: $('#form-is-public').prop('checked'),
is_result_public: $('#form-is-result-public').prop('checked'),
description: $('#description').val(),
questions: [],
num_questions: num_questions,
csrfmiddlewaretoken: csrftoken
};
for (var k = 0; k < num_questions; k++) {
var my_data = {};
var question_k = $('#question-' + k);
my_data.question = question_k.find('#question-text').val();
my_data.answer_type = question_k.find('select').val();
my_data.options = [];
for (var j = 0; j < num_question_options[k]; j++) {
var answer = question_k.find('#answer-' + j).val();
if (answer !== '') {
my_data.options.push(answer)
}
}
my_data.num_options = my_data.options.length;
data.questions.push(my_data)
}
return data
}
submit_data_create.js
$(document).ready(function (event) {
$(document).on('submit', '#form', function (e) {
e.preventDefault();
var data = collect_data();
$.ajax({
type: 'POST',
url: '/form/create/',
data: data,
success: function (data, textStatus) {
window.location.href = '/form/list/'
},
fail: function (response) {
alert('Coś poszło nie tak.');
}
});
})
});

Categories