I need to get the previous & next value of the object (col2 from the object) in the same for loop iteration. Below is my index.html code:
<script>
var i = 1;
var j = 0;
</script>
{% for b in obj %}
<tr>
<td>{{ b.col1 }}</td>
<td><span class="wrapped"><span>{{ obj.j.col2 }}</span></span> </td>
<td id='myTable'></td>
<td id='myTable'></td>
<td>{{ b.col5 }}</td>
<td>{{ b.col6 }}</td>
<td>{{ b.col7 }}</td>
</tr>
<script>j=j+1;</script>
{% endfor %}
</table>
views.py:
def display(request):
return render_to_response('index.html', {'obj': my_model.objects.order_by('col2')})
What I tried was that when using: {{ obj.0.col2 }} or {{ obj.1.col2 }}, it displays the value of that cell correctly. However, when using {{ obj.j.col2 }}, it does not display anything. Why is this happening?? Why is it not reading j's value?? When I'm initializing j to 0 outside the loop and am incrementing value of j at the end of the loop as well!!
Related
Just new to use Vue.js and I have a question:
I have a array to build a table. If I double click the table row, the program will call a javascript function to get the selected item by its index.
<div id="vm-table">
<table>
<tr v-for="(item, index) in items" ondblclick="getItem('{{ index }}')">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#vm-table",
data: {
items: []
}
});
</script>
I assume the array "items" already contains a list of items. In the above "tr" line it seems cannot get the "index" value and the value must be used in the inner "td" elements. If I need to get the parameter of index how can I do?
Thanks,
Try this instead :
<tr v-for="(item, index) in items" #dblclick="getItem(index)">
<td>{{ index }}</td>
<td>{{ item.pk }}</td>
<td>{{ item.description }}</td>
</tr>
I am trying to use some value that I get from clicking a button to be loaded in the if statement in my HTML template. but cannot do so.maybe I am doing everything wrong.
I have used var tag and placed my variable inside it but it didn't work when I tried to edit it through javascript code
{% for publication in page.get_children.specific %}
{% if publication.pub_type == <var id="varpubtype">pubtype</var> %}
{% if publication.pub_year == <var id="varpubyear">pubyear</var> %}
<tr>
<td>{{ publication.Authors }}</td>
<td>{{ publication.name }}</td
<td>{{ publication.pub_year }}</td>
<td>{{ publication.pub_journal }}</td>
<td>{{ publication.vol_issue }}</td>
<td>{{ publication.pages }}</td>
</tr>
{% endif %}
{% endif %}
{% endfor %}
here is my script
function toggletable( var pubtypevar)
{
document.getElementById("varpubtype").innerHTML = pubtypevar;
}
function toggleyear( var pubyearvar){
document.getElementById('varpubyear').innerHTML = pubyearvar;
}
when i used var and span tags it showed template error. That
Could not parse the remainder: '
it doesn't seem like that, you have to do the condition on the server not on the client, and the page reload when you click that button,
and then you use condition from server then you implementation on the client
Essentially, I am trying to do the same thing as the writer of this and this
was trying to do.
Which is to dynamically update the values of an html template in a django template via an ajax call.
Both of them managed to fix their issue, however, I am unable to do so after 1.5 days.
index.html
{% extends 'app/base.html' %}
{%load staticfiles %}
{% block body_block %}
<div class="container" >
{% if elements %}
<table id="_appendHere" class="table table-bordered">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>User</th>
<th>Date</th>
</tr>
{% for e in elements %}
<tr>
<td>{{e.A}}</td>
<td>{{e.B}}</td>
<td>{{ e.C }}</td>
<td>{{ e.D }}</td>
<td>{{ e.User }}</td>
<td>{{ e.Date }}</td>
</tr>
{% endfor %}
</table>
{% else %}
No data to display! <br/>
{% endif %}
</div>
{% endblock %}
<script>
var append_increment = 0;
setInterval(function() {
$.ajax({
type: "GET",
url: "{% url 'get_more_tables' %}", // URL to your view that serves new info
data: {'append_increment': append_increment}
})
.done(function(response) {
$('#_appendHere').append(response);
append_increment += 10;
});
}, 1000)
</script>
views.py
def index(request):
elements = ElementFile.objects.all().order_by('-upload_date')
context_dict = {'elements':elements}
response = render(request,'app/index.html',context_dict)
return response
def get_more_tables(request):
increment = int(request.GET.get('append_increment'))
increment_to = increment + 10
elements = ElementFile.objects.all().order_by('-upload_date')[increment:increment_to]
return render(request, 'app/get_more_tables.html', {'elements': elements})
get_more_tables.html
{% for e in elements %}
<tr>
<td>{{e.A}}</td>
<td>{{e.B}}</td>
<td>{{ e.C }}</td>
<td>{{ e.D }}</td>
<td>{{ e.User }}</td>
<td>{{ e.Date }}</td>
</tr>
{% endfor %}
urls.py
urlpatterns = [
path('', views.index, name=''),
path('get_more_tables/', views.get_more_tables, name='get_more_tables'),
]
in the javascript part, I tried:
url: "{% url 'get_more_tables' %}", with and without quotes
If I try to access /get_more_tables/
I get the following error:
TypeError at /get_more_tables/
int() argument must be a string, a bytes-like object or a number, not 'NoneType'
So for some reason, I get nothing, the append_increment is the empty dictionary. But why?
I tried altering the code like, but to no avail:
try:
increment = int(request.GET.get('append_increment'))
except:
increment = 0
Expectation: dynamically loading database
Outcome: error or non-dynamic loading (must refresh manually)
Million thanks to everyone who attempts to help with this.
I encountered an error in replacing my row in my JQuery. This is my code snippet for my JQuery:
var newtr = '<td>'+data.row.createdDate+'</td>'+
'<td>'+data.row.emergencyOrderID+'</td>'+
'<td>'+data.row.firstName+' '+data.row.lastName+'</td>'+
'<td>('+data.row.latitude+','+data.row.longitude+')</td>'+
'<td>'+data.row.pickupLocation+'</td>'+
'<td>'+data.row.hospitalName+'</td>'+
'<td>'+data.row.driverName+'</td>'+
'<td>'+data.row.emergencyStatus+'</td>';
//$('#tbIDOrder-'+data.row.emergencyOrderID).html('test');
//alert('#tbIDOrder-'+data.row.emergencyOrderID);
$('#tbIDOrder-'+data.row.emergencyOrderID).parent().replaceWith(newtr);
and this is my row:
<tr id="tbIDOrder-{{$o->EmergencyOrderID}}">
<td>{{ $o->CreatedDate }}</td>
<td>{{ $o->EmergencyOrderID }}</td>
<td>{{ $o->FirstName }} {{ $o->LastName }}</td>
<td>({{ $o->Latitude }}), ({{ $o->Longitude }})</td>
<td>{{ $o->PickupLocation }}</td>
<td>{{ $o->HospitalName}}</td>
<td>{{ $o->DriverName}}</td>
<td>{{ $o->EmergencyStatus }}</td>
</tr>
am i missing something? If it helps, im running this code with Pusher in Laravel :) thanks for your time.
EDIT:
I replaced the script to:
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
but it still didnt work
As $('#tbIDOrder-'+data.row.emergencyOrderID) refers to TR, You can directly use .html(htmlString) to update the content.
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
Here is an example
$('#tbIDOrder-1').html('<td>New Date</td>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tbIDOrder-1">
<td>CreatedDate</td>
</tr>
</table>
HTML
<form method="post">
{% csrf_token %}
<tr id = "{{ x.id }}">
<td>{{ x.name }}</td>
<td>{{ x.sth }}</td>
<td>{{ x.sth_else }}</td>
<td><button type="submit" name="edit_btn">edit</button></td>
</tr>
</form>
jQuery
$('form').on('submit', function(event){
event.preventDefault();
console.log("Executing script for edit button pressing")
x = $(this).children().first().attr('id');
console.log(x)
});
I'm trying to extract the id from the tr in the html, but whenever i get on the page and see the console output i get: undefined. Any ideas?