{%for x in read%}
{%if request.user == user%}
<div class="card " >
<h5>
<div class="card-header bg-info">
Dr.{{i.name}}
</div>
</h5>
<div class="card-body">
<h6 class="card-title ">Appointment Date : {{x.appoinment_date}}</h6>
<h6 class="card-title">Age : {{x.age}}</h6>
<h6 class="card-title">Digree : {{x.disease}}</h6>
<h6 class="card-title">Email : {{x.email}}</h6>
</div>
</div>
{%endif%}
{%endfor%}
i am using code above but i am getting data of all users instead of current user
I'm not familiar with your application, but it seems like the if-statement relates to some variable 'user', while in the table everything relates to 'x.something'. If what you're trying to do is filter for rows that are only related to the current user, you may want to check
{%if request.user == x.user%}
Related
I am using a Django List View, and I am trying to iterate through multiple objects and display percentage values in a Chart.JS gauge.
However, although I am iterating the names of the gauge id's by using a for loop counter, I am only ever getting the first iteration of the chart.js object rendering on my screen. My initial thoughts are that similar to how I am dynamically creating new canvas ids for the chart.js objects, I should be doing a similar thing for the variable I am trying to pass into the chart object e.g. reduction overall, but I am not having any luck. Your feedback is welcome.
Views.py
class PerformanceDetailView(ListView):
template_name = 'performance_detail.html'
model = Performance
context_object_name = 'performance'
def get_queryset(self, **kwargs):
code = self.kwargs.get('code')
return Performance.objects.filter(code=code)
Performance_detail.html
<section class="projects pt-4 col-lg-12">
{% for item in performance %}
<div class="container-fluid pt-2 col-lg-12">
<!-- Project--><div class="project" >
<div class="row bg-white has-shadow" style="height: 14rem">
<div class="left-col col-lg-2 d-flex align-items-center justify-content-between">
<div class="project-title d-flex align-items-center">
<div class="has-shadow"><img src="{% static 'img/avatar-2.jpg' %}" alt="..." class="img-fluid"></div>
</div>
</div>
<div class="right-col col-lg-2 align-items-center vertical-center">
<div class="text">
<h3 class="h2 pt-2">{{item.brand}} {{item.style}}</h3>
<p class="text-muted">{{item.package_type| capfirst}} package, round {{item.testing_round}}</p>
<p class="text-muted">Item size: {{item.size}}</p>
</div>
</div>
<div class="right-col col-lg-8 align-items-center vertical-center">
<div class="row mt-5">
<div class="col-md-3">
<div class="gauge-container">
<canvas id="gauge1-{{ forloop.counter }}" class="gauge-canvas"></canvas><span id="gauge1Value-{{ forloop.counter }}" class="gauge-label"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{ item.reduction_overall|json_script:"reduction_overall" }}
{{ for_loop_counter|json_script:"for_loop_counter" }}
{% endfor %}
</section>
{% endblock content %}
Block JS within package_detail.html
<!-- Gauge.js-->
<script src="{% static 'vendor/gaugeJS/gauge.min.js' %}"></script>
<script>
$(function () {
var reduction_overall = JSON.parse(document.getElementById('reduction_overall').textContent);
var for_loop_counter = JSON.parse(document.getElementById('for_loop_counter').textContent);
// Gauges
var gauge1 = document.getElementById('gauge1-'+for_loop_counter);
opts.colorStop = "#864DD9";
var gaugeObject1 = new Donut(gauge1).setOptions(opts);
gaugeObject1.maxValue = 100; // set max gauge value
gaugeObject1.setMinValue(0); // set min value
gaugeObject1.set(reduction_overall); // set actual value
gaugeObject1.setTextField(document.getElementById("gauge1Value-" + for_loop_counter));
});
</script>
{% endblock js %}
This was solved by including the JavaScript in the main block content and dynamically naming the gauge elements themselves.
var func_name = "container-{{forloop.counter}}";
func_name = new Donut(gauge1).setOptions(opts);
I posted a full example to a similar problem here Chart JS and Django loop
In a Django v3.x app I would like to display a list of uploaded file names (e.g. images) in the left hand side of the screen. When a user clicks on one of those, I'd like to display the actual file/image on the right hand side of the screen. I am still new to Django and have used both ListView and DetailView separately, but not in such a combination. I'm not sure how this can be achieved.
Using a little Bootstrap magic, I can create a split screen easily. Hence, my template would look somehow like this:
<div class="row">
<div class="col-md-5 left">
{% for image in images %}
<div class="card">
<h4>{{ image.url }}</h4>
View
</div>
{% endfor %}
</div>
<div class="col-md-5 right">
{# TODO: When the user clicks on the View url above, then I'd
like to load the actual image here on the right hand side of the
screen inside this div-tag. #}
</div>
</div>
Question 1: How can I achieve loading a selected image from a list? Can I still use ListView and DetailView, or do I need to write my own View logic?
Question 2: Ideally, I'd like to NOT re-send the whole page from the server to the client, because the list of images in the lefthand-side could potentially be long and require pagination. So, when the user clicks View, then, ideally, I'd like to load only the document from the server. Is this somehow feasible?
Well I have made a sample code and you can refer to it and get some idea.
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails"
data-ride="carousel">
<!--Slides-->
<div class="row">
<div class="col-lg-8">
<div class="carousel-inner" role="listbox">
{% for latest in latest_course %}
<div class="carousel-item {% if forloop.counter0 == 0 %}active{% endif %}">
<img class="d-block w-100" src="{{latest.poster.url}}" alt="First slide">
</div>
{% endfor %}
</div>
</div>
<!--/.Slides-->
<div class="col-lg-4">
<ol class="slider_list">
{% for latest in latest_course %}
<li data-target="#carousel-thumb" data-slide-to="{{forloop.counter0}}"
class="active"> <img class="img-thumbnail" width="100px" height=100px src="
{{latest.poster.url}}"
class="img-fluid"></li>
{% endfor %}
</ol>
</div>
and the output looks like this
Here, you can see the list on the right side and when you select an item the selected item loads in the left side. This way you can style your template the way you want.
basically you want to show the selected item from the list on the other side like a slideshow
I am having model called furniture and I am having template and also wrote my views and I want to the single phrase from the database
My views.py
def project3(request):
furn=furniture.objects.all()
return render(request, 'project3.html',{'furniture':furn});
My template is:
<div class="col-4">
<h6 class="display-6 mt-3"><b><center>{{furniture.phrase}}</center></b></h6>
<p class="demo"><center>I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6 mt-3">{{furniture.phrase}}</b></h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6 mt-3"><b>{{furniture.phrase}}</b></h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
My models.py:
class furniture(models.Model):
id=models.IntegerField(primary_key=True)
phrase=models.CharField(max_length=60,default='111111')
def __str__(self):
return self.phrase
There are three phrases in the database but i am rendering them and I am not getting them in the webpage please help me out from this?
Trying to set variable in django template, and make a simple rule to update it after iteration. Here is my template:
{% for adv in advs %}
<div class="media-item big" style="top: 18%;left:{% cycle '304' '1078' %}px;">
<div class="media-item__tags">
{{ adv.year }}
{{ adv.payer}}
</div>
<div class="media-item__content">
<div class="media-item__background">
<div class="media-item__canvas">
<div class="media-item__canvas-background" style="background-image: url({{adv.image.url}})"></div>
</div>
<h2 class="topic white upcase fixed-size">{{ adv.name }}</h2>
Смотреть проект
</div>
</div>
</div>
In first div i need to make different 'left:' value. I want to make rule: after every iteration, value changes from base=304 to base+774 px. I tryed to do it somehow with {% cycle %} but it doesnt work for me, also tryed to set variables with {% with %} tag, but didnt find any information about how to update them.
You can set the style by multiplying the current counter from 0...n with 774 and add base value 304. For this, you'll need a custom template tag.
Create a templatetags directory in your app. Add an empty __init__.py and multiply_add.py.
multiply_add.py
from django import template
register = template.Library()
#register.simple_tag
def mul_add(a, b, base_value):
return (a * b) + base_value
template.html
{% load multiply_add %}
{% for adv in advs %}
<div class="media-item big" style="top: 18%;left:{% multiply_add forloop.counter0 774 304 %}px;">
<div class="media-item__tags">
{{ adv.year }}
{{ adv.payer}}
</div>
<div class="media-item__content">
<div class="media-item__background">
<div class="media-item__canvas">
<div class="media-item__canvas-background" style="background-image: url({{adv.image.url}})"></div>
</div>
<h2 class="topic white upcase fixed-size">{{ adv.name }}</h2>
Смотреть проект
</div>
</div>
</div>
I have a template structure similar to this:
#X_List.html
<div class="row">
{% include './X_List_Table.html' %}
</div>
<div id="confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="testmodal" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content"></div>
</div>
</div>
#X_List_Table.html
<table>
<thead>
<tr>
<th>Desc</th>
<th>Activate</th>
</tr>
</thead>
<tbody>
{% for item in x_list %}
<tr>
<td>{{ item.id }}</td>
<td><a data-toggle="modal" href="{% url 'x:x_quantity' item.id %}" data-target="#confirm">Click me</a></td>
</tr>
{% endfor %}
</tbody>
</table>
My view is defined as:
#views.py
def x_quantity(request, id):
return render(request, 'modal.html', {'quantity': X.objects.filter(pk=id).count()}
and the modal.html:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3>Attention</h3>
</div>
<div class="modal-body">
<p>The number of elements is {{ quantity }}</p>
</div>
<div class="modal-footer"></div>
The problem is:
Supposing that I have 2 elements in the table, their urls would be:
'x/x_quantity/1'
'x/x_quantity/2'
Consider that for these elements:
One returns a QuerySet with atleast 1 element
One returns an empty QuerySet
When I click on the link, it should run the view, get the quantity based on the id of the element, return it as a context variable to the modal so it can be displayed.
The problem is:
When I click on a link, the view is being called with the id of the element, which can be confirmed by looking at the server shell [06/Apr/2018 17:00:23] "GET /x/x_quantity/1 HTTP/1.1" 200 898.
If I click on the other element, THE VIEW IS NOT BEING CALLED, there is no request going out.
What I intend to do is to display a modal with the quantity of the element clicked.
Is this a confusion on my part regarding how the {% url 'app:app_view' var %} should behave on a href or I'm not supposed to do this and should, instead, use AJAX?
Perhaps this is related with "refreshing" context variables as well?
The explanation for the behavior you are seeing can be found in the Bootstap documentation:
If a remote URL is provided, content will be loaded one time via
jQuery's load method and injected into the .modal-content div. If
you're using the data-api, you may alternatively use the href
attribute to specify the remote source. An example of this is shown
below:
If you want to use the same modal to load different content, you have to use Ajax.
A (quite ugly) workaround would be to render a modal for each item in x_list. Just be aware that the value doesn't get updated if you open the same modal twice.
Let me first clarify that before this example I have never used Bootstrap. I found your question interesting so I played a little bit with Bootstrap CDN. Also I do not use a lot of Javascript so everyone feel free to correct any bad practices.
I think what you want is doable using AJAX so here is my solution:
I changed a link to a button because all the modal examples had buttons not links :)
#X_List.html
<table>
<thead>
<tr>
<th>Desc</th>
<th>Activate</th>
</tr>
</thead>
<tbody>
{% for x in x_list %}
<tr>
<td>{{ x.id }}</td>
<td><button id="{{ x.id }}" type="button" class="btn btn-info modal-btn">Click me</button></td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">× </button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Javascript (you will need js-cookie - I used CDN) passes the id to the server side and then shows received quantity at the end in a modal.
$(document).ready(function() {
$(".modal-btn").click(function(event) {
var x_id = $(event.target).attr('id');
$.ajax({
url : "/ajaxquantity/",
type : "POST",
dataType: "json",
data : {
x_id : x_id,
csrfmiddlewaretoken: Cookies.get('csrftoken')
},
success : function(json) {
var quantity = json.quantity;
$(".modal-title").text('Id: ' + x_id);
$(".modal-body").text('Quantity: ' + quantity);
$('#myModal').modal('show');
},
error : function(xhr,errmsg,err) {
alert(xhr.status + ": " + xhr.responseText);
}
});
return false;
});
});
Then you need to add this line into urlpatterns list:
url(r'^ajaxquantity/$', views.ajaxquantity, name='ajaxquantity')
And finally the server side. I do not know how your model looks like so here I used your query from the question.
# views.py
def ajaxquantity(request):
if "x_id" in request.POST:
response_dict = {}
x_id = request.POST.get('x_id')
quantity = X.objects.filter(pk=id).count()
response_dict.update({'quantity': quantity})
return JsonResponse(response_dict)
else:
return render(request, 'yourapp/X_List.html')
So this worked for me (with a little different QuerySet). It is very important that Jquery is only defined once!!!
Keep in mind that this is a minimal working example.