Django how to pass clicked on link text to a URL on another HTML page showing static images?
Question:
I have table of tickers on one HTML page, and four charts displayed on another HTML page. These charts come from my static/images folder full of hundreds of images named by each ETF’s benchmark index ticker. If I click the ETF ticker "PSCD" in the first row of the table, how can it be linked to another HTML page named charts.html which shows four charts whose filenames contain the ETF’s benchmark index ticker, example: chart1/S6COND.jpg, chart2/S6COND.jpg, chart3/S6COND.jpg, chart4/S6COND.jpg. <- In this example, I hardcoded S6COND.jpg into the link, and it works…but I need it to be dynamically tied to the index ticker of whatever etf ticker row I click on in the table. The index ticker for each ETF for each row in the table is included in my models.py which you can see below.
In the charts.html code example below, I hardcoded S6COND into the image tag but I want this dynamically linked.
Below you will see my table.html page showing my table from above. Next is the charts.html where I would like the etf_ticker that was clicked in that table to be entered into the image tags such as <img src="{% static 'myapp/images/chart1_S6COND.jpg' %}" alt="chart1"/></div> where you see I have hardcoded "S6COND" into the image tag. But I need this to be dynamic, from which you click on the link in table.html, and it gets inserted into the image tag in charts.html.
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ETF Table</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/table_style.css' %}">
<style type="text/css"></style>
</head>
<body>
<div class="container">
<table id="table" class="table table-dark table-hover table-striped table-bordered table-sm">
<thead>
<tr>
<th data-sortable="true">ETF Ticker</th>
<th>ETF Name</th>
<th>Index Name</th>
</tr>
</thead>
<tbody>
{% if d %}
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.index_name}}</a></td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<script>
$('#table').DataTable({
"bLengthChange": true,
"lengthMenu": [ [20, 50, 100 -1], [20, 50, 100, "All"] ],
"iDisplayLength": 20,
bInfo: false,
responsive: true,
order: [[4, 'desc']],
});
</script>
</div>
</body>
</html>
charts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/charts_style.css' %}">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="nav" href="{% url 'myapp:index' %}">Home</a></li><br><br>
<li><a class="nav" href="{% url 'myapp:table' %}">Table</a></li><br>
</ul>
</nav>
<div class="container">
<div class="box"><img src="{% static 'myapp/images/chart1_S6COND.jpg' %}" alt="chart1"/></div>
<div class="box"><img src="{% static 'myapp/images/chart2_S6COND.jpg' %}" alt="chart2"/></div>
<div class="box"><img src="{% static 'myapp/images/chart3_S6COND.jpg' %}" alt="chart3"/></div>
<div class="box"><img src="{% static 'myapp/images/chart4_S6COND.jpg' %}" alt="chart4"/></div>
</div>
</body>
</html>
urls.py
from django.urls import path
from . import views
from .views import ChartView
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/', ChartView.as_view(), name='charts'),
]
models.py
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
index_ticker = models.CharField(max_length=200)
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Table
def index(request):
return render(request, 'index.html')
def table(request):
data = Table.objects.all().values()
context = {'d': data}
return render(request, 'table.html', context)
class ChartView(TemplateView):
template_name = 'charts.html'
Answers:
Modify the path for the charts page (to one that accepts a parameter) and pass in the ticker to this path. You can use that to filter content.
In your urls.py modify the path to charts:
from django.urls import path
from . import views
from .views import ChartView
app_name = 'forecast'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/<str:ticker>', ChartView.as_view(), name='charts')
]
In table.html modify the links to the charts page:
<a href="{% url 'myapp:charts' i.index_ticker %}" target="_blank">
In your views.py, modify ChartView to accept a parameter:
class ChartView(TemplateView):
template_name = 'charts.html'
def get(self, request, ticker):
return render(request, self.template_name, { 'ticker': ticker })
And in charts.html, edit the source tag of the image in the following manner:
<img src="{% static 'myapp/images/chart4_'|add:ticker|add:'.jpg' %}" alt="chart4"/>
I figured out the answer after several days and many hours. Now, when I click on any link in any row, the next html page shows 4 charts of data corresponding to the etf_ticker of that table row.
I had to change the following:
In table.html, didn’t need {% if d %} and added i.id to the href tag.
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.index_name}}
</tr>
{% endfor %}
In models.py, I had to add database fields to hold the URL of each etf_ticker’s 4 charts to be displayed on charts.html. After changing the model, I deleted all files except init in the migrations folder. I then ran python manage.py makemigrations myapp and then python manage.py migrate. This created a new database from scratch where I re-uploaded my data into.
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
index_ticker = models.CharField(max_length=200)
chart1 = models.CharField(max_length=10)
chart2 = models.CharField(max_length=200)
chart3 = models.CharField(max_length=200)
chart4 = models.CharField(max_length=200)
In views,py, replaced ChartView(TemplateView) with:
def charts_(request, pk):
charts = Table.objects.get(pk=pk)
context = {'charts': charts}
return render(request, 'charts.html', context)
In urls.py, I had to add <int:pk> to the charts path and remove ChartView and in urlpatterns, changed to views.charts_ with an underscore to prevent any naming conflicts between the function name and variable names also named charts.
from django.urls import path
from . import views
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/<int:pk>', views.charts_, name='charts'),
]
Finally, in charts.html, change the source tag urls to this:
<div class="grid-container">
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart1}}" alt="chart1"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart2}}" alt="chart2"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart3}}" alt="chart3"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart4}}" alt="chart4"/>
</div>
I have table of tickers on one HTML page, and four charts displayed on another HTML page. These charts come from my static/images folder full of hundreds of images named by each ETF’s benchmark index ticker. If I click the ETF ticker "PSCD" in the first row of the table, how can it be linked to another HTML page named charts.html which shows four charts whose filenames contain the ETF’s benchmark index ticker, example: chart1/S6COND.jpg, chart2/S6COND.jpg, chart3/S6COND.jpg, chart4/S6COND.jpg. <- In this example, I hardcoded S6COND.jpg into the link, and it works…but I need it to be dynamically tied to the index ticker of whatever etf ticker row I click on in the table. The index ticker for each ETF for each row in the table is included in my models.py which you can see below.
In the charts.html code example below, I hardcoded S6COND into the image tag but I want this dynamically linked.
Below you will see my table.html page showing my table from above. Next is the charts.html where I would like the etf_ticker that was clicked in that table to be entered into the image tags such as <img src="{% static 'myapp/images/chart1_S6COND.jpg' %}" alt="chart1"/></div> where you see I have hardcoded "S6COND" into the image tag. But I need this to be dynamic, from which you click on the link in table.html, and it gets inserted into the image tag in charts.html.
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ETF Table</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/table_style.css' %}">
<style type="text/css"></style>
</head>
<body>
<div class="container">
<table id="table" class="table table-dark table-hover table-striped table-bordered table-sm">
<thead>
<tr>
<th data-sortable="true">ETF Ticker</th>
<th>ETF Name</th>
<th>Index Name</th>
</tr>
</thead>
<tbody>
{% if d %}
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.index_name}}</a></td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<script>
$('#table').DataTable({
"bLengthChange": true,
"lengthMenu": [ [20, 50, 100 -1], [20, 50, 100, "All"] ],
"iDisplayLength": 20,
bInfo: false,
responsive: true,
order: [[4, 'desc']],
});
</script>
</div>
</body>
</html>
charts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/charts_style.css' %}">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="nav" href="{% url 'myapp:index' %}">Home</a></li><br><br>
<li><a class="nav" href="{% url 'myapp:table' %}">Table</a></li><br>
</ul>
</nav>
<div class="container">
<div class="box"><img src="{% static 'myapp/images/chart1_S6COND.jpg' %}" alt="chart1"/></div>
<div class="box"><img src="{% static 'myapp/images/chart2_S6COND.jpg' %}" alt="chart2"/></div>
<div class="box"><img src="{% static 'myapp/images/chart3_S6COND.jpg' %}" alt="chart3"/></div>
<div class="box"><img src="{% static 'myapp/images/chart4_S6COND.jpg' %}" alt="chart4"/></div>
</div>
</body>
</html>
urls.py
from django.urls import path
from . import views
from .views import ChartView
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/', ChartView.as_view(), name='charts'),
]
models.py
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
index_ticker = models.CharField(max_length=200)
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Table
def index(request):
return render(request, 'index.html')
def table(request):
data = Table.objects.all().values()
context = {'d': data}
return render(request, 'table.html', context)
class ChartView(TemplateView):
template_name = 'charts.html'
Modify the path for the charts page (to one that accepts a parameter) and pass in the ticker to this path. You can use that to filter content.
In your urls.py modify the path to charts:
from django.urls import path
from . import views
from .views import ChartView
app_name = 'forecast'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/<str:ticker>', ChartView.as_view(), name='charts')
]
In table.html modify the links to the charts page:
<a href="{% url 'myapp:charts' i.index_ticker %}" target="_blank">
In your views.py, modify ChartView to accept a parameter:
class ChartView(TemplateView):
template_name = 'charts.html'
def get(self, request, ticker):
return render(request, self.template_name, { 'ticker': ticker })
And in charts.html, edit the source tag of the image in the following manner:
<img src="{% static 'myapp/images/chart4_'|add:ticker|add:'.jpg' %}" alt="chart4"/>
I figured out the answer after several days and many hours. Now, when I click on any link in any row, the next html page shows 4 charts of data corresponding to the etf_ticker of that table row.
I had to change the following:
In table.html, didn’t need {% if d %} and added i.id to the href tag.
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' i.id %}" target="_blank">{{i.index_name}}
</tr>
{% endfor %}
In models.py, I had to add database fields to hold the URL of each etf_ticker’s 4 charts to be displayed on charts.html. After changing the model, I deleted all files except init in the migrations folder. I then ran python manage.py makemigrations myapp and then python manage.py migrate. This created a new database from scratch where I re-uploaded my data into.
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
index_ticker = models.CharField(max_length=200)
chart1 = models.CharField(max_length=10)
chart2 = models.CharField(max_length=200)
chart3 = models.CharField(max_length=200)
chart4 = models.CharField(max_length=200)
In views,py, replaced ChartView(TemplateView) with:
def charts_(request, pk):
charts = Table.objects.get(pk=pk)
context = {'charts': charts}
return render(request, 'charts.html', context)
In urls.py, I had to add <int:pk> to the charts path and remove ChartView and in urlpatterns, changed to views.charts_ with an underscore to prevent any naming conflicts between the function name and variable names also named charts.
from django.urls import path
from . import views
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/<int:pk>', views.charts_, name='charts'),
]
Finally, in charts.html, change the source tag urls to this:
<div class="grid-container">
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart1}}" alt="chart1"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart2}}" alt="chart2"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart3}}" alt="chart3"/>
<img class="grid-item" src="{% static 'myapp/images/' %}{{charts.chart4}}" alt="chart4"/>
</div>