title: Change model data in page on click
body: <p>First timer in Django and in anything MVC so please go easy on me since I'm learning it now.</p>
  
  <p>I have this view which has a menu on the left that contains a list of products. Next to the menu is a tab content which is supposed to contain the product's description, pictures and useful links (3 tabs). All of the information shown in the menu, as well as the tab content, is saved in the database and accessed through the models. This is a rough draft of what my page looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/jZlod.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jZlod.png" alt="enter image description here"></a></p>
  
  <p>What I want is that when I click the product on the left, the proper information gets loaded in the tab content.</p>
  
  <p>The view looks like this:</p>
  
  <pre><code>def details(request, clientName):
      client = Client.objects.get(clientName=clientName)
      products = Product.objects.filter(clientID=client.clientID)
      productTypes = Product.objects.filter(clientID=client.clientID).values_list('productType', flat=True)
      productDetails = ProductDetail.objects.get(productID=1)
  
      #Since there is no distinct in SQLite, I use this code to get all individual values of productType
      productTypeList = []
      for productType in productTypes:
          if productType not in productTypeList:
              productTypeList.append(productType)
  
      clientList = Client.objects.all()
      context = {
          'client': client,
          'products': products,
          'productDetails': productDetails,
          'productTypes': productTypeList,
          'clientList': clientList,
          'nav': 'products',
      }
      return render(request, 'prsales/details.html', context)
  </code></pre>
  
  <p>Template is:</p>
  
  <pre><code>{% load staticfiles %}
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          {% include "prsales/head.html" %}
          &lt;br /&gt;
          &lt;div class="text-center"&gt;
              &lt;img src="{% static client.clientHeader %}"&gt;
          &lt;/div&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="col-lg-3"&gt;
              &lt;div class="well sidebar-nav"&gt;
                  &lt;ul class="nav nav-list"&gt;
                      {% for productType in productTypes %}
                          &lt;li class="nav-header"&gt;{{ productType }}&lt;/li&gt;
                          {% for product in products %}
                              {% if product.productType == productType %}
                                  &lt;li&gt;&lt;a href="#"&gt;{{ product.productName }}&lt;/a&gt;&lt;/li&gt;
                              {% endif %}
                          {% endfor %}
                      {% endfor %}
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!--/.well --&gt;
          &lt;/div&gt;&lt;!--/span--&gt;
          &lt;div class="col-lg-9"&gt;
              &lt;ul class="nav nav-tabs nav-pills"&gt;
                  &lt;li role="presentation" class="active"&gt;&lt;a href="#tab1" data-toggle="tab" aria-controls="tab1" role ="tab"&gt;Description&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#tab2" data-toggle="tab" aria-controls="tab2" role ="tab"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#tab3" data-toggle="tab" aria-controls="tab3" role ="tab"&gt;Manuals&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="tab-content"&gt;
                  &lt;div role="tabpanel" class="tab-pane fade in active" id="tab1"&gt;
                      &lt;div class="panel panel-jumbotron panel-default"&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;h3&gt;Product Name&lt;/h3&gt;
                              &lt;p&gt;{{ productDetails.detail }}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div role="tabpanel" class="tab-pane fade" id="tab2"&gt;
                      &lt;div class="panel panel-jumbotron panel-default"&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;TEST&lt;/li&gt;
                                  &lt;li&gt;TEST&lt;/li&gt;
                                  &lt;li&gt;TEST&lt;/li&gt;
                                  &lt;li&gt;TEST&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
  
                  &lt;div role="tabpanel" class="tab-pane fade" id="tab3"&gt;
                      &lt;div class="panel panel-jumbotron panel-default"&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-lg-12"&gt;
                                      &lt;h1 class="page-header"&gt;Thumbnail Gallery&lt;/h1&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                                      &lt;a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray"&gt;
                                          &lt;img class="img-responsive" src="http://placehold.it/400x300" alt="" &gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                                      &lt;a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray"&gt;
                                          &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
                                      &lt;a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray"&gt;
                                          &lt;img class="img-responsive" src="http://placehold.it/400x300" alt=""&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Inside the tab content, you can see the variable {{ productDetails.detail }}, this is what I want to change depending on what I click on the menu.</p>
  
  <p>One of the things I thought as a solution was making a tab content for each product and just show and hide them on click, but that is a horrible solution in my opinion. I just want one tab content and dynamically change the content on click.</p>
  
  <p>Again, I am new to this so any suggestions you have for me are more than welcome.</p>