title: How to change the contents of a block dynamically on django?
body: <p><strong>SEE FIXED CODE BELOW</strong></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>The errors I'm getting currently:</p>
  
  <pre><code>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&lt;product_name&gt;[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&lt;product_name&gt;[a-z]+)/$']
  </code></pre>
  
  <p>urls.py</p>
  
  <pre><code># -*- coding: utf-8 -*-
  from django.conf.urls import url
  
  from . import views
  
  urlpatterns = [
      url(r'^$', views.index, name='index'),
      url(r'^(?P&lt;product_name&gt;[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'),
  ]
  </code></pre>
  
  <p>views.py</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>base_productmonitor.html</p>
  
  <pre><code>{% extends "productmonitor/base.html" %}    
  {% block content %}
      &lt;div class="productSelectMenu"&gt;
          &lt;ul&gt;
              &lt;p&gt;Test&lt;/p&gt;
              {% for product in products %}
                  &lt;li&gt;&lt;a href="{% url 'productmonitor:product' 'dualpol' %}"&gt;{{ product.name }}&lt;a/&gt;&lt;/li&gt;  
              {% endfor %}
          &lt;/ul&gt;
      &lt;/div&gt;
  
      {% block productcontent %}
          &lt;div id="productView" class="productView"&gt;
              &lt;p&gt;Default productView content&lt;/p&gt;    
          &lt;/div&gt;
      {% endblock %}
  {% endblock %}
  </code></pre>
  
  <p>base_productmonitor_dualpol.html</p>
  
  <pre><code>{% extends "productmonitor/base_productmonitor.html" %}
  {% block productcontent %}
  &lt;p&gt;
      dualpol
  &lt;/p&gt;
  {% endblock %}
  </code></pre>
  
  <p><strong>EDIT: FIXED VERSION</strong></p>
  
  <p>urls.py</p>
  
  <pre><code># -*- coding: utf-8 -*-
  from django.conf.urls import url
  
  from . import views
  
  urlpatterns = [
      url(r'^$', views.index, name='index'),
      url(r'^product/(?P&lt;product_name&gt;[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'),
  ]
  </code></pre>
  
  <p>views.py</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>base_productmonitor.html</p>
  
  <pre><code>{% extends "productmonitor/base.html" %}
  
  {% block content %}
      &lt;div class="productSelectMenu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="{% url 'productmonitor:product' 'dualpol' %}"&gt;Dual pol&lt;a/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{% url 'productmonitor:product' 'rhi' %}"&gt;Rhi&lt;a/&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      {% block productcontent %}
          &lt;div id="productView" class="productView"&gt;
              &lt;p&gt;Default productView content&lt;/p&gt;    
          &lt;/div&gt;
      {% endblock %}
  {% endblock %}
  </code></pre>
  
  <p>base_productmonitor_dualpol.html</p>
  
  <pre><code>{% extends "productmonitor/base_productmonitor.html" %}
  {% block productcontent %}
  &lt;div id="productView" class="productView"&gt;
      &lt;p&gt;
          dualpol
      &lt;/p&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>