How to use django/jinja tags to extend an html with a javascript snippet from another .js file

I am developing a django app.

There is a file templates/index.html file having some javascript snippets at its footer, such as

...

</body>

</html>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- import a library leaflet.browser.print from local folder lib placed  in the staticfiles folder -->
<script src="{% static './lib/leaflet.browser.print.min.js' %}"></script>

There is also a file templates/publish_layers_in_html_page.html which contains a javascript snippet using jinja tags, the content is the following

<script> 
 
var overlayMaps = {};

// Shapefile wms
{% for s in shp %}
var {{ s.name }} = L.tileLayer.wms('http://localhost:8080/geoserver/wms', {
    layers: '{{s.name}}',
    transparent: true,
    format: 'image/png',
})
overlayMaps['{{ s.name }}'] = {{ s.name }}

{% endfor %}

L.control.layers(baseMaps, overlayMaps, {collapsed: false, position: 'topleft'}).addTo(map)

</script>

Is it possible to use django tag {% extends %} to insert this javascript snippet into the index.html file?

I have tryed to change the two files as follows, but with no success.

index.html

...

</body>

</html>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- import a library leaflet.browser.print from local folder lib placed  in the staticfiles folder -->
<script src="{% static './lib/leaflet.browser.print.min.js' %}"></script>

{% block scripts %}{% endblock %}

publish_layers_in_html_page.html

 {% extends "index.html" %}

 {% block scripts %}

<script> 
 
var overlayMaps = {};

// Shapefile wms
{% for s in shp %}
var {{ s.name }} = L.tileLayer.wms('http://localhost:8080/geoserver/wms', {
    layers: '{{s.name}}',
    transparent: true,
    format: 'image/png',
})
overlayMaps['{{ s.name }}'] = {{ s.name }}

{% endfor %}

L.control.layers(baseMaps, overlayMaps, {collapsed: false, position: 'topleft'}).addTo(map)

</script>

{% endblock %}

I have also tested that if I insert the javascript snippet at the end of index.html, the code operates correctly.

Solution

You're doing reverse extension. What you want is publish_layers_in_html_page's js code inside index.html, But you've included index.html in publish_layers_in_html_page. Now when you do this what actually happens is the publish_layers_in_html_page template can access index.html's code, but not vice versa.

Updated code:

index.html

</body>

</html>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- import a library leaflet.browser.print from local folder lib placed  in the staticfiles folder -->
<script src="{% static './lib/leaflet.browser.print.min.js' %}"></script>

{% include "publish_layers_in_html_page.html" %}

publish_layers_in_html_page.html

<script> 
 
var overlayMaps = {};

// Shapefile wms
{% for s in shp %}
var {{ s.name }} = L.tileLayer.wms('http://localhost:8080/geoserver/wms', {
    layers: '{{s.name}}',
    transparent: true,
    format: 'image/png',
})
overlayMaps['{{ s.name }}'] = {{ s.name }}

{% endfor %}

L.control.layers(baseMaps, overlayMaps, {collapsed: false, position: 'topleft'}).addTo(map)

</script>