Django mixes my templates

Question

System: Debian Wheezy, Django 1.5

Hello everyone,

I am pretty new to Django and I have already encountered a problem that I can't find the solution for. Moreover, I have a little project with 4 or 5 apps in it and I am trying to navigate from one app to another. Here is what I am trying to do - I have a mainMenu app, which is loaded when you go to the localhost. From this app's template I navigate to other apps like that:

<div class="ui-grid-a">
        <div class="ui-block-a"><a href="/labs/" data-role="button">Labs</a></div>
        <div class="ui-block-b"><a href="/quiz/" data-role="button">Quiz</a></div>     
    </div>
    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="/primer/" data-role="button">Primers</a></div>
        <div class="ui-block-b"><a href="/timer/" data-role="button">Timers</a></div>      
    </div>
    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" data-role="button">Calculations</a></div>
        <div class="ui-block-b"><a href="/mapping/" data-role="button">Mapping</a></div>       
    </div>
    <div class="ui-grid-a">
        {#  <!-- {% url 'glos:index' %} --> #}
        <div class="ui-block-a"><a href="/glossary/" data-role="button">Glossary</a></div>
        <div class="ui-block-b"><a href="/videos/" data-role="button">Videos</a></div>     
    </div>
</div>

Now, when you go to, Glossary, for example... I render some glossary.html with some context but what happens is that... you get the look of the glossary.html in the browser... but the actual code is from the mainMenu page. Here is the view that renders the glossary:

def search_gloss(request):
    the_list = [...] #some data structure that I use

    context = { "terms": the_list }
    return render(request, 'glossary/glossary.html', context)

Note that if you reload the page in the browser, you get the actual glossary.html, rendered properly. The problem is not in the rendering itself, as I get the information that I need into the template... the problem is that, for some reason, it does not load the template properly because I have some javascript functions in it... but what I get is the javascript functions from the mainMenu page. In a way, it mixes the old and the new template.

Here is the urls.py for the glossary page:

from django.conf.urls import patterns, url

from glossary import views

urlpatterns = patterns('',
    url(r'^$', views.search_gloss, name='search_gloss'),
)

That is all I can think of right now, please if you require more information, let me know.

---> EDIT <---

Ok, here is the full data structure that I pass to the glossary.html

def search_gloss(request):
    the_list = [('Acrylamide gels','A polymer gel used for electrophoresis of DNA or protein\
                    to measure their sizes (in daltons for proteins, or in base pairs for DNA).\
                    See "Gel Electrophoresis". Acrylamide gels are especially useful for high resolution\
                    separations of DNA in the range of tens to hundreds of nucleotides in length.'), 

        ('Agarose gels','A polysaccharide gel used to measure the size of nucleic acids (in bases or base pairs).\
                 See "Gel Electrophoresis". This is the gel of choice for DNA or RNA in the range of thousands\
                 of bases in length, or even up to 1 megabase if you are using pulsed field gel electrophoresis.'),

        ('Genome',"The total DNA contained in each cell of an organism. Mammalian genomic DNA (including that of humans) \
               contains thousands of genes, including coding regions, 5' and 3' untranslated regions, introns, 5' and 3'\
               flanking DNA. Also present in the genome are structural segments such as telomeric and centromeric DNAs \
               and replication origins, and intergenic DNA."),

        ('Hybridization','The reaction by which the pairing of complementary strands of nucleic acid occurs. DNA is usually\
                  double-stranded, and when the strands are separated they will re-hybridize under the appropriate \
                  conditions. Hybrids can form between DNA-DNA, DNA-RNA or RNA-RNA. They can form between a short \
                  strand and a long strand containing a region complementary to the short one. Imperfect hybrids can \
                  also form, but the more imperfect they are, the less stable they will be (and the less likely to form).\
                  To "anneal" two strands is the same as to "hybridize" them.')]

    context = { "terms": the_list }
    return render(request, 'glossary/glossary.html', context)

and the java script function is just a function that queries this data structure... but the problem is that... my function does not appear in the code of the template after the rendering... the only javascript functions that appear are the ones from the old template. However, when I refresh the page... everything is fine. I mean... I get the template... but it is mixed with the old one... I don't think that the javascript is the problem here.

---> EDIT 2 <---

The project's urls.py:

from django.conf.urls import patterns, include, url

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    # Examples:
    #url(r'^$', 'index.html', name='index'),
    # url(r'^mysite/', include('mysite.foo.urls')),

    # Uncomment the admin/doc line below to enable admin documentation:
    url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    url(r'^admin/', include(admin.site.urls)),

    # include the rango urls
    url(r'^login$', include('login.urls', namespace="log")),
    url(r'^quiz$', include('quiz.urls', namespace="quizes")),
    url(r'^glossary$', include('glossary.urls', namespace="glos")),
    url(r'^$', include('login.urls', namespace="log")),
    url(r'^mapping$', include('mapping.urls')), # ADD THIS NEW TUPLE!
    url(r'^main$', include('mainMenu.urls', namespace="main")), # ADD THIS NEW TUPLE!
    url(r'^timer$', include('timer.urls')), # ADD THIS NEW TUPLE!
    url(r'^primer$', include('primer.urls')), # ADD THIS NEW TUPLE!
    url(r'^labs$', include('labs.urls')), # ADD THIS NEW TUPLE!
    url(r'^videos$', include('videos.urls')), # ADD THIS NEW TUPLE!
)

Glossary's urls.py:

from django.conf.urls import patterns, url

from glossary import views

urlpatterns = patterns('',
    url(r'^$', views.search_gloss, name='search_gloss'),
)

Answer 1

Look at the admin line in your urls:

r'^admin/', include(admin.site.urls)

Now look at glossary:

r'^glossary$', include('glossary.urls')

See that? The $ sign means the URL ends there. So any 'child'-urls would not be caught by it. What you want it to be is like the admin is:

r'^glossary/', include('glossary.urls')

edit

As we discussed in the comments, the problem hid inside your javascript code for the page, which instead of redirecting fetched the data and filled it inside a div. I can't exactly tell why that would happen. You should probably go over your code and look for something along these lines:

$('a').on('click', function(e) {
        e.preventDefault(); 
        var body = $('body'),
              div = $('<div></div>')
              link = $(this).attr('href');
        data = $.load(link);
        div.html(data);
        div.appendTo(body)
    });