Handling duplicate js/css in forms media with included templates

[Nora Olsen]

Hi,

I have seen some discussion in this group on how to handle duplicate form.media in template includes.

I have the following the following base.html with scripts at the end of the body. I am following h5bp convention:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

        <script src="{{ STATIC_URL }}js/vendor/bootstrap.min.js"></script>

        <script src="{{STATIC_URL }}js/main.js"></script>

        {% block script %}{% endblock %}

       </body>

In my actual template, I include multiple templates and they are independent and reusable:

{% extends "base.html" %}

{% block script %}

<script src="{{ STATIC_URL }}js/vendor/jquery.chained.remote.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script>...</script>

{% endblock script %}

{% block content %}

{% include "sub_template1.html" %}

{% include "sub_template2.html" %}

{% endblock %}

In sub_template, I do have js scripts too and within the script block. But according to the docs, include “render this subtemplate and include the HTML”. 

And these sub templates have common js scripts because I'm trying to keep them independent so that I can reuse the forms in other places in my app.

1. I can't seem to modularize my template/forms using include statement and have them loaded at the end of the page using the block tag. 

2. How to avoid the duplication?

What should the right approach to solve the problems?

Thanks!

[Nora Olsen]

After reading the docs again, it seems that there is no shared state. I should be able to do the following:

{% block script %}

<script src="{{ STATIC_URL }}js/vendor/jquery.chained.remote.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script>...</script>

          <script src="{{ STATIC_URL }}js/sub_template1.js"></script>

          <script src="{{ STATIC_URL }}js/sub_template2.js"></script>

          <script src="{{ STATIC_URL }}js/common_third_party_script_between_sub_template1_and_2.js"></script>

{% endblock script %}

{% block content %}

{% include "sub_template1.html" %}

{% include "sub_template2.html" %}

{% endblock %}

The JS scripts will be removed from the sub templates and moved to their individual js files. Then I will be manually removing the duplication by only including 1 copy of the common scripts. In that way, I won't be able to use form.media?

 

Not perfect but I guess it works?

[Carsten Reimer]

Hi,

maybe django-sekizai (https://github.com/ojii/django-sekizai) might help
you out. It let's you define blocks (especially for javascript and css)
in subtemplates and takes care that no entry is doubled.

The docs are here:
http://django-sekizai.readthedocs.org/en/latest/

We use it in a current project and with some fiddeling it even works
with django-compressor.

Hth

with best regards

Carsten Reimer

> But according to the docs, include �render this subtemplate and include
> the HTML�.

>
> And these sub templates have common js scripts because I'm trying to
> keep them independent so that I can reuse the forms in other places in
> my app.
>
> 1. I can't seem to modularize my template/forms using include statement
> and have them loaded at the end of the page using the block tag.
>
> 2. How to avoid the duplication?
>
> What should the right approach to solve the problems?
>
>
> Thanks!
>
>

> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to django-users...@googlegroups.com.
> To post to this group, send email to django...@googlegroups.com.
> Visit this group at http://groups.google.com/group/django-users?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>


--
Carsten Reimer
Web Developer
carsten...@galileo-press.de
Phone +49.228.42150.703

Galileo Press GmbH
Rheinwerkallee 4 - 53227 Bonn - Germany
Phone +49.228.42150.0 (Zentrale) .77 (Fax)
http://www.galileo-press.de/

Managing Directors: Tomas Wehren, Ralf Kaulisch, Rainer Kaltenecker
HRB 8363 Amtsgericht Bonn