How to change the contents of a block dynamically on django?

Question

SEE FIXED CODE BELOW

I'm working on my first web page project using django 1.8. My web page has a section that consists of a product menu and a column displaying a different view based on selected menu item.

At first I tried an approach where each of the menu buttons have a onclick js function assigned that changes the contents of the block. I was thinking that I would then write the html code of each product into separate file where it would be read by the js function. I got it partially working but it feels kinda sketchy.

My second approach was based on using django templates but I run into some errors as a beginner I couldn't quite figure out what exactly is the problem. I would highly appreciate if someone could pinpoint what I'm doing wrong or tell me what's the right approach for changing the contents dynamically.

The errors I'm getting currently:

http://127.0.0.1:8000/productmonitor/
NoReverseMatch at /productmonitor/
Reverse for 'product' with arguments '('',)' and keyword arguments '{}' not found. 1 pattern(s) tried: [u'productmonitor/(?P<product_name>[a-z]+)/$']

http://127.0.0.1:8000/productmonitor/
NoReverseMatch at /productmonitor/dualpol/
Reverse for 'product' with arguments '('',)' and keyword arguments '{}' not found. 1 pattern(s) tried: [u'productmonitor/(?P<product_name>[a-z]+)/$']

urls.py

# -*- coding: utf-8 -*-
from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^(?P<product_name>[A-Za-z0-9\-\_]+)/$', views.product, name='product'),
    url(r'^information/$', views.information, name='information'),
    url(r'^casedatabase/$', views.casedatabase, name='casedatabase'),
    url(r'^contact/$', views.contact, name='contact'),
]

views.py

from django.http import HttpResponse
from django.shortcuts import get_object_or_404, render
from django.views import generic
# Create your views here.
from .models import Product

def index(request, product_name='default'):
    #template = 'productmonitor/index.html'
    if product_name == 'dualpol':
        template = 'productmonitor/base_productmonitor_dualpol.html'
    if product_name == 'rhi':
        template = 'productmonitor/base_productmonitor_rhi.html'

    template = 'productmonitor/base_productmonitor.html'
    test_context = {
                    'products' : Product.objects.all(),                   
                    }
    return render(request, template, test_context)

def product(request, product_name='dualpol'):
    if product_name == 'dualpol':
        template = 'productmonitor/base_productmonitor_dualpol.html'
    if product_name == 'rhi':
        template = 'productmonitor/base_productmonitor_rhi.html'

    test_context = {
                    'products' : Product.objects.all(),                   
                    }
    return render(request, template, test_context)

base_productmonitor.html

{% extends "productmonitor/base.html" %}    
{% block content %}
    <div class="productSelectMenu">
        <ul>
            <p>Test</p>
            {% for product in products %}
                <li><a href="{% url 'productmonitor:product' 'dualpol' %}">{{ product.name }}<a/></li>  
            {% endfor %}
        </ul>
    </div>

    {% block productcontent %}
        <div id="productView" class="productView">
            <p>Default productView content</p>    
        </div>
    {% endblock %}
{% endblock %}

base_productmonitor_dualpol.html

{% extends "productmonitor/base_productmonitor.html" %}
{% block productcontent %}
<p>
    dualpol
</p>
{% endblock %}

EDIT: FIXED VERSION

urls.py

# -*- coding: utf-8 -*-
from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^product/(?P<product_name>[a-z]+)/$', views.product, name='product'),
    url(r'^information/$', views.information, name='information'),
    url(r'^casedatabase/$', views.casedatabase, name='casedatabase'),
    url(r'^contact/$', views.contact, name='contact'),
]

views.py

enter code here
from django.http import HttpResponse
from django.shortcuts import get_object_or_404, render, redirect
from django.views import generic
# Create your views here.
from .models import Product

def index(request, product_name=''):
    return redirect('productmonitor:product', product_name='dualpol')

def product(request, product_name):
    if product_name == 'dualpol':
        template = 'productmonitor/base_productmonitor_dualpol.html'
    if product_name == 'rhi':
        template = 'productmonitor/base_productmonitor_rhi.html'

    test_context = {
                    'products' : Product.objects.all(),                   
                    }
    return render(request, template, test_context)

def information(request):
    template = 'productmonitor/base_information.html'
    context = {}
    return render(request, template, context)

def casedatabase(request):
    template = 'productmonitor/base_case-database.html'
    context = {}
    return render(request, template, context)

def contact(request):
    template = 'productmonitor/base_contact.html'
    context = {}
    return render(request, template, context)

base_productmonitor.html

{% extends "productmonitor/base.html" %}

{% block content %}
    <div class="productSelectMenu">
        <ul>
            <li><a href="{% url 'productmonitor:product' 'dualpol' %}">Dual pol<a/></li>
            <li><a href="{% url 'productmonitor:product' 'rhi' %}">Rhi<a/></li>
        </ul>
    </div>

    {% block productcontent %}
        <div id="productView" class="productView">
            <p>Default productView content</p>    
        </div>
    {% endblock %}
{% endblock %}

base_productmonitor_dualpol.html

{% extends "productmonitor/base_productmonitor.html" %}
{% block productcontent %}
<div id="productView" class="productView">
    <p>
        dualpol
    </p>
</div>
{% endblock %}

Answer 1

I think what the error is saying that the render in your product function is not getting the right <product_name> to use. It's showing that the arguments that it has (the <product_name> that it is trying) are none. So what you have to do in your product function is to try and make sure that you are really getting a <product_name>.