I am working on a feature that allow to update the properties of a node (name etc.). So in my changeservice.html I first populate a list with all nodes. Then depending on the selection an AJAX function is fetching all node details and pre-populates a form. Now everything works fine, I can change the values of all fields but one input in particular - service_name . Then for some reason all other fields disappear from the screen and are not even submitted with the POST afterwards, resulting in the following error:
File "C:\Users\nb67ab\Envs\virtualobeya4dec\virtualobeya\views.py", line 437, in changeservice features_1 = request.form['features_1']
File
"C:\Users\nb67ab\Envs\virtualobeya4dec\Lib\site-packages\werkzeug\datastructures.py",
line 443, in getitem raise exceptions.BadRequestKeyError(key)
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser
(or proxy) sent a request that this server could not understand.
KeyError: 'features_1'
My HTML looks like:
{% extends "layouts/layout.html" %}
{% block content %}
<div class="main-content">
<!-- Basic Form area Start -->
<div class="container-fluid">
<!-- Form row -->
<div class="row">
<div class="col-lg-12 ">
<div class="card">
<div class="card-body">
<h4 class="card-title">Change Service</h4>
<div class="form-row">
<div class="form-group col-md-4">
<label for="service_selected" class="col-form-label">Select Service or PB</label>
<select id="service_selected" name="platform_selected" class="form-control">
<option>Choose</option>
{% for x in services %}
<option value="{{x.name}},{{ x.type }},{{ x.pname }}">{{ x.name }},{{ x.type }},{{ x.pname }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="card" id="service_details" style="display: none">
<div class="card-body">
<form action="{{ url_for('changeservice') }}" method="post">
<div class="form-row">
<div id="service_name_old" class="form-group col-md-4" style="display: none">
<label for="servicenameold" class="col-form-label">Service Name Old</label>
<input type="text" class="form-control" name="servicenameold" id="servicenameold" placeholder="">
<label for="domainnameold" class="col-form-label">Domain Name Old</label>
<input type="text" class="form-control" name="domainnameold" id="domainnameold" placeholder="">
<label for="platformnameold" class="col-form-label">Platform Name Old</label>
<input type="text" class="form-control" name="platformnameold" id="platformnameold" placeholder="">
</div>
<div class="form-group col-md-3">
<div class="custom-control custom-radio">
<input type="radio" id="EPS" name="type" class="custom-control-input" value="EPS" checked>
<label class="custom-control-label" for="EPS">Exposed Platform Service</label>
</div>
</div>
<div class="form-group col-md-3">
<div class="custom-control custom-radio">
<input type="radio" id="ESPB" name="type" class="custom-control-input" value="ESPB">
<label class="custom-control-label" for="ESPB">Exposed Supplied Product Build</label>
</div>
</div>
<div class="form-group col-md-3">
<div class="custom-control custom-radio">
<input type="radio" id="ETES" name="type" class="custom-control-input" value="ETES">
<label class="custom-control-label" for="ETES">Exposed Tied Engineering Support</label>
</div>
</div>
<div class="form-group col-md-3">
<div class="custom-control custom-radio">
<input type="radio" id="ET" name="type" class="custom-control-input" value="ET">
<label class="custom-control-label" for="ET">Exposed Training&Counseling</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="selected_domain" class="col-form-label">Select domain where service belongs</label>
<select id="selected_domain" name="selected_domain" class="form-control">
<option>Choose</option>
{%for x in domain%}
<option value="{{x}}">{{x}}</option>
{%endfor%}
</select>
</div>
<div class="form-group col-md-6">
<label for="selected_platform" class="col-form-label">Select platform exposing the service</label>
<select name="selected_platform" id="selected_platform" class="form-control">
<option>Choose</option>
{%for x in platform%}
<option value="{{x}}">{{x}}</option>
{%endfor%}
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="col-form-label">Service Name</label>
<input type="text" class="form-control" name="service_name" id="service_name" placeholder="Service Name">
</div>
</div>
<div class="form-row">
<div id="features" class="form-group col-md-3">
</div>
<div id="options" class="form-group col-md-3">
</div>
<div id="qualities" class="form-group col-md-3">
</div>
<div id="aspects" class="form-group col-md-3">
</div>
</div>
<div>
<button type="submit" class="btn btn-primary">Change Service</button>
</div>
<div class="message-box">
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/ajax.js') }}"></script>
{% endblock %}
The Ajax Script looks like:
$("#service_selected").on('change', function(){
$.ajax(
{
url: '/returnservicedetails',
data:{
serviceselect: $("#service_selected").val()
},
success: function (data,status,xhr) { // success callback function
if (data.length > 0){
var js = JSON.parse(data);
console.log(data);
var servicename = js[0]['name'];
var type = js[0]['type'];
var domain=js[0]['dname'];
var platform=js[0]['pname'];
var features=js[0]['features'];
var serviceoptions = js[0]['options'];
var qualities=js[0]['qualities'];
var aspects = js[0]['aspects'];
$('#servicenameold').val(servicename);
$('#service_name').val(servicename);
if (type=='EPS') {
$('#EPS').prop('checked',true);
$(':radio:not(:checked)').attr('disabled', true);
}
else {
if (type=='ESPB') {
$('#ESPB').prop('checked',true);
$(':radio:not(:checked)').attr('disabled', true);
}
else {
if (type=='ETES') {
$('#ETES').prop('checked',true)
$(':radio:not(:checked)').attr('disabled', true);
}
else {
$('#ET').prop('checked',true)
$(':radio:not(:checked)').attr('disabled', true);
}
}
}
$('#selected_domain').val(domain);
$('#domainnameold').val(domain);
$('#selected_platform').val(platform);
$('#platformnameold').val(platform)
var features1 = '<label class="col-form-label">Features</label>';
for (var j = 0; j < features.length; j++) {
features1 += '<input type="text" class="form-control" name="features_' + (j + 1) + '" id="features_' + (j + 1) + '" placeholder="" value="' + features[j]+'" >';
}
$("#features").empty('').append(features1);
var serviceoptions1 = '<label class="col-form-label">Options</label>';
for (var j = 0; j < serviceoptions.length; j++) {
serviceoptions1 += '<input type="text" class="form-control" name="options_' + (j + 1) + '" id="options_' + (j + 1) + '" placeholder="" value="' + serviceoptions[j]+'" >';
}
$("#options").empty('').append(serviceoptions1);
var qualities1 = '<label class="col-form-label">Qualities</label>';
for (var j = 0; j < qualities.length; j++) {
qualities1 += '<input type="text" class="form-control" name="qualities_' + (j + 1) + '" id="qualities_' + (j + 1) + '" placeholder="" value="' + qualities[j]+'" >';
}
$("#qualities").empty('').append(qualities1);
var aspects1 = '<label class="col-form-label">Aspects</label>';
for (var j = 0; j < aspects.length; j++) {
aspects1 += '<input type="text" class="form-control" name="aspects_' + (j + 1) + '" id="aspects_' + (j + 1) + '" placeholder="" value="' + aspects[j]+'" >';
}
$("#aspects").empty('').append(aspects1);
$("#service_details").show()
}
else {
$("#service_details").hide()
}
},
error: function (jqXhr, textStatus, errorMessage) { // error callback
}
});
})
The Python endpoint looks like:
#app.route('/changeservice', methods=["GET","POST"])
def changeservice():
user=User(session["username"])
if request.method=="POST":
servicenameold=request.form['servicenameold']
domainnameold=request.form['domainnameold']
platformnameold=request.form['platformnameold']
newservicename=request.form['service_name']
domainnamenew=request.form['selected_domain']
platformnamenew=request.form['selected_platform']
stype=request.form['type']
features_1 = request.form['features_1']
features_2 = request.form['features_2']
features_3 = request.form['features_3']
features_4 = request.form['features_4']
options_1 = request.form['options_1']
options_2 = request.form['options_2']
options_3 = request.form['options_3']
options_4 = request.form['options_4']
qualities_1 = request.form['qualities_1']
qualities_2 = request.form['qualities_2']
qualities_3 = request.form['qualities_3']
qualities_4 = request.form['qualities_4']
aspects_1 = request.form['aspects_1']
aspects_2 = request.form['aspects_2']
aspects_3 = request.form['aspects_3']
aspects_4 = request.form['aspects_4']
features_all = [features_1, features_2, features_3, features_4]
options_all = [options_1, options_2, options_3, options_4]
qualities_all = [qualities_1, qualities_2, qualities_3, qualities_4]
aspects_all = [aspects_1, aspects_2, aspects_3, aspects_4]
if not newservicename or not domainnamenew or not platformnamenew:
flash("You must specify Service Name, Domain and Platform")
else:
nodeid=Services.returnexposedID(servicenameold,stype,platformnameold)
servicedetails=Services.returnExposedDetails(nodeid)
if servicedetails[0]['name']==newservicename and servicedetails[0]['features']==features_all and servicedetails[0]['options']==options_all and servicedetails[0]['qualities']==qualities_all and servicedetails[0]['aspects']==aspects_all and servicedetails[0]['dname']==domainnamenew and servicedetails[0]['pname']==platformnamenew:
flash("No changes were made")
else:
user.unhookServiceFromPandD(nodeid)
user.updateExposedProperties(nodeid,newservicename,domainnamenew,platformnamenew,features_all,options_all,qualities_all,aspects_all)
user.updateExposedsurroundings(nodeid)
platforms = Platforms.listAllplatforms()
domains = Domains.listdomains()
services=Services.listallexposed()
return render_template("changeservice.html",services=services,platform=platforms,domain=domains)
I forgot that all variables in Javascript are global, I had another function listening on a field with the same name.
Related
What I wanted to occur is that when I click the update button I could edit the contents of the modal also in the database. And for now i could not do that. And my modal is inside my index.html
Here are my ........
Code from Modal and index.html:
<!-- Modal -->
<div class="modal fade" id="employee.employee_id_{{ employee.employee_id }}" tabindex="-1" role="dialog" style="display: none; overflow: auto;" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<h5 class="modal-title" id="employee.employee_id_{{ employee.employee_id }}" </h5>
</div>
<div class="modal-body" style="overflow: auto">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-header-success" >
<h4 align="center" class="card-title">EMPLOYEE PROFILE</h4>
</div>
<form class="form" id="edit_employee_form" name="edit_employee_form" method="post" action="/edit_employee_form">
<div class="card">
<div class="card-body">
<div class="text-center">
<img src="{% static 'img/faces/marc.jpg' %}" class="rounded" height="150" width="150">
</div>
<br>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" name="emp_id" value="{{employee.employee_id}}" hidden>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" name="val_first_name" value=" {{ employee.first_name }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="first_name">Middle Name</label>
<input type="text" class="form-control" id="middle_name" name="val_middle_name" value=" {{ employee.middle_name }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="val_first_name" value=" {{ employee.last_name }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="present_address">Present Address</label>
<input type="text" class="form-control" id="present_address" name="val_present_address" value=" {{ employee.present_address }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="permanent_address">Permanent Address</label>
<input type="text" class="form-control" id="permanent_address" name="val_permanent_address" value=" {{ employee.permanent_address }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="zipcode">Zipcode</label>
<input type="text" class="form-control" id="zipcode" name="val_zipcode" value=" {{ employee.zipcode }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="birthday">Birthday</label>
<input type="text" class="form-control" id="birthday" name="val_birthday" value=" {{ employee.birthday }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="email_address">Email</label>
<input type="text" class="form-control" id="email_address" name="val_email_address" value=" {{ employee.email_address }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="user_type">User Type</label>
<input type="text" class="form-control" id="user_type" name="val_user_type" value=" {{ employee.user_type }}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="pagibig_id">Pagibig ID</label>
<input type="text" class="form-control" id="pagibig_id" name="val_pagibig_id" value=" {{ employee.pagibig_id}}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="sss_id">SSS ID</label>
<input type="text" class="form-control" id="sss_id" name="val_sss_id" value=" {{ employee.sss_id}}" >
</div>
</div>
<div class="col-md-4 mb-3">
<div class="form-group bmd-form-group is-focused">
<label class="bmd-label-floating" for="sss_id">TIN ID</label>
<input type="text" class="form-control" id="tin_id" name="val_tin_id" value=" {{ employee.tin_id}}" >
</div>
</div>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Update
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Amd here are from forms.py and views.py
forms.py
class EditEmployeeForm(ModelForm):
class Meta:
model = Employee
fields = ['employee', 'first_name', 'middle_name', 'last_name', 'present_address', 'permanent_address', 'zipcode', 'birthday', 'email_address', 'pagibig_id', 'sss_id', 'tin_id']
views.py ( not sure if its correct)
def edit_employee_form(request):
request.POST._mutable = True
form1 = EditEmployeeForm(request.POST)
first_name_val = request.POST['val_first_name']
middle_name_val = request.POST['val_middle_name']
last_name_val = request.POST['val_last_name']
primary_address_val = request.POST['val_primary_address']
permanent_address_val = request.POST['val_permanent_address']
zipcode_val = request.POST['val_zipcode']
email_address_val = request.POST['val_email_address']
pagibig_id_val = request.POST['val_pagibig_id']
tin_id_val = request.POST['val_tin_id']
sss_id_val = request.POST['val_sss_id']
form1.data['first_name'] = first_name_val
form1.data['middle_name'] = middle_name_val
form1.data['last_name'] = last_name_val
form1.data['primary_address'] = primary_address_val
form1.data['permanent_address'] = permanent_address_val
form1.data['zipcode'] = zipcode_val
form1.data['email_address'] = email_address_val
form1.data['pagibig_id'] = pagibig_id_val
form1.data['tin_id'] = tin_id_val
form1.data['sss_id'] = sss_id_val
if form1.is_valid():
form1.save()
sd = "Saved!"
else:
err = form1.errors
sd = "Error!"
context = {'form': form1,
'success_emp_edit': sd
}
return render(request, 'index.html', context)
And urls.py
path('edit_employee_form/', views.edit_employee_form)
Use the generic view to do it easily
views.py
from django.views.generic.edit import UpdateView
from django.urls import reverse_lazy
class EmployeeUpdate(UpdateView):
model = Employee
form_class = EditEmployeeForm
template_name = 'employee_form.html'
success_url = reverse_lazy('dashboard')
urls.py
path('employee/<int:employee_id>/', views.EmployeeUpdate.as_view(), name="employee-update")
and change in index.html
Update
I am trying to edit multiple rows of data in a model via formsets. In my rendered form, I use javascript to delete (hide and assign DELETE) rows, and then save changes with post.
My view:
def procedure_template_modification_alt(request, cliniclabel, template_id):
msg = ''
clinicobj = Clinic.objects.get(label=cliniclabel)
template_id = int(template_id)
template= ProcedureTemplate.objects.get(templid = template_id)
formset = ProcedureModificationFormset(queryset=SectionHeading.objects.filter(template = template))
if request.method == 'POST':
print(request.POST.get)
# Create a formset instance with POST data.
formset = ProcedureModificationFormset(request.POST)
if formset.is_valid():
print("Form is valid")
instances = formset.save(commit=False)
print(f'instances:{instances}')
for instance in instances:
print(f'Instance: {instance}')
instance.template = template
instance.save()
msg = "Changes saved successfully."
print("Deleted forms:")
for form in formset.deleted_forms:
print(form.cleaned_data)
else:
print("Form is invalid")
print(formset.errors)
msg = "Your changes could not be saved as the data you entered is invalid!"
template= ProcedureTemplate.objects.get(templid = template_id)
headings = SectionHeading.objects.filter(template = template)
return render(request, 'procedures/create_procedure_formset_alt.html',
{
'template': template,
'formset': formset,
'headings': headings,
'msg': msg,
'rnd_num': randomnumber(),
})
My models:
class ProcedureTemplate(models.Model):
templid = models.AutoField(primary_key=True, unique=True)
title = models.CharField(max_length=200)
description = models.CharField(max_length=5000, default='', blank=True)
clinic = models.ForeignKey(Clinic, on_delete=models.CASCADE)
def __str__(self):
return f'{self.description}'
class SectionHeading(models.Model):
procid = models.AutoField(primary_key=True, unique=True)
name = models.CharField(max_length=200)
default = models.CharField(max_length=1000)
sortorder = models.IntegerField(default=1000)
fieldtype_choice = (
('heading1', 'Heading1'),
('heading2', 'Heading2'),
)
fieldtype = models.CharField(
choices=fieldtype_choice, max_length=100, default='heading1')
template = models.ForeignKey(ProcedureTemplate, on_delete=models.CASCADE, null=False)
def __str__(self):
return f'{self.name} [{self.procid}]'
My forms:
class ProcedureCrMetaForm(ModelForm):
class Meta:
model = SectionHeading
fields = [
'name',
'default',
'sortorder',
'fieldtype',
'procid'
]
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['name'].widget.attrs.update({'class': 'form-control'})
self.fields['default'].widget.attrs.update({'class': 'form-control'})
self.fields['sortorder'].widget.attrs.update({'class': 'form-control'})
self.fields['fieldtype'].widget.attrs.update({'class': 'form-control'})
ProcedureCreationFormset = formset_factory(ProcedureCrMetaForm, extra=3)
ProcedureModificationFormset = modelformset_factory(SectionHeading, ProcedureCrMetaForm,
fields=('name', 'default', 'sortorder','fieldtype', 'procid'),
can_delete=True,
extra=0
# widgets={"name": Textarea()}
)
The template:
{% block content %} {% load widget_tweaks %}
<div class="container">
{% if user.is_authenticated %}
<div class="row my-1">
<div class="col-sm-2">Name</div>
<div class="col-sm-22">
<input type="text" name="procedurename" class="form-control" placeholder="Enter name of procedure (E.g. DNE)"
value="{{ template.title }}" />
</div>
</div>
<div class="row my-1">
<div class="col-sm-2">Description</div>
<div class="col-sm-22">
<input type="text" name="proceduredesc" class="form-control" placeholder="Enter description of procedure (E.g. Diagnostic Nasal Endoscopy)"
value="{{ template.description }}" />
</div>
</div>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %} {{ formset.management_form }}
<div class="row mt-3">
<div class="col-sm-1">Select</div>
<div class="col-sm-6">Heading</div>
<div class="col-sm-8">Default (Normal description)</div>
<div class="col-sm-2">Sort Order</div>
<div class="col-sm-4">Type</div>
<div class="col-sm-2">Action</div>
</div>
{% for form in formset %}
<div class="row procrow" id="row{{ forloop.counter0 }}">
<div class="" style="display: none;">{{ form.procid }}</div>
<div class="col-sm-6">
{{ form.name }}
</div>
<div class="col-sm-8">
<div class="input-group">
{{ form.default }}
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
{{ form.sortorder }}
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
{{ form.fieldtype }}
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-append">
<button id="add{{ forloop.counter0 }}" class="btn btn-success add-row">+</button>
</div>
<div class="input-group-append">
<button id="del{{ forloop.counter0 }}" class="btn btn-danger del-row">-</button>
</div>
</div>
</div>
</div>
{% endfor %} {% endif %}
<div class="row my-3">
<div class="col-sm-8"></div>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-append mx-1">
<button id="save_report" type="submit" class="btn btn-success"><i class="fal fa-shield-check"></i>
Save Report Format</button>
</div>
<div class="input-group-append mx-1">
<button id="save_report" type="button" class="btn btn-danger"><i class="fal fa-times-hexagon"></i>
Cancel</button>
</div>
</div>
</div>
<div class="col-sm-8"></div>
</div>
<div>
{% for dict in formset.errors %} {% for error in dict.values %} {{ error }} {% endfor %} {% endfor %}
</div>
</form>
</div>
{% endblock %}
My data is displayed as below (Screenshot). I make changes with javascript when the delete button is pressed, so that the html becomes like this:
<div class="row procrow" id="row2" style="display: none;">
<div class="" style="display: none;"><input type="hidden" name="form-2-procid" value="25" id="id_form-2-procid"></div>
<div class="col-sm-6">
<input type="text" name="form-2-name" value="a" maxlength="200" class="form-control" id="id_form-2-name">
</div>
<div class="col-sm-8">
<div class="input-group">
<input type="text" name="form-2-default" value="v" maxlength="1000" class="form-control" id="id_form-2-default">
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<input type="number" name="form-2-sortorder" value="1000" class="form-control" id="id_form-2-sortorder">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<select name="form-2-fieldtype" class="form-control" id="id_form-2-fieldtype">
<option value="heading1" selected="">Heading1</option>
<option value="heading2">Heading2</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-append">
<button id="add2" class="btn btn-success add-row">+</button>
</div>
<div class="input-group-append">
<button id="del2" class="btn btn-danger del-row">-</button>
</div>
</div>
</div>
<input type="checkbox" name="form-2-DELETE" id="id_form-2-DELETE" checked=""></div>
On submitting the data, I get the following output, and data does not reflect the deletion I did. It displays the same thing again. There are no errors. But my edited data is not being saved.
Output:
<bound method MultiValueDict.get of <QueryDict: {'csrfmiddlewaretoken': ['ka3avICLigV6TaMBK5a8zeVJlizhtsKW5OTDBLlYorKd7Iji9zRxCX2vvjBv6xKu'], 'form-TOTAL_FORMS': ['3'], 'form-INITIAL_FORMS': ['3'], 'form-MIN_NUM_FORMS': ['0'], 'form-MAX_NUM_FORMS': ['1000'], 'form-0-procid': ['23'], 'form-0-name': ['External ear canal'], 'form-0-default': ['Bilateral external ear canals appear normal. No discharge.'], 'form-0-sortorder': ['100'], 'form-0-fieldtype': ['heading1'], 'form-1-procid': ['24'], 'form-1-name': ['Tympanic membrane'], 'form-1-default': ['Tympanic membrane appears normal. Mobility not assessed.'], 'form-1-sortorder': ['500'], 'form-1-fieldtype': ['heading1'], 'form-2-procid': ['25'], 'form-2-name': ['a'], 'form-2-default': ['v'], 'form-2-sortorder': ['1000'], 'form-2-fieldtype': ['heading1'], 'form-2-DELETE': ['on']}>>
Form is valid
instances:[]
Deleted forms:
{'name': 'a', 'default': 'v', 'sortorder': 1000, 'fieldtype': 'heading1', 'procid': <SectionHeading: a [25]>, 'DELETE': True}
You actually need to delete the instances: Loop through the formsets' deleted_objects property after you called saved(commit=False) and delete them.
The problem here is that when the form is posted the create_usecase function runs and then it redirects to another URL. This URL runs the quest function in the view and executes every line in the function but it doesn't make any return at all the create-usecase template stays as it is.
So the template is like this:
<form>
<div class="row">
<div class="input-field col s6 offset-s3">
<div class="row">
<div class="col m2 s4">
<p>Case name</p>
</div>
<div class="col m10 s8">
<input id="usecase_name" type="text" name="usecase_name" placeholder="Case name">
</div>
</div>
</div>
<div class="input-field col s6 offset-s3">
<select id="category-list">
<option value="" disabled selected>Choose your Category</option>
<option value="1">University/College</option>
<option value="2">Hospital</option>
<option value="3">Business Organizations</option>
</select>
<label>Categories</label>
</div>
</div>
<div id="subcategory-list" class="row">
<div class="col s6 offset-s3">
{% if data %}
<h6>Sub Category</h6>
{% for item in data %}
<div class="form-check">
<input class="form-check-input" onchange="subCategoryValue('{{ item.username }}')" type="radio" name="sub-category" id="{{ item.username }}" value="{{ item.username }}">
<label class="form-check-label" for="{{ item.username }}">
{{ item.username }}
</label>
</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row center">
<button type="submit" id="nextBtn" class="btn waves-effect waves-light orange">Next</button>
</div>
</form>
<script type="text/javascript">
var flag = ''
function subCategoryValue(v) {
flag = v;
$('#nextBtn').show();
}
$(document).ready(function(){
$('#nextBtn').hide();
$('#category-list').change(function(e){
e.preventDefault();
if($('#usecase_name').val() !== '') {
$.ajax({
type: 'POST',
url: '/create-usecase/',
data: {
usecase_name: $('#usecase_name').val(),
category: $('#category-list').val(),
sub_category: '',
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function(response) {
$('#subcategory-list').replaceWith($("#subcategory-list",response));
}
});
} else {
alert('Please fill the usecase field.')
}
});
});
$('#nextBtn').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '/create-usecase/',
data: {
usecase_name: $('#usecase_name').val(),
category: $('#category-list').val(),
sub_category: flag,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function() {
}
})
});
</script>
And the views:
def create_usecase(request):
if not request.user.is_authenticated:
return redirect('index')
else:
if request.method == 'POST':
if not request.POST['sub_category'] == '':
print(request.POST['sub_category'])
#create a use new use case or project in the database
request.session['usecase_name'] = request.POST['usecase_name']
request.session['category'] = request.POST['category']
request.session['sub_category'] = request.POST['sub_category']
return redirect('quest')
else:
users = User.objects.all()
return render(request, 'usecases/create-usecase.html', {'data': users})
else:
return render(request, 'usecases/create-usecase.html')
def quest(request):
print('questions!')
print('{} {} {} '.format(request.session['usecase_name'], request.session['category'], request.session['sub_category']))
return HttpResponse('test')
And the urls:
urlpatterns = [
path('create-usecase/quest/', views.quest, name='quest'),
path('create-usecase/', views.create_usecase, name='create_usecase'),
]
The console:
[17/May/2018 13:57:14] "GET /create-usecase/ HTTP/1.1" 200 4376
[17/May/2018 13:57:19] "POST /create-usecase/ HTTP/1.1" 200 5514
test1
[17/May/2018 13:57:23] "POST /create-usecase/ HTTP/1.1" 302 0
questions!
test 1 test1
[17/May/2018 13:57:23] "GET /create-usecase/quest/ HTTP/1.1" 200 4
I can't get my angular code to work with get or post responses any help would be greatly appreciated. I have included screen shots to give a better idea of what I am dealing with.
angular code
var dim = angular.module('Dim', ['ngResource']);
dim.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
dim.factory("Dim", function ($resource) {
return $resource("/_dims.html/:id", { id: '#id' }, {
index: { method: 'GET', isArray: true, responseType: 'json' },
update: { method: 'PUT', responseType: 'json' }
});
})
dim.controller("DimController", function ($scope, $http, Dim) {
$scope.dims = Dim.index()
$scope.addDim = function () {
dim = Dim.save($scope.newDim)
$scope.dims.push(Dim)
$scope.newDim = {}
}
$scope.deleteDim = function (index) {
dim = $scope.dims[index]
Dim.delete(dim)
$scope.dims.splice(index, 1);
}
})
views.py
def add_dimensions(request):
if request.method == 'POST':
c_date = datetime.datetime.now()
u_date = datetime.datetime.now()
description = request.POST.get('description')
style = request.POST.get('style')
target = request.POST.get('target')
upper_limit = request.POST.get('upper_limit')
lower_limit = request.POST.get('lower_limit')
inspection_tool = request.POST.get('inspection_tool')
critical = request.POST.get('critical')
units = request.POST.get('units')
metric = request.POST.get('metric')
target_strings = request.POST.get('target_strings')
ref_dim_id = request.POST.get('ref_dim_id')
nested_number = request.POST.get('nested_number')
met_upper = request.POST.get('met_upper')
met_lower = request.POST.get('met_lower')
valc = request.POST.get('valc')
sheet_id = request.POST.get('sheet_id')
data = {}
dim = Dimension.objects.create(
description=description,
style=style,
target=target,
upper_limit=upper_limit,
lower_limit=lower_limit,
inspection_tool=inspection_tool,
critical=critical,
units=units,
metric=metric,
target_strings=target_strings,
ref_dim_id=ref_dim_id,
nested_number=nested_number,
met_upper=met_upper,
met_lower=met_lower,
valc=valc,
sheet_id=sheet_id,
created_at=c_date,
updated_at=u_date)
data['description'] = dim.description;
data['style'] = dim.style;
data['target'] = dim.target;
data['upper_limit'] = dim.upper_limit;
data['lower_limit'] = dim.lower_limit;
data['inspection_tool'] = dim.inspection_tool;
data['critical'] = dim.critical;
data['units'] = dim.units;
data['metric'] = dim.metric;
data['target_strings'] = dim.target_strings;
data['ref_dim_id'] = dim.ref_dim_id;
data['nested_number'] = dim.nested_number;
data['met_upper'] = dim.met_upper;
data['met_lower'] = dim.met_lower;
data['valc'] = dim.valc;
data['sheet_id'] = dim.sheet_id;
return HttpResponse(json.dumps(data), content_type="application/json",)
else:
#dim_form = DimForm()
c_date = datetime.datetime.now()
dim_data = Dimension.objects.filter(created_at__lte=c_date)
#dim_serial = json.dumps(dim_data, cls = MyEncoder)
return HttpResponse(json.dumps(dim_data, cls=MyEncoder))
#return render(request, 'app/_dims.html', {'dim_form': dim_form})
class MyEncoder(json.JSONEncoder):
def default(self, obj):
if isinstance(obj, datetime.datetime):
return int(mktime(obj.timetuple()))
url.py
urlpatterns = [
# Examples:
url(r'^$', app.views.home, name='home'),
url(r'^contact$', app.views.contact, name='contact'),
url(r'^about', app.views.about, name='about'),
#url(r'^sheet', app.views.sheet, name='sheet'),
url(r'^sheet/(?P<customer_id>\w+)$', app.views.sheet, name='sheet_customer'),
url(r'^sheet/sheet_form_create.html$', app.views.sheet_form_create, name='sheet_form_create'),
url(r'^sheet/sheet_form_create.html/get_work$', app.views.get_work, name='get_work'),
url(r'^sheet/(?P<pk>\d+)/sheet_update$', app.views.update_sheet, name='sheet_update'),
url(r'^_dims.html$', app.views.add_dimensions, name='dim_update'),
url(r'^sheet/(?P<pk>\d+)/delete_sheet$', app.views.delete_sheet, name='sheet_delete'),
url(r'^sheet/sheet_form_create.html/_dim$', app.views.add_dimensions, name='dim'),
url(r'^_dims.html(?P<pk>\d+)$', app.views.add_dimensions, name='dim'),
url(r'^$', app.views.dimtable_asJson, name='dim_table_url'),
#url(r^'grid_json/', include (djqgrid.urls)),
_dims.html
{% block content %}
<div class="container" ng-app="Dim">
<h1>Dimensions</h1>
<div ng-controller="DimController">
<div class="well">
<h3>Add Dimensions</h3>
<form ng-submit="addDim()">
<div class="row">
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.description" placeholder="Description" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.style" placeholder="Style" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.target" placeholder="Target" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.upper_limit" placeholder="Upper Limit" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.lower_limit" placeholder="Lower Limit" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.inspecton_tool" placeholder="Inspection Tool" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.critical" placeholder="Critical" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.units" placeholder="Units" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.metric" placeholder="Metric" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.target_strings" placeholder="Target Strings" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.ref_dim_id" placeholder="Ref Dim Id" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.nested_number" placeholder="Nested Number" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.met_upper" placeholder="Met Upper" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.met_lower" placeholder="Met Lower" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.valc" placeholder="Valc" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.sheet_id" placeholder="Sheet ID" type="text"></input>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<br/>
<input class="btn btn-primary" type="submit" value="Save Dimension">/</input> {% csrf_token %}
</div>
</div>
</form>
<table class="table table-bordered trace-table">
<thead>
<tr class="trace-table">
<th class="ts jp" style="border: solid black;">Description</th>
</tr>
</thead>
<tr class="trace-table">
<tr ng-repeat="dim in dims track by $index">
<td class="trace-table" style="border: solid black;">{{ dim.description }}</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
<a class="btn btn-danger" ng-click="deleteDim($index)">_</a>
{% endblock %}.
screen shots
GET RESPONSE NOT LOADING DATA
POST RESPONSE SAVING ALL NULL VALUES TO MY DB
NOT A CSFR ISSUE
For some reason I can't get my angular code to play nice with my python django application. When I submit the page it saves all null values in my db and my get response isn't working correctly either because nothing is returned. Any help will be greatly appreciated, I also included screen shots for a better picture of what I am trying to do.
angular code
var dim = angular.module('Dim', ['ngResource']);
dim.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
dim.factory("Dim", function ($resource) {
return $resource("/_dims.html/:id", { id: '#id' }, {
index: { method: 'GET', isArray: true, responseType: 'json' },
update: { method: 'PUT', responseType: 'json' }
});
})
dim.controller("DimController", function ($scope, $http, Dim) {
$scope.dims = Dim.index()
$scope.addDim = function () {
dim = Dim.save($scope.newDim)
$scope.dims.push(Dim)
$scope.newDim = {}
}
$scope.deleteDim = function (index) {
dim = $scope.dims[index]
Dim.delete(dim)
$scope.dims.splice(index, 1);
}
})
views.py
def add_dimensions(request):
if request.method == 'POST':
c_date = datetime.now()
u_date = datetime.now()
description = request.POST.get('description')
style = request.POST.get('style')
target = request.POST.get('target')
upper_limit = request.POST.get('upper_limit')
lower_limit = request.POST.get('lower_limit')
inspection_tool = request.POST.get('inspection_tool')
critical = request.POST.get('critical')
units = request.POST.get('units')
metric = request.POST.get('metric')
target_strings = request.POST.get('target_strings')
ref_dim_id = request.POST.get('ref_dim_id')
nested_number = request.POST.get('nested_number')
met_upper = request.POST.get('met_upper')
met_lower = request.POST.get('met_lower')
valc = request.POST.get('valc')
sheet_id = request.POST.get('sheet_id')
data = {}
dim = Dimension.objects.create(
description=description,
style=style,
target=target,
upper_limit=upper_limit,
lower_limit=lower_limit,
inspection_tool=inspection_tool,
critical=critical,
units=units,
metric=metric,
target_strings=target_strings,
ref_dim_id=ref_dim_id,
nested_number=nested_number,
met_upper=met_upper,
met_lower=met_lower,
valc=valc,
sheet_id=sheet_id,
created_at=c_date,
updated_at=u_date)
data['description'] = dim.description;
data['style'] = dim.style;
data['target'] = dim.target;
data['upper_limit'] = dim.upper_limit;
data['lower_limit'] = dim.lower_limit;
data['inspection_tool'] = dim.inspection_tool;
data['critical'] = dim.critical;
data['units'] = dim.units;
data['metric'] = dim.metric;
data['target_strings'] = dim.target_strings;
data['ref_dim_id'] = dim.ref_dim_id;
data['nested_number'] = dim.nested_number;
data['met_upper'] = dim.met_upper;
data['met_lower'] = dim.met_lower;
data['valc'] = dim.valc;
data['sheet_id'] = dim.sheet_id;
return HttpResponse(json.dumps(data), content_type="application/json",)
else:
return render(request, 'app/_dims.html')
url.py
urlpatterns = [
# Examples:
url(r'^$', app.views.home, name='home'),
url(r'^contact$', app.views.contact, name='contact'),
url(r'^about', app.views.about, name='about'),
#url(r'^sheet', app.views.sheet, name='sheet'),
url(r'^sheet/(?P<customer_id>\w+)$', app.views.sheet, name='sheet_customer'),
url(r'^sheet/sheet_form_create.html$', app.views.sheet_form_create, name='sheet_form_create'),
url(r'^sheet/sheet_form_create.html/get_work$', app.views.get_work, name='get_work'),
url(r'^sheet/(?P<pk>\d+)/sheet_update$', app.views.update_sheet, name='sheet_update'),
url(r'^_dims.html$', app.views.add_dimensions, name='dim_update'),
url(r'^sheet/(?P<pk>\d+)/delete_sheet$', app.views.delete_sheet, name='sheet_delete'),
url(r'^sheet/sheet_form_create.html/_dim$', app.views.add_dimensions, name='dim'),
url(r'^_dims.html(?P<pk>\d+)$', app.views.add_dimensions, name='dim'),
url(r'^$', app.views.dimtable_asJson, name='dim_table_url'),
#url(r^'grid_json/', include (djqgrid.urls)),
_dims.html
{% block content %}
<div class="container" ng-app="Dim">
<h1>Dimensions</h1>
<div ng-controller="DimController">
<div class="well">
<h3>Add Dimensions</h3>
<form ng-submit="addDim()">
<div class="row">
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.description" placeholder="Description" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.style" placeholder="Style" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.target" placeholder="Target" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.upper_limit" placeholder="Upper Limit" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.lower_limit" placeholder="Lower Limit" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.inspecton_tool" placeholder="Inspection Tool" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.critical" placeholder="Critical" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.units" placeholder="Units" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.metric" placeholder="Metric" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.target_strings" placeholder="Target Strings" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.ref_dim_id" placeholder="Ref Dim Id" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.nested_number" placeholder="Nested Number" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.met_upper" placeholder="Met Upper" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.met_lower" placeholder="Met Lower" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.valc" placeholder="Valc" type="text"></input>
</div>
<div class="col-xs-6">
<input class="form-control" ng-model="newDim.sheet_id" placeholder="Sheet ID" type="text"></input>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<br/>
<input class="btn btn-primary" type="submit" value="Save Dimension">/</input> {% csrf_token %}
</div>
</div>
</form>
<table class="table table-bordered trace-table">
<thead>
<tr class="trace-table">
<th class="ts jp" style="border: solid black;">Description</th>
</tr>
</thead>
<tr class="trace-table">
<tr ng-repeat="dim in dims track by $index">
<td class="trace-table" style="border: solid black;">{{ dim.description }}</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
<a class="btn btn-danger" ng-click="deleteDim($index)">_</a>
{% endblock %}.
As your network tab screenshot shows, you're sending JSON, not form-encoded data. So in Django you need to use json.loads(request.body) to get the data as a dict, rather than accessing request.POST which will always be empty.
Note that if you're doing something like this, you should almost certainly be using django-rest-framework, which allows you to define serializers and deserializers that will automatically convert your models to and from JSON, and additionally validate the submitted data.