I have a table where the rows are clickable. when you click on them the row beneth them containing a hidden div is expanded, exposing a nested table of related data. That works the way I had intended.
The problem is that the last column of the table has an edit button. when the edit button is pressed the row is expanded right before it redirects to edit page. This looks very sloppy. is there any way to remove the event from that column only?
Here is my code. This is a Django Template BTW.
HTML
<table id="exp" class="feedtable table table-hover table-bordered ">
<thead>
<tr>
<th>Scales</th><th>Type</th><th>Edit</th>
</tr>
</thead>
<tbody>
{% for scale in scales %}
<tr>
<td><p class="scalet">{{scale}}<p></td><td>{{scale.calc_type}}</td><td><a href="{% url 'questions:edit_feedback' scale.pk %}" class="btn btn-default">Edit</td>
</tr>
<tr>
<td colspan="3">
<div id="{{scale.pk}}div">
<table id="{{scale.pk}}table" class="feedtable table-hover table-bordered">
{% for question in questions %}
{% if question.scale == scale%}
<tr>
<td>{{question | safe}}</td><td><a class='btn btn-default' href="{% url 'questions:edit_question' question.pk %}">Edit</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
JQuery
$(function() {
$("td[colspan=3]").find("div").hide();
$("tr").click(function(event) {
console.log("hit")
var $target = $(event.target);
$target.closest("tr").next().find("div").slideToggle();
});
});
you can use event.target object and class,
e.g.)
if a column has "a specific class(or attribute)", you can remove the event
$(document).ready(
function(){
$("tr").click(function(event){
console.log($(event.target).hasClass("except"));
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="except">except</td>
<td>data</td>
</tr>
</table>
Related
I have the following table in a flask app. The first column is supposed to render a fully formed linked statement for example:
<img src="/static/assets/img/abc.jpg" width="100" height="100">
The data comes from a query:
Table looks thus:
|img | Title |
-----------------------------------------------
| the <a> script above goes here | some text|
I would like to write the javascript to render the image/link.
<table id="table_id" class="display compact" style="width:100%">
<thead>
<tr>
{% for col in img_list_cols %}
<th>{{col}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in img_list_rows %}
<tr>
{% for row_data in row %}
<td>{{row_data}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
You can use the Jinja safe filter, e.g..
<td>{{row_data|safe}}</td>
I'm at a total loss on how to do this. I'm building a webpage and I need to be able to delete a record from my SQLite database once the user clicks the delete icon on the front end. Can someone please help me figure out how to do this? I have no experience using PHP so any reference to that just won't be helpful. As you can see from the entries page a user will be able to see all entries entered already; each entry_id is unique. If a user clicks delete, then I want the row deleted from the entries page, and also deleted from the DB. If a user clicks the edit button that's another beast, and I'd like to be able to show on click, the populated form in edit mode, and once a user makes changes and click save, then have those changes updated in the DB as well.
Here's my html code:
{% extends "layout.html" %}
{% block title %}
index
{% endblock %}
{% block main %}
{% if msg %}
<div class="alert alert-danger" role="alert"> {{ msg }}
</div>
{% endif %}
<div>
<form method="POST" action="/entries">
<table class="table table-hover table-sm table-bordered">
<thead class="thead-light">
<tr>
<th class="col-auto"> ID </th>
<!--<th class="col-auto" style="display:none;"> entryid</th>-->
<th class="col-auto"> Edit </th>
<th class="col-auto"> Delete </th>
<th class="col-auto">View</th>
<th class="col-auto">Date</th>
<th class="left">Title</th>
<th class="left">Notes</th>
</tr>
</thead>
<tbody >
{% for row in entrylist %}
<tr>
<td id="{{row.entry_id}}"></td>
<!--<td style="display:none;" id="{{row.entry_id}}"> {{row.entry_id}}-->
<td> <a title="Add" data-toggle="tooltip" class="btn" id="{{row.entry_id}}"><i class="bi bi-pencil-fill"> </i></a></td>
<td> <a class="btn" data-toggle="tooltip" title="delete" id="{{row.entry_id}}"><i class="bi bi-trash" style="color:red;"></i></a></td>
<td> <a class="btn" data-toggle="tooltip" title = "view" id="{{row.entry_id}}"><i class="bi bi-journals"></i></a></td>
<td id="{{row.entry_id}}"> {{row.entry_dt}}</td>
<td class="ellipsistd" id="{{row.entry_id}}"> {{row.title }} </td>
<td class="ellipsis" id ="{{row.entry_id}}">{{row.notes }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
{% endblock %}
Here's my flask code:
#app.route("/entries", methods=['GET'])
#login_required
def entries():
if request.method == "GET":
entrylist = db.execute ("SELECT * FROM entries WHERE id = ? AND entry_dt <> '' ORDER BY entry_id", session["user_id"])
# print(entrylist)
return render_template ("entries.html", entrylist = entrylist)
I did as suggested and wrote a delete function on flask that deletes the row from my db. On the front end, i just did a jquery to remove row from the view.
I am using DataTables for my project but its sorting function does not work properly. I have tried every single solutions in here but none of them worked for me as well as it does not show the error in the console. I think in my code there is a jQuery conflict. How can I solve this issue? any help?
<table id="dtBasicExample" class="table table-bordered table-hover contact-list" cellspacing="0"
width="100%">
<thead>
<tr>
{# <th scope="col"><input type="checkbox"></th>#}
<th scope="col">Name</th>
<th scope="col">Company Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
{% for contact in contacts %}
<tbody>
<tr data-id="{{ contact.id }}" class="clickable-row"
data-href="{% url 'contact-detail' contact.id %}"
style="cursor: pointer; ">
{# <th scope="row"><input type="checkbox" id="check"></th>#}
<td>{{ contact.client_name }}</td>
<td>{{ contact.client_company_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.work_phone }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{% csrf_token %}
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
as you can see it is a material bootstrap design datatables. In the example shown it works but when i add to my project it does not.
Your html table is "not valid" (It is valid if you want to create multiple table into an parent table). This can make some issue with Datatable. I think sorting is done, but you do not see it, because it sort by tbody tag and there is one line sorted by tbody. The tbody tags are not sorted only the tr inside
Try to remove the tbody into your loop and export it outside the for loop.
<tbody>
{% for contact in contacts %}
// ...
{% endfor %}
</tbody>
Note: cellspacing="0" is an old version of html. You can replace it by the css property border-spacing
I have an HTML table displaying the titles and sources of news articles. The news articles come from a JSON object. I can't figure out how to make it save the specific article you click the 'submit' button next to (=extract the appropriate element from a JSON array). I'd want to return/save it to some sort of output that I can then store in SQL. Please help?
The table looks like this:
<thead>
<tr>
<th>Article</th>
<th>News Source</th>
</tr>
</thead>
<tbody>
{% for article in articles.articles %}
<tr>
<div id = {{ article.title }}>
<td><a href = {{ article.url }}>{{ article.title }}</a></td>
<td>{{ article.source.name }}</td>
</div>
<td><form method="post"><button class="btn btn-primary" type="submit">Save to profile</button></form></td>
</tr>
{% endfor %}
</tbody>
</table>
I've got the following code in a django template:
{% for item in items %}
<tr onclick="{% url collection:viewitem item_id=item.id %}">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
<td>
<button onclick="{% url collection:edititem item_id=item.id %}" type="button">Edit</button>
<button onclick="{% url collection:removeitem item_id=item.id %}" type="button">Remove</button>
</td>
</tr>
{% endfor %}
However, the button onclick events don't work, because the tr onclick seems to override it. How can I prevent this from happening?
please try the following:
<html>
<body>
<table >
<tr onclick="alert('tr');">
<td><input type="button" onclick="event.cancelBubble=true;alert('input');"/></td>
</tr>
<table>
</body>
</html>
The event.cancelBubble=true will suppress the tr click event
Using event.stopPropagation() will do the trick!
An other approach:
Create a separate row for the button so it wont inherit the tr onclick event of the main row. Something like this:
<tr onclick="doSomething()">
<td rowspan="2">A</td>
<td rowspan="2">B</td>
<td rowspan="2">C</td>
</tr>
<tr>
<td><button type="button">Click</button></td>
</tr>