I'm trying to detect html table cell change on user input. When I click on table cell I can type text in it, but my .change function is not triggered. However on page load when data are populated from database, for every table cell change change function is fired. I can not figure why. Can you help.
My code below:
<div id="table" class="table-editable">
<table id="myTable" style="width:100%" class="table">
<tr>
<th>Id</th>
<th>Link</th>
<th>Naslov</th>
<th>Lokacija</th>
<th>Cijena</th>
<th>Telefon</th>
<th>Posjet</th>
<th>Opis</th>
<th>Prednosti</th>
<th>Nedostaci</th>
<th>Slike</th>
<th>Select</th>
{% for entry in entries %}
</tr>
<tr>
<td>{{ forloop.counter }}</td>
<td><a id="linkHouse_{{ forloop.counter }}" href="{{ entry.link }}">Link na oglas</a></td>
<td contenteditable="true">{{ entry.header }}</td>
<td contenteditable="true">{{ entry.location }}</td>
<td id="priceHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.price }}</td>
<td id="contactHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.contacts }}</td>
<td id="visitedHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.visited }}</td>
<td id="descriptionHouse_{{ forloop.counter }}" contenteditable="true">{% for line in entry.description.splitlines %} {{line}}<br> {% endfor %}</td>
<td id="prosHouse_{{ forloop.counter }}" contenteditable="true" >{% for line in entry.pros.splitlines %} {{line}}<br> {% endfor %}</td>
<td id="consHouse_{{ forloop.counter }}"contenteditable="true">{% for line in entry.cons.splitlines %} {{line}}<br> {% endfor %}</td>
<td >
<a class="fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_fjords_wide.jpg" %}"><img src="{% static "Pic/img_fjords_wide.jpg" %}" alt="" style="width:150px"></a>
<a class="hide fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_lights_wide.jpg" %}"><img src="{% static "Pic/img_lights_wide.jpg" %}" alt=""></a>
<a class="hide fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_mountains_wide.jpg" %}"><img src="{% static "Pic/img_mountains_wide.jpg" %}" alt=""></a>
</td>
<td style="text-align: center; vertical-align: middle;">
<button id="delHouse_{{ forloop.counter }}" onclick="delHouse(this.id)">Delete</button>
<!--<input type="checkbox" name="delete{{ forloop.counter }}">-->
</td>
</tr>
{% endfor %}
</table>
</div>
$(document).ready(function(){
$( "#myTable td" )
.change(function () {
console.log("petar");
var data = this.innerHTML;
console.log("value="+data);
})
.change();
});
Use Javascript's input method.
Or the blur method.
<div contenteditable oninput="console.log(this.innerHTML)">Change me (input)!</div>
<div contenteditable onblur="console.log(this.innerHTML)">Change me (blur)!</div>
IE 6 & 8 and Opera Mini are not supported & IE 9 partial support, but either than that, it works!
If you want global support, check out this thread.
So your code would look like:
$(document).ready(function(){
$( "#myTable td" )
.input(function () {
console.log("petar");
var data = this.innerHTML;
console.log("value="+data);
})
.input();
});
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 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 have a Django application where using wkhtmltopdf I generate a pdf document. I have a section there, like the code below. I want to on each side was exactly 4 texts (objects). But everyone is different and the text comes out uneven arrangement. CSS does not help. How to do it?
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:50px;">
<h3>{% trans 'In progress' %}</h3>
{% for worked_on in worker.worked_on.all %}
<tr>
<td width="33%" align="left" valign="top"> </td>
<td width="67%" class="project-name">
//CONTENT
</td>
</tr>
<tr>
<td class="project-image" width="33%" align="left" valign="top">
//CONTENT
</td>
<td class="project-description" valign="top">
//CONTENT
</td>
</tr>
{% if forloop.counter|divisibleby:"4" %}
<tr>
<td class="project-description" style="margin-bottom:80px;">
<div style="page-break-after: always;"></div>
</td>
</tr>
{% endif %}
{% endfor %}
</table>
maybe some of you know the blueimp's jquery file upload plugin: https://github.com/blueimp/jQuery-File-Upload/ . I have the following problem, I want to hide a part of table with already uploaded files and I can't do it, when I'm doing it on normal table, i'm doing it this way: https://stackoverflow.com/a/215231/1353905.
but when I'm trying to add tbody tag into this table code ( i want to hide rows 9,10,11 - table contains 11 rows):
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { alert(i); %}
{% if(i==8) { %}
<tbody style="display:none;"> // I'm ADDING THIS
{% } %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<img src="{%=file.thumbnail_url%}">
{% } %}</td>
<td class="name">
{%=file.name%}
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% if(i==10) { %}
</tbody> // here are my 3 lines too
{% } %}
{% } %}
</script>
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>