I'm building a list of students by each class in the grade. I have a folder full of profile pictures for students downloaded into my img folder and a column within my model that maps the details (name, class, age, etc.) to the image name.
How do I tell my table to bring in the appropriate img for each student?
Below I have my code working to use a single image as a constant (e.g. student1's picture shows up for everyone).
list.html:
<table class="table table-hover" id="table-ajax">
<thead class="thead-light">
<tr>
{% comment %} <th></th> {% endcomment %}
<th style="width: 50px; text-align: center;"></th>
<th>{{ object_list|verbose_name:'field:name' }}</th>
<th>{{ object_list|verbose_name:'field:hometown' }}</th>
<th>{{ object_list|verbose_name:'field:birthday' }}</th>
<th>{{ object_list|verbose_name:'field:race' }}</th>
<th>{{ object_list|verbose_name:'field:rank' }}</th>
<th style="width: 50px; text-align: center;">Pictures</th>
<th style="width: 160px; text-align: center;">Actions</th>
</tr>
</thead>
<tbody class="order" data-url="{% url 'cms:reorder' model_name %}">
{% include 'app/partials/pick_list_partial.html' %}
</tbody>
partial-list.html:
{% for pick in object_list %}
<tr id="{{ pick.pk }}">
<td><img src="{% static 'img/student1.jpg' %}" width="50" height="50"></td>
<td>{{ pick.name }}</td>
<td>{{ pick.hometown }}</td>
<td>{{ pick.birthday }}</td>
<td>{{ pick.race }}</td>
<td>{{ pick.rank }}</td>
<td style="text-align: center;">
<a href="{% url 'app:file-list' pick.pk %}" class="btn btn-outline-success btn-sm border-0" title="Files">
<i class="fa fa-copy"></i></a></td>
<td style="text-align: center;">
<a href="{% get_object_url 'detail' pick %}" class="btn btn-outline-warning btn-sm border-0 ajax-load-form" title="View">
<i class="fa fa-eye"></i></a>
<a href="{% get_object_url 'update' pick %}" class="btn btn-outline-info btn-sm border-0 ajax-load-form" title="Edit">
<i class="fa fa-edit"></i></a>
<a href="{% get_object_url 'delete' pick %}" class="btn btn-outline-danger btn-sm border-0 ajax-load-form" title="Delete">
<i class="fa fa-trash-alt"></i></a>
<a href="" class="btn btn-sm border-0 reorder" title="Reorder">
<i class="fa fa-sort text-secondary"></i></a>
</td>
</tr>
{% empty %}
<tr class="table-warning nosort">
<td colspan="100%" class="text-center"><small class="text-muted">No {{ model_verbose_name_plural|lower }}</small>
</td>
</tr>
{% endfor %}
Assume, you have property image_path in your pick object that equals to img/student1.jpg. Then you should use it like this:
{% for pick in object_list %}
<tr id="{{ pick.pk }}">
<td><img src="{% static pick.image_path %}" width="50" height="50"></td>
<td>{{ pick.name }}</td>
<td>{{ pick.hometown }}</td>
<td>{{ pick.birthday }}</td>
<td>{{ pick.race }}</td>
<td>{{ pick.rank }}</td>
<td style="text-align: center;">
<a href="{% url 'app:file-list' pick.pk %}" class="btn btn-outline-success btn-sm border-0" title="Files">
<i class="fa fa-copy"></i></a></td>
<td style="text-align: center;">
<a href="{% get_object_url 'detail' pick %}" class="btn btn-outline-warning btn-sm border-0 ajax-load-form" title="View">
<i class="fa fa-eye"></i></a>
<a href="{% get_object_url 'update' pick %}" class="btn btn-outline-info btn-sm border-0 ajax-load-form" title="Edit">
<i class="fa fa-edit"></i></a>
<a href="{% get_object_url 'delete' pick %}" class="btn btn-outline-danger btn-sm border-0 ajax-load-form" title="Delete">
<i class="fa fa-trash-alt"></i></a>
<a href="" class="btn btn-sm border-0 reorder" title="Reorder">
<i class="fa fa-sort text-secondary"></i></a>
</td>
</tr>
{% empty %}
<tr class="table-warning nosort">
<td colspan="100%" class="text-center"><small class="text-muted">No {{ model_verbose_name_plural|lower }}</small>
</td>
</tr>
Related
I'm having issues when it comes to using some attributes with Django and TailwindCSS.
Let's take this table for example:
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-lg text-left text-gray-500 rounded-2xl mt-4 dark:text-gray-400">
<thead class="rounded-2xl text-lg text-white uppercase bg-[#68BA9E] dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Report title
</th>
<th scope="col" class="px-6 py-3">
Company
</th>
<th scope="col" class="px-6 py-3">
Brand (if any)
</th>
<th scope="col" class="px-6 py-3">
Go to report
</th>
</tr>
</thead>
<tbody>
{% for report in reports %}
<tr class="bg-white border-b text-center dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row"
class="h-19 px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{ report.title }}
</th>
<td class="px-6 py-4">
{{ report.company }}
</td>
<td class="px-6 py-4">
{% if report.brand %}
{{ report.brand }}
{% else %}
-
{% endif %}
</td>
<td class="px-6 py-4">
Access
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
Gives the following:
But when I try to change the bg-color from:
<thead class="rounded-2xl text-lg text-white uppercase bg-[#68BA9E] dark:bg-gray-700 dark:text-gray-400">
To:
<thead class="rounded-2xl text-lg text-white uppercase bg-red-700 dark:bg-gray-700 dark:text-gray-400">
The new color won't load. It gives:
I don't understand why I'm getting nothing. In my configuration, following tasks are running:
The server is running with python manage.py runserver
TailwindCSS is running with python manage.py tailwind start
Livereload is running with python manage.py livereload
I also clear my cache with CMD+Shift+R.
I'm also having troubles with some margins and paddings that won't apply. I even bought the plugin Devtools for TailwindCSS. When I edit an attribute with Chrome inspector and this plugin, it's working. But when it's in my code, the new color won't load.
Has this ever happened to you?
Update:
Here is the complete code:
{% extends 'base.html' %}
{% block content %}
<div class="flex-1 pt-8 pb-5 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="w-100 mb-10">
<div>
{% if nb_reports == 0 %}
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none"
viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2" aria-hidden="true">>
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">No reports</h3>
<p class="mt-1 text-sm text-gray-500">Get started by creating a new report.</p>
<div class="mt-6">
<a href="{% url 'tool:create-report' %}"
class="inline-block items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-xl text-white bg-[#195266] hover:bg-[#23647a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
New report
</a>
</div>
</div>
{% else %}
<div>
<h2 class="text-xl leading-6 font-medium text-gray-900">Create report</h2>
<p class="mt-1 text-sm text-gray-500">Find all your created reports below.</p>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-lg text-left text-gray-500 rounded-2xl mt-4 dark:text-gray-400">
<thead class="rounded-2xl text-lg text-white uppercase bg-red-700 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Report title
</th>
<th scope="col" class="px-6 py-3">
Company
</th>
<th scope="col" class="px-6 py-3">
Brand (if any)
</th>
<th scope="col" class="px-6 py-3">
Go to report
</th>
</tr>
</thead>
<tbody>
{% for report in reports %}
<tr class="bg-white border-b text-center dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row"
class="h-19 px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{ report.title }}
</th>
<td class="px-6 py-4">
{{ report.company }}
</td>
<td class="px-6 py-4">
{% if report.brand %}
{{ report.brand }}
{% else %}
-
{% endif %}
</td>
<td class="px-6 py-4">
Access
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
It is working fine for me. YOu can see here for the code here .
If the bg class is working for any custom color, then it should also work with red-700. Else you can check if there's any typo.
You can also add ! likr this !bg-red-700 to make this class important.
Lastly try to restart the server,
We finally managed to solve this issue.
The problem was that I ran python manage.py collectstatic which created the following directory : static > css > dist > styles.css. django-tailwind created the same repository under the theme folder. Every time I tried to restart the server, the wrong styles.css was taken into account. So by changing the name of the first folder, it enabled me to load the correct CSS file.
I solved mine by changing the templates directory in my settings.py file from the template folder I was using before adding tailwind to the theme/templates folder that was created when setting up tailwind.
in settings.py file from this:
TEMPLATES = [
{ ...,
'DIRS': ['templates'],
...,
}
],
to this:
TEMPLATES = [
{ ...,
'DIRS': ['theme/templates'],
...,
}
]
I am building a basic api based website as I was going to display some info om page and was checking for a condition i encountered --
jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'endif'. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.
Below is the palatte I copied form Bootstrap and was modifying and then the error happened -- And Yeah This is my first time posting question here as you can tell!
{% include "header.html" %}
{% block contnet %}
<div class="container-fluid">
<div class="row row-dark">
<div class="col px-2 py-5">
<h6 class="px-2 py-3">Click to Know Upcoming Events</h6>
<a href="{{ url_for('upcoming_events') }}"
><button type="button" class="btn btn-dark mx-2 my-3">Events</button></a
>
</div>
</div>
<div class="row">
<div class="col col-lg-4 col-md-6">
<table class="table table-borderless py-5 table-light">
<thead>
<tr class="table-light">
<th scope="col">Batting</th>
<th scope="col">Bowling</th>
<th scope="col">Wickets</th>
<th scope="col">Over</th>
</tr>
</thead>
<tbody>
{% if error %} # <========
<p>{{ error }}</p>
{% endif %} <======= Here is the error traceback
<tr>
<th scope="row"></th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
You close the "if" twice ({% endif %}) but only open one...
Try this:
Click to Know Upcoming Events Events Batting Bowling Wickets Over
{% if error: %}
{{ error }}
{% endif %}
Mark Otto #mdo 2 Jacob Thornton #fat 3 Larry the Bird #twitter
{% endblock %}
You can move the {% endif %} where you want
I have a function in my view.py:
#login_required(login_url='login')
def gpd(request,pk):
# get gpd by id
current_gpd = get_gpd(pk)
# get current campaign year #TODO check types
current_campaign = get_campaign(current_gpd.gpd_year)
# get all corporate goals for current campaign
corp_goals = CorporateGoal.objects.filter(gpd_year=current_campaign.year)
compl_weight = []
for goal in corp_goals:
compl_weight.append(goal.corp_factor_weight*current_gpd.bonus.corporate_component//100)
corporate_goals = zip(corp_goals, compl_weight)
if is_manager(request)!=None:
team = get_team(request)
context = {'gpd':current_gpd,
'corporate_goals':corporate_goals,
}
return render(request, 'app/gpd_forms/form_gpd.html', context)
else:
context = {'gpd':current_gpd,
'corporate_goals':corporate_goals,
}
return render(request, 'app/gpd_forms/form_gpd.html', context)
As you can see, in context I have corporate_goal.
My form_gpd.html:
{% extends 'app/navbar/main.html' %}
{% load static %}
{% block content %}
{% include 'app/slidebar/gpd_form_slidebar.html' %}
<div class="container" style="background-color:white">
<div class="row">
<div id="section2" class="container-fluid">
{% include 'app/gpd_blocks/corporate_goal.html' %}
</div>
</div>
<hr />
</div>
<div class="container" style="background-color:white">
<div class="row">
<div id="section5" class="container-fluid">
{% include 'app/gpd_blocks/summary.html' %}
</div>
</div>
<hr />
</div>
</div>
{% endblock %}
for example in corporate block I am executing next:
{% load static %}
{% block content %}
<div class="row" id="super">
<p> </p>
</div>
<div class="row" id="super">
<div class="col-11" style="color: ivory; font-weight: bold; font-size: 1.3em;">
CORPORATE GOALS BLOCK
</div>
</div>
<div class="row" id="super">
<p> </p>
</div>
{% for goal, compl_weight in corporate_goals %}
<hr style="height:2px;border:none;color:rgb(87, 124, 161);background-color:rgb(87, 124, 161);" />
<!-- Corporate goal section-->
<div class="row">
<div class="col">
Corp. Goal: {{ goal.corp_goal_title }}
</div>
</div>
<div class="row">
<div class="col-8">
<div>
{% if goal.corp_factor_rate %}
<p style="color:mediumspringgreen">rated</p>
{% else %}
<p style="color:indianred">unrated</p>
{% endif %}
</div>
</div>
<div class="col-3">
<div style="margin-inline-start:auto">
{{compl_weight}} % of total score
</div>
</div>
</div>
<!-- Tabs for details-->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#det1{{ goal.id }}">Goal Details</a></li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#det2{{ goal.id }}">Other Details</a></li>
</ul>
<!-- Tabs content for details-->
<div class="tab-content" >
<!--First tab-->
<div id="det1{{ goal.id }}" class="tab-pane fade show active">
<div class="row">
<!--Column 1-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Start Date</th>
<td width="50"></td>
<td>{{ goal.start_date }}</td>
</tr>
<tr>
<th>Weight</th>
<td width="20"></td>
<td>{{ goal.corp_factor_weight }} %</td>
</tr>
<tr>
<th><p> </p></th>
</tr>
<tr>
<th style="color:dimgray">Goal description</th>
<td width="18"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="row">
<textarea class="form-control" readonly title="Description" style="background-color:aliceblue !important;">{{goal.corp_goal_description}}</textarea>
</div>
</div>
<!--Column 2-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Due Date</th>
<td width="50"></td>
<td>{{ goal.end_date }}</td>
</tr>
<tr>
<th>Factor Rate</th>
<td width="50"></td>
<td>
{% if goal.corp_factor_rate %}
{{ goal.corp_factor_rate }}
{% else %}
<div style="color:mediumspringgreen; font-weight: bold;">ongoing...</div>
{% endif %}
</td>
</tr>
<tr>
<th><p> </p></th>
</tr>
<tr>
<th style="color:dimgray">Goal comment</th>
<td width="18"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="row">
<textarea class="form-control" readonly title="Comment" style="background-color:aliceblue !important;">{{goal.corp_goal_comment}}</textarea>
</div>
</div>
</div>
</div>
<!--Second tab-->
<div id="det2{{ goal.id }}" class="tab-pane fade" style="margin-top:20px;">
<p>Factor for Goal Achievement:</p>
<table class="table">
<tbody>
<tr>
<th>Factor</th>
<td>0</td>
<th>Description</th>
<td>{{ goal.corp_factor_0 }}</td>
</tr>
<tr>
<th>Factor</th>
<td>1</td>
<th>Description</th>
<td>{{ goal.corp_factor_1 }}</td>
</tr>
<tr>
<th>Factor</th>
<td>2</td>
<th>Description</th>
<td>{{ goal.corp_factor_2 }}</td>
</tr>
<tr>
<th>Factor</th>
<td>3</td>
<th>Description</th>
<td>{{ goal.corp_factor_3 }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<br />
{% endfor %}
{% endblock %}
And it works perfectly. But when in last block summary I want to use corporate_goals one more time - I have nothing on my page, looks like corporate_goals is not exist.
my summary.html
{% load static %}
{% block content %}
<div class="row">
<p>123</p>
</div>
<div class="row">
{% for goal, compl_weight in corporate_goals %}
{{ goal.corp_goal_title }}
{% endfor %}
</div>
<div class="row">
<p>123</p>
</div>
{% endblock %}
Even If I copy all my code from corporate_goal.html into summary - I will have nothing. Why ?
I think that the problem is that your html structure has no sense. You have three {% block content %}. Please, delete the content blocks of your include files (corporate_goal.html and summary.html) and check if this is the problem. I think that one of your content block is overriding the other one.
Just to clarify, when you use the "include tag" is like you were pasting the code from other file. So imagine the result. You have a block content that contains two other block contents inside it.
My problem was in zip objects. When we are iterating through a zip object it is exhausted and you cannot iterate through it again. So, solution is corporate_goals = list(zip(corp_goals, compl_weight)). Anyway, thank you, #LaCharcaSoftware, for the advice, I've changed my structure to avoid duplication with block content.
I have a table of these collapsible cards with dynamic content in them. The code I have taken from bootstrap looks like this:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
Problem
But as you can see, each collapse is controlled by this attribute multiCollapseExample1. In my django template, when I use this, on clicking any of the close button, only the first card collases because it has a static value of 1. How can I give it a dynamic value so every card opens and closes correctly? Reason I am asking is because my code is pretty complicated and is return about 10+ parameters from the views.py function, and I am iterating a dictionary of dictionaries to print all the values in the format I want. For that reason, I have about 4-5 nested for loops, and also an if statement which checks if the if looper counter is same as the parent's loop counter. I am not able to undertand how I can simple solve this problem.
This is my actual full code:
<table class="table mb-0 table-striped loadingplan">
<thead>
<tr>
<th>ID</th>
<th>Vehicles</th>
<th>Gross Weight</th>
<th>Route</th>
<th>Route Distance</th>
<th>Route TAT</th>
<th>ETD</th>
<th>ETA</th>
<th></th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for d,t,r,y,w,f in open_route_info %}
{% for k,v in open_trucks.items %}
{% if forloop.counter == forloop.parentloop.counter %}
<td class="align-middle">YNT1151<br>
<small class="align-right">{{ f }}% Filled</small>
</td>
<td>
{% for x in v %}
{% for y,z in x.items %}
{{ y.display_name }}
{% endfor %}
{% endfor %}
</td>
{% for truck,value in v.items %}
<td class="align-middle">{{ truck }} {{ value }}<br>o
<a href="#">
<small>Download Loading Plan {{ value.pk }}</small>
</a>
</td>
{% endfor %}
<td class="align-middle">{{ w }}KG</td>
<td class="align-middle">{{ k }}</td>
<td class="align-middle">{{ d }} KM</td>
<td class="align-middle">{{ t }}</td>
<td class="align-middle">{{ y }}</td>
<td class="align-middle">{{ scheduled_date }}</td>
<td class="align-middle">
<button class="btn" type="button" data-toggle="collapse"
data-target="#multiCollapseExample2" aria-expanded="false"
aria-controls="multiCollapseExample2"><img
src="{% static 'img/cardopen.svg' %}" alt="card open"></button>
</td>
<td class="align-middle">Raise RFQ
</td>
<tr class="collapse multi-collapse" id="multiCollapseExample2">
<td colspan="5">
<table class="table table-bordered">
<thead>
<tr>
<th>SKU ID</th>
<th>SKU Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{% for x in v %}
{% for y,z in x.items %}
{% for w in z %}
<tr>
<td>{{ w.name }}</td>
<td>{{ w.pid }}</td>
<td>{{ w.quantity }}</td>
</tr>
{% endfor %}
{% endfor %}
{% endfor %}
</tbody>
</table>
</td>
<td colspan="5" class="align-middle">
<div class="card card-body iframecard">
<iframe src="{{ r }}"></iframe>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
{% endfor %}
</tbody>
</table>
What I want
All I want to do is, replace multiCollapseExample2 with a dynamic variable which is the same length as the number of items. I tried using a simple loop on a list which has the length as the number of items, but it did not work probably because of the if statement {% if forloop.counter == forloop.parentloop.counter %}.
Looks like you can use the 2 for-loops and their variables to create an unique id for your cards.
Something like
data-target="#multiCollapse{{d}}{{t}}{{k}}{{v}}"
Where d,t is from outer for-loop and k,v is from the inner loop.
HI I have very strange problem .
Here is my template
<table class="table table-striped table-condensed tablesorter" id="myTable">
<thead>
<tr>
<th>Store</th>
<th>Image</th>
<th>Price(USD)</th>
<th>Manufacturer</th>
<th>Model</th>
<th>Shipping</th>
<th>Replacement</th>
<th>Details</th>
</tr>
</thead>
<tbody>
{% for x in result_amazon|slice:"1" %}
{% if forloop.first %} <tr>
<td>
<a href="" target="_blank">
<img height="85" width="110" src={% static "images/Amazon-Logo.jpg" %} alt="">
</a>
</td>
<td><img src={{x.medium_image_url}} alt=""></td>
<td><strong><span class="WebRupee"></span>
{% for y in x.list_price %}
{% if y.price != 'None'%}
{{y}}
{% endif %}
{% endfor %}</strong>
</td>
<td>{{x.manufacturer}}</td>
<td>{{x.model}}</td>
<td>Rs. 99</td>
<td>Out of Stock</td>
<td>
<a href="{{x.detail_page_url}}" class="btn btn-mini btn-primary trackinfo" rel="7###17205" title="Visit Store" target="_blank">
Visit Store
</a>
</td>
</tr>
{% endif %}
{% endfor %}
{% for x in result_bestbuy.products %}
{% if forloop.first %}
<tr>
<td>
<a href="">
<img height="85" width="110" src={% static "images/bestbuy.gif" %} alt="">
</a>
</td>
<td><img style="height: 168px;" src={{x.image}} alt=""></td>
<td><strong><span class="WebRupee"></span>{{x.regularPrice}}</strong></td>
<td>{{x.manufacturer}}</td>
<td>{{x.modelNumber}}</td>
<td>{% if x.freeShipping %}Free Shipping {% else %}{{x.shippingCost }}{% endif %}</td>
<td>14 Days</td>
<td>
<a href="{{x.url}}" class="btn btn-mini btn-primary trackinfo" rel="27###17205" title="Visit Store" target="_blank">
Visit Store
</a>
</td>
</tr>
{% endif %}
{% endfor %}
{% for x in result_amazon %}
{% if not forloop.first %}
<tr>
<td>
<img height="85" width="110" src={% static "images/Amazon-Logo.jpg" %} alt="">
</a>
</td>
<td><img src={{x.medium_image_url}} alt=""></td>
<td><strong><span class="WebRupee"></span>
{% for y in x.list_price %}
{% if y.price != 'None'%}
{{y}}
{% endif %}
{% endfor %}
</strong>
</td>
<td>{{x.manufacturer}}</td>
<td>{{x.model}}</td>
<td>Rs. 99</td>
<td>Out of Stock</td>
<td>
<a href="{{x.detail_page_url}}" class="btn btn-mini btn-primary trackinfo" rel="7###17205" title="Visit Store" target="_blank">
Visit Store
</a>
</td>
</tr>
{% endif %}
{% endfor %}
{% for x in result_bestbuy.products %}
{% if not forloop.first %}
<tr>
<td>
</td>
<td><img style="height: 168px;" src={{x.image}} alt=""></td>
<td><strong><span class="WebRupee"></span>{{x.regularPrice}}</strong></td>
<td>{{x.manufacturer}}</td>
<td>{{x.modelNumber}}</td>
<td>{% if x.freeShipping %}Free Shipping {% else %}{{x.shippingCost }}{% endif %}</td>
<td>14 Days</td>
<td>
<a href="{{x.url}}" class="btn btn-mini btn-primary trackinfo" rel="27###17205" title="Visit Store" target="_blank">
Visit Store
</a>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
I am trying to limit the first loop to execute only once initially then rest all has to be executed hence I have applied the forloop.first condition .
My simple question is "Why the third loop(result_amazon) is not printing any data" (There are lot many data present in the result_amazon).
Please help me out what might I am doing wrong here .
Check the console of your browser and look for any errors in your html code.