CODEWITHSUNDEEP
pythondjango
Ahtisham
Ahtisham

Reputation: 10116

Rendering different templates to the same URL pattern in Django

My question is similar to Same URL in multiple views in Django, but I am not rendering templates on the basis of user_authentication, but rather on the basis of JavaScript enabled or disabled in the browser.

What I am trying to do?

I am trying to render the index.html page if JavaScript is enabled in the browser, otherwise I want to render jsDisabled.html page if it's disabled and both of the pages should be rendered on the same URL pattern, for example:

localhost:8000 should either render index.html if JavaScript is enabled in the browser or it should render jsDisabled.html page if JavaScript is disabled.

Note: I am checking if JavaScript is disabled in the browser by using the <noscript> tag which will run when JavaScript is disabled.

Here is my code so far:

base.html:

{% load staticfiles %}

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body class="noJs">
        ...
        <a href="{% url 'index' 0 %}"> abc </a>
        ...
        <noscript>
            <style type="text/css">
                .noJs {
                    display: none;
                }
            </style>
            <meta http-equiv="refresh" content="{% ulr 'index' 1 %}"> /* This should render jsDisabled.html page on the same URL which is 'localhost:8000' */

        </noscript>
    </body>
</html>

urls.py:

from django.conf.urls import include, url
from django.contrib import admin
from . import views

urlpatterns = [
  ...
  url(r'^(?P<flag>[0-1])$', views.index, name='index'),
]

views.py:

from django.shortcuts import render

def index(request, flag):
    if (flag):
       return render(request, 'jsDisabled.html')
    else:
       return render(request, 'index.html')

Upvotes: 0

Views: 1981

Answers (2)

Ahtisham
Ahtisham

Reputation: 10116

After a lot of debugging I finally found the solution :) And here it is:

base.html:

{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div class="noJs">
    ...
    <a href="{% url 'index' 0 %}"> abc </a>
    ...
 </div>
 <noscript>
    <style type="text/css">
        .noJs {

            display: none;
       }
    </style>
    {% include 'includes/jsDisabled.html' %}
</noscript>
</body>
</html>

urls.py

from django.conf.urls import include, url
from django.contrib import admin
from . import views

urlpatterns = [

   url(r'^admin/', admin.site.urls),
   url(r'^articles/', include('articles.urls')),
   url(r'^contact/', include('contact.urls')),
   url(r'^temp/',views.temp, name="temp"),
   url(r'^$', views.index, name='index'),
]

views.py:

from django.shortcuts import render

def index(request):
    return render(request,'index.html')

def temp(request):
     return render(request,'temp.html')

I included the include built-in template tag as {% include 'includes/jsDisabled.html' %} suggested by @noes1s by creating a folder named includes inside the templates folder and placing jsDisabled.html inside of it.

Upvotes: 0

noes1s
noes1s

Reputation: 134

Depending on your Django version you may need to specify TEMPLATE_DIR = in settings.py (in newer versions this isn't required).

Here is some helpful information on template and tag logic:

Main/templates/myapp/base.html
Main/templates/myapp/index.html
Main/templates/myapp/includes/yes_js.html
Main/templates/myapp/includes/no_js.html

base.html:

{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

index.html:

{% extends 'myapp/base.html' %}
{% load staticfiles %}

{% block content %}
<noscript>
{% include 'no_js.html' %}
</noscript>

{% include 'yes_js.html' %}

{% endblock %}

Upvotes: 1

Related Questions