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 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




    
    ETF Table
    {% load static %}
    
    



  
    {% if d %}
    {% for i in d %}
     
    {% endfor %}
    {% endif %}
   
   
     
      ETF Ticker
      ETF Name
      Index Name
     
   
   
        {{i.etf_ticker}}
        {{i.etf_name}}
        {{i.index_name}}

charts.html




    
    Charts
    {% load static %}
    
    



  
    Home



    Table

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'

Python16367225 · Accepted Answer

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 %}

    {{i.etf_ticker}}
    {{i.etf_name}}
    {{i.index_name}}

{% 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 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/', views.charts_, name='charts'),
]

Finally, in charts.html, change the source tag urls to this:

Django how to pass clicked on link text to a URL on another HTML page showing static images?

Answers (2)

Related Questions