Untitled

class CommonTask(models.Model):   ## nothing special
    name = models.CharField(max_length=30, default='yummy')

app_name = 'food'
urlpatterns = [
    ## the list view on the left
    url(r'^edible/?', views.EdibleList.as_view(), name='edible'),
    ## the partial on the right
    url(r'^billable/edit/(?P<jid>[a-zA-Z0-9-w:]+)/?', views.EdibleEdit.as_view(), name='edibleEdit'),

class EdibleList(ListView):
    template_name = 'food/edible-list.html'

    def get_queryset(self):
        return Dish.objects.filter('edible'=True)

class EdibleEdit(UpdateView):
    form_class = EdibleForm
    template_name = 'food/edible-edit.html'

    def get_initial(self):
        …  # for the form/formset info

    def get_object(self):
        return get_object_or_404(Dish, pk=self.kwargs['pk'])

<body>

  {% block content %} {% endblock content %}

  {% block scripts %} {% endblock scripts %}

  <script>
    {% block script-inline %} {% endblock script-inline %}
  </script>

  <footer> FOOTER </footer>
</body>

{% extends "baste.html" %}
{% load static %}

{% block title%}Edible List - {{dish.name}} {% endblock title%}

{% block extra_head %}
  <link rel="stylesheet" href="{% static "food/food.css" %}">
{% endblock extra_head %}

{% block script-inline %}
    console.log('This works, as it is in the views original compiled template');

    console.log('This does not work, as it relies on the partial to be loaded, but the partial isn't loaded yet, and this wont update after the partial is loaded);
    var interpuncts = document.getElementsByClassName("interpuncts");
    for (let i=0; i < interpuncts.length; i++){
      interpuncts[i].onclick=function(event){
        console.log('gh1');
      };
    };

    // showing the right partial when clicked
    pane = document.getElementById("edible-single");
    showPane = function(link) {
      fetch(link).then(function(response) {
          return response.text();
      }).then(function(body) {
          pane.innerHTML = body;
      });
    };

    let edibleLinks = document.querySelectorAll("a.edible-link");
    edibleLinks.forEach(function(edibleLink) {
        edibleLink.addEventListener('click', function(e){
          e.preventDefault();
          showPane(edibleLink.getAttribute('href'));
        });
    });

{% endblock script-inline %}

{% block scripts %} {% endblock scripts %}

{% block content %}

  {% include "food/nav.html" with currentView="edibleList" %}

  <div class="container-fluid">
    <h1 class="text-center">Edible Dishes</h1>
    <hr>
    <div class="row scrollable-row">
      <div class="col-3 scrollable-col">
        <table class="table">
          <tbody>
            {% for dish in dish-list %}
              <tr class="d-flex">
                <td class="col">
                  <a class="edible-link" href="{% url 'food:ediblebleDetail' pk=dish.pk %}" data-pk="{{dish.pk}}">{{dish.name}}</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="col-9 scrollable-col" id="edible-single"></div>
    </div>
  </div>

{% endblock content %}

{% load static %}

{# no blocks work in this, because it can't extend the list.html, because the view can't render to endpoint(sibling) templates at the same time #}
{# {% block * %} #}

<script>
  console.log('This won't run, as it is loaded separately as just an inclusion text from the list AJAX call.')
  $(document).ready(function() {
    console.log('This can't work because it relies on $ to be accessible, which it is not')
    var interpuncts=document.getElementsByClassName("interpuncts");
    for (let i=0; i < interpuncts.length; i++){
      interpuncts[i].onclick=function(event){
        console.log('I can not get a handle on the partial template items after they are loaded as a partial');
      };
    };
  });
</script>

<div class="container">
  Dish - {{dish.name}}
  <hr>

  <form action="{% form url %}" method="post">
    {% csrf_token %}
    {{ form }}
    {# Some element(s) that needs some javascript to act on it, more comprehensive than bootstrap show/hide can do  #}
    <div class="interpuncts">
      ··· Do something with this element
    </div>
    <input class="btn btn-primary pull-right" type="submit" value="Save">
  </form>
</div>