validate display none in django - django

template is
<button type="submit" id="add" class="button_style" onclick="addreporter();" value="Add New Authorised Reporter">Add New Authorised Reporter</button>
<div id="authorisedreporter" style="display:none">
<form method="post" action="{% url incident.views.about_me %}">{% csrf_token %}
<table width="100%">
<tr>
<td style="width:100px;">First name:</td>
<td>{{registerform.first_name}}{{registerform.first_name.errors}}</td>
</tr>
<tr>
<td>Last name:</td>
<td>{{registerform.last_name}}{{registerform.last_name.errors}}</td>
</tr>
<tr>
<td>Daytime phone:</td>
<td>{{createprofile.phone_daytime}}{{createprofile.phone_daytime.errors}}</td>
</tr>
<tr>
<td>Mobile phone:</td>
<td>{{createprofile.phone_mobile}}{{createprofile.phone_mobile.errors}}</td>
</tr>
<tr>
<td>Email:</td>
<td>{{registerform.email}}{{registerform.email.errors}}</td>
</tr>
<tr>
<td>User name</td>
<td>{{registerform.username}}{{registerform.username.errors}}</td>
</tr>
<tr>
<td>Password</td>
<td>{{registerform.password}}{{registerform.password.errors}}</td>
</tr>
<tr>
<td colspan=2 "">
<input type="checkbox" name="is_qualified_firstaiders" style="margin: 0;vertical-align:middle" />Qualified First Aiders</td>
</tr>
</table>
</form>
</div>
js:
function addreporter(){
$("#authorisedreporter").toggle();
if ($("#authorisedreporter").is(":visible")) {
$("#authorisedreporter").show();
$("#add").hide();
}
}
Using the jquery toggle,the gets open on click of this <button>Add new Authorized Reporter</button>,every thing is fine except that if their is any error in form,the form is going to be in hide mode,if i want to see the errors again i need to click the <button>Add new Authorized Reporter</button>,its a small logic to set if errors are in form,the form should not hide.What i thought is if i validate the display:none in <div> will work but no idea how to validate it in template.
Thanks

You can do:
<div id="authorisedreporter" {% if not registerform.errors %}style="display:none"{% endif %}>
Also, you might have to modify addreporter() accordingly.

Related

bootstrap 4 collapse (accordion table) in django

I've posted the code for a table in django templates that is generated dynamically using an array from views.py. I've added a bootstrap4 collapse, that runs when a chevron button is clicked. However, it shows ALL of the hidden collapses instead of just the collapsible data for that given row (see img below).
I know that I can set ids dynamically, but I haven't had any luck passing functions to the "data-target" attribute.
<table class="table table-hover">
<thead class>
<tr>
<th style="width:5%"></th>
<th>Sample</th>
<th>Reference</th>
<th>Cost</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<div class="container" id="accordion">
<div class="card">
{% for r in result %}
<tr>
<td>
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo" onclick="">
</button>
</td>
<td> {{ r.split.0 }} </td> <!-- sample word -->
<td> {{ r.split.2 }}</td> <!-- ref word -->
<td> {{ r.split.4 }}</td> <!-- cost -->
<td> {{ r.split.3 }}</td> <!-- sum -->
</tr>
<tr>
<td id="demo" class="collapse" colspan="5" >
<!-- COLLAPSE CONTENT -->
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
The "toogle button" have this HTML code:
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo">
and the collapsible content is the following:
<td id="demo" class="collapse">[...]</td>
It's normal every toggle button show or hide all collapsible contents in your page, because all these elements are related to the same #demo identifier.
You have to make sure the id of collapsible content is unique accross all the document, and ensure the corresponding button references the same unique id. Maybe use your result id (from context variable) to do something like that:
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo-{{ r.pk }}">
<td id="demo-{{ r.pk }}" class="collapse">[...]</td>
EDIT: Of course, you have to adapt it to YOUR data. In this example, I imagine your list result contain many model instances, so in each result r, the value r.pk is unique.
In your template, if results contain something else, you have to make sure a unique str or int is extracted from each value to uniquify the idyou write into your HTML.
Maybe it will be demo-{{ r.split.6 }} or demo-{{ r.a_unique_attr_in_my_object }} or demo-{{ r.slugify }}.
Try to put the content you want to hide under the " COLLAPSE CONTENT ".
like this:
<table class="table table-hover">
<thead class>
<tr>
<th style="width:5%"></th>
<th>Sample</th>
<th>Reference</th>
<th>Cost</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<div class="container" id="accordion">
<div class="card">
{% for r in result %}
<tr>
<td>
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo" onclick="">
</button>
</td>
</tr>
<tr>
<td id="demo" class="collapse" colspan="5" >
<td> {{ r.split.0 }} </td> <!-- sample word -->
<td> {{ r.split.2 }}</td> <!-- ref word -->
<td> {{ r.split.4 }}</td> <!-- cost -->
<td> {{ r.split.3 }}</td> <!-- sum -->
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
By the way, don't forget the Bootstrap CDN

Adding rows breaks datatable in Django

I have a datatable in Django that functions fine when hardcoded, but when I add my Django template tags it breaks. The inspect on the page says: Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined in jquery.datatables.min.js
This only happens when I have more than one user in the table, or try to add a column in the table with django. Since I will be using multiple datatables in my project, I need to figure out what I'm doing wrong. The datatable JS code I'm using comes from a template, and I'm not sure if the error is in the template code or in my Django template code. So please excuse the long code blocks.
employees.html (django template):
<div class="card-body collapse in">
<div class="card-block card-dashboard">
<button id="addRow" class="btn btn-primary mb-2 js-create-employee"><i class="ft-plus"></i> Add New Employee</button>
<table class="table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Roles</th>
<th>Email</th>
<th>Mobile Contact</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for profile in user_profile_list %}
<tr>
{% if not profile.user.is_superuser %}
<td>{{ profile.user.get_full_name }}</td>
<td>{{ profile.user.username }}</td>
<td>
{% for g in profile.user.groups.all %}
<div class="tag tag-default">{{ g.name|split:'_'|title }}</div>
{% endfor %}
</td>
<td>{{ profile.user.email }}</td>
<td>{{ profile.mobile_phone }}</td>
<td><i class="fa fa-pencil"></i> <a href="#" alt="Assign"><i class="fa fa-link"></i><a/> <a href="#" alt="delete"><i class="fa fa-times"></i><a/></td>
{% endif %}
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Roles</th>
<th>Email</th>
<th>Mobile Contact</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
Datatable instantiation:
$(document).ready(function() {
/****************************************
* js of zero configuration *
****************************************/
$('.zero-configuration').DataTable();
});
Jquery.datatables.min.js and dataTables.bootstrap4.min.js are also used, but those come stock from bootstrap 4. I'm not going to add them here unless needed, and they are minified anyway.
This issues occurs only when data is not available for the table or tags.
You have conditions in template using django templatestag So the number of every <td> element in your table that is a child of a <tr> element doesn't match the number of <th> elements that are a child of the element.
Please make sure you have same number of <td> tag in <tbody> tag.
EDIT:
Maybe {% if not profile.user.is_superuser %} this condition creating this issue. If user is superuser then no <td> tag will create that will not match same number of <th> in <thead>

In django, how to get the records from HTML table using checkboxes?

This is the view function:
def main_view(request):
x=request.POST.getlist('checks')
print x
return render(request, 'main.html')
This is main.html
<form role="form" action="/main/" method="post">{% csrf_token %}
<table class="table">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td><input type="checkbox" name="checks" id="1" />data11</td>
<td>data12</td>
<td>data13</td>
</tr>
<tr class="success">
<td><input type="checkbox" name="checks" id="1" />data21</td>
<td>data22</td>
<td>data23</td>
</tr>
<tr class="success">
<td><input type="checkbox" name="checks" id="1" />data31</td>
<td>data32</td>
<td>data33</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-default btn-success pull-right">Remove</button>
</form>
When I run the app, on the console the output of print statement (in main_view) is
[u'on', u'on']
Basically, what I'm trying to do is, user should be able to select entries from HTML table and when he/she clicks on "Remove" button, the entries should be removed. I don't know how to get the information about selected entries from the request object in my view. How can I handle this in my view?
You need to give your checkboxes a value attribute corresponding to the ID of the record.
<td><input type="checkbox" name="checks" id="1" value="data31" />data31</td>
Note that a) the readable value should be a label, to improve accessibility, and b) you probably want to output both value and label with a template variable from the record itself.

Passing checkboxes values to view in django

I have a table with some database data
<table id="id_list_table" class="table table-condensed">
<caption>Inputs list</caption>
<thead>
<tr>
<th>#</th>
<th id="input">Input</th>
</tr>
</thead>
<tbody id="fbody">
{%for input in InputsAll%}
<tr>
<td>{{ input.input }}</td>
<td>
<a class="btn btn-primary btn-xs" href="{% url 'edit' %}?input_num={{input.id}}" id="edit">edit</a>
<a class="btn btn-danger btn-xs" href="{% url 'delete' %}?input_num={{input.id}}" id="remove">remove</a>
<a class="btn btn-success btn-xs" href="{% url 'resolve' %}?input_num={{input.id}}"id="resolve">resolve</a>
<input type="checkbox" name="inputs" id="option{{input.id}}" value={{input.id}} />
</td>
</tr>
{%endfor%}
</tbody>
</table>
and i want to add a checkbox to every field and pass checked data's id to view and make group action instead of removing items one by one.
i added this checkbox
<input type="checkbox" name="inputs" id="option{{input.id}}" value={{input.id}} />
and how should i pass all checked values to view? Does it work this way?
views.py
if request.method == 'POST':
#gives list of id of inputs
list_of_input_ids=request.POST.getlist('inputs')
Hope this solves pretty much of your problem.Check out this link
Checkboxes for a list of items like in Django admin interface

django table form ad a 3rd column for errors

I am trying to get my possible error messages in a 3rd column behind the input fields. but except for customizing my whole html in my template I have no idea how to do this. An with my eyes on the widgets and ModelForm class I guess there should be something for it.
My form:
class ProvinceForm(forms.ModelForm):
"""Form to create or edit Provinces."""
name = forms.CharField()
choice_set = Country.objects.all()
country= forms.ModelChoiceField(queryset=choice_set, empty_label="Choose its country")
flavor = forms.CharField(
widget=forms.Textarea(attrs={'width': 300, 'height': 200}))
class Meta:
model = Province
And then my template:
<form action="{% url 'create_province' %}" method="post">{% csrf_token %}
<table>
{{ province_form.as_table }}
<tr>
<td></td>
<td style="float: right;"><input type="submit" value="add province" /></td>
</tr>
</table>
</form>
What would be the logical way to add that 3rd column instead of stripping the whole {{ province_form.as_table }} apart
You need to render each field separately as:
<table>
{% for field in province_form %}
<tr>
<td>{{field.label}}</td> <td> {{field}} </td> <td> {{field.errors}} </td>
</tr>
{%endfor%}
<tr>
<td></td>
<td style="float: right;"><input type="submit" value="add province" /></td>
</tr>
</table>
Note: you may want to change rendering of errors appropriately by looping over {{field.errors}}.