I want to display table with basic informations about products, and add hyperlink to cells in column "Product name" after clicking which you will be redirected to more detailed description of product with possibility to edtiing, deleting it etc.
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Product name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
{% for element in object %}
<tr>
<td><div class="btn active"><i class="fa fa-check"></i></div></td>
<td>
<a href="{% url 'prod_desc' pk:element.pk %}">
{{element.name|lower|capfirst}}
</a>
</td>
<td>
{{element.price}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
How can I connect hiperlink with product name in table?
In case is there any walk-around solution ?
Is there any restriction about inserting hyperlink in html in general or it's a "Django thing" ?
The problem was in passing primary key of element I used ":" like in dictionary key:value instead of "="
<a href="{% url 'prod_desc' pk=element.pk %}">
{{element.name|lower|capfirst}}
</a>
Related
I am listing the rows of a table (fields: Name, Emails, Category, Expiry) via a template:
<table border="1" style="width:100%">
<tr>
<th style="width:20%">Name</th>
<th style="width:40%">Emails</th>
<th>Category</th>
<th>Expiry </th>
<th>Action</th>
</tr>
{% for obj in expiredlist %}
<tr>
<td>{{obj.name}}</td>
<td>{{obj.emails}}</td>
<td>{{obj.category}}</td>
<td>{{obj.expiry}}</td>
</tr>
{% endfor %}
</table>
Now I want to allow users to edit one of the fields on the fly (like how we do it in datatable).
I tried to add a new column by adding:
<td><form method="post">
{{form.expiry}}
</form>
<input type="submit" value="Submit"></td>
Thinking that the above will allow users to edit expiry field on the fly. I know I am not passing any info about each row (not able to connect with id).
Can someone guide me how can I do this?
I am using django server to send user email notifications, I came into a place where I need to say if this elemet doesn't exist add margin/space underneath the text
<tr style="padding:0;margin:0;" height="30">
<td width="190" style="font-family:Roboto;color:#000000;font-weight:bold">Date</td>
<td width="400" style="font-family:Roboto;color:#000000;">{{ processed_datetime|date:"d/m/Y H:i" }}</td>
<!--I want to say here if there is no other party email add this element underneath -->
{% if ! counterpart.email} <!--not sure about this line syntax -->
<tr style="padding:0;margin:0;" height="20">
<td width="190" height="20" style="font-family:Roboto;color:#000000;font-size:24px;line-height:32px;"></td>
</tr>
You do this with not, so:
{% if not counterpart.email %}
<tr style="padding:0;margin:0;" height="20">
<td width="190" height="20" style="font-family:Roboto;color:#000000;font-size:24px;line-height:32px;"></td>
</tr>
{% endif %}
As I iterate results. There are rows that can be merged, however, relative columns will have multiple rows.
For example:
Currently:
Domain ID----sub Domain Title---- Sub domain ID
A1-----------------A1 title-----------A1.1
A1-----------------A1 title-----------A1.2
I would like it to be like this. With first two columns with merged rows
Domain ID----sub Domain Title---- Sub domain ID
A1----------------A1 title------------A1.1
---------------------------------------- A1.2
<table class="table table-sm">
<tr>
<th>Domain ID</th>
<th>Sub Domain title</th>
<th>Sub domain ID</th>
</tr>
{% for record in a6titles %}
<tr>
<td>A6</td>
<td>A6 title</td>
<td>titles: {{ record }}</td>
</tr>
{% endfor %}
</table>
Try this.
<table class="table table-sm">
<tr>
<th>Domain ID</th>
<th>Sub Domain title</th>
<th>Sub domain ID</th>
</tr>
{% for record in a6titles %}
<tr>
<td colspan=3>A6</td>
<td>titles: {{ record }}</td>
</tr>
{% endfor %}
</table>
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>
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.