Passing paths to js files in {% include %}

Using Django Templates & Frontend
1

Hi,

I was trying to refactor my few forms (modal integrated forms) into a “form factory template”, and thus decided to make an html file that I include with arguments to set up the form -such as next, action, form…-

The call is working fine, but I’d like to keep my previous behaviour : when the form is not valid and I get it back with errors, open the modal right away (after document loaded). Currently i can’t do so, I suppose it’s because when I wait for document load event, it’s for the main html page, and it doesn’t wait for django included html files. Thus, I need to pass my js file to my form factory so it can wait for the modal creation before calling “show”.

The issue is my js file has a dynamic base directory I normally fetch like this (and it’s working). And i obviously don’t want to change this behaviour :

<script src="{% static 'vendor/libs/datatables-bs5/datatables.js' %}"></script>

I saw that I cant use template tags inside template tags and thus cannot call

  {% include "partials/modals/django_form_factory.html" with modalId="equipmentCreationModal" ... js_path={% static '.../my_js.js' %}

I saw that I can make temporary variables through template tags but that wouldn’t work as i need to compute the variable through template tags.

I finally found about {% static as %} and tried it :

  {% static 'org/js/equipments/create_equipment.js' as js_path %}

But this doesn’t work, {{ js_path }} evaluate to “static/org/js/equipments/create_equipment.js”.

Is there a way to feed files paths to {% includes %} other than this one or am I doing something stupid there ?

On a side note, i couldn’t find doc on a point : breaking lines inside very long templates for code readability. Here I have many arguments in my {% include %} and thus the lines are way too long to be readable. Didn’t try escaping '' the end of lines yet as i was focused on the previous problem (and left my code as is, being a bit burnt by it)
Exemple of line :

  {% include "partials/modals/django_form_factory.html" with modalId="equipmentCreationModal" action=url_equipment_creation modalTitle="Create Equipment" form=form  submit_text="Add Equipment" cancel_button_style="secondary" submit_button_style="success" js_path=js_path next_url="" %}

Thanks a lot for the help !

2

use debug mode? or not?

3

I’m sorry, i didn’t understand what your goal is.
Are trying to render a js file, containing variables inside it? Variables that are rendered by django on the server? if that’s the case, that’s not a “static” file, but a file that changes often. If this is your goal, you can use include on a html file that has a script tag on it.

But if you’re trying other thing, maybe we need to see the template for form_factoryto better understand what’s your need.

Cheers

4

To make it as simple as possible : i’m trying to load a js_file inside an html file included by django (through {% include %}) giving it a (calling) file dependant path to the js file. I’d rather keep all path calculations in template than add them to the context in the back.
Issue : I can’t use nested template tags (django limitation)
Issue : I can’t ask django to compute the path as a variable for another template tag.

Couldn’t include files or code as I left work before asking.
Now that I have access to the files here are the parts :
Form factory :

{% load i18n %}

{% load django_bootstrap5 %}

{% bootstrap_messages %}

{% if js_path != "" %}
{{js_path}}
<script src="{{ js_path }}"></script>
{% endif %}

<div class="modal fade" id="{{ modalId }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="formRequestAuth" class="mb-3" action="{{ action }}" method="post">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">{% trans modalTitle %}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
          {% bootstrap_messages %}
        <div class="modal-body">
          {% bootstrap_form form %}
        </div>
        <div class="modal-footer">
          <button type="reset" class="btn btn-{{ cancel_button_style }}" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
          <button type="submit" class="btn btn-{{ submit_button_style }}">{% trans submit_text %}</button>
          {% if next_url != "" %} <input type="hidden" name="next" value="{{ next_url }}" /> {% endif %}
        </div>
      </form>
    </div>
  </div>
</div>

Call to Form Factory :

  <!-- Modal - Equipment Creation -->
  {% static 'org/js/equipments/create_equipment.js' as js_path %}
  {{js_path}}
  {% url 'resp_p_parks_equipments' id_park as url_equipment_creation %}
  {% include "partials/modals/django_form_factory.html" with modalId="equipmentCreationModal" action=url_equipment_creation modalTitle="Create Equipment" form=form  submit_text="Add Equipment" cancel_button_style="secondary" submit_button_style="success" js_path=js_path next_url="" %}
  <!--/Modal - Equipment Creation -->

I tried what the doc offers :

  {% static 'org/js/equipments/create_equipment.js' as js_path %}

But the output of {{ js_path }} is : /static/org/js/equipments/create_equipment.js
Instead of (dev environment) : src/assets/js/equipments/create_equipment.js
↑ Makes me feel a bit dumb, as looking at the server logs, files are always computed as “/static/…”. Thus the path is good, but the include is still not working.
In the same file that the one calling the form factory, i use (and it’s working properly)

<script src="{% static 'vendor/libs/datatables-bs5/datatables.js' %}"></script>
[...]
<script src="{% static 'org/js/equipments/fetch_equipments.js' %}"></script>

EDIT : Apparently django doesn’t inherit js includes through {% include %}. Thus i cannot run my JS (depending on jquery) without including it again in my factory (and probably if i need different includes depending on the files calling the factory it will become a mess, but that’s better than nothing).

It solved the problem.

Thanks for helping me word it out and take a step back !

5

On a side note, i tested breaking lines inside my template tag but it doesn’t work (with just line breaks, or backslashed linebreaks)

  <!-- Modal - Equipment Creation -->
  {% static 'org/js/equipments/create_equipment.js' as js_path %}
  {% url 'resp_p_parks_equipments' id_park as url_equipment_creation %}
  {% include "partials/modals/django_form_factory.html"\
   with modalId="equipmentCreationModal"\
    action=url_equipment_creation\
    modalTitle="Create Equipment"\
    form=form\
    submit_text="Add Equipment"\
    cancel_button_style="secondary"\
    submit_button_style="success"\
    js_path=js_path\
    next_url="" %}
  <!--/Modal - Equipment Creation -->

When researching about this i keep finding results about the linebreak template tag not breaking line inside template tag. Is there a way to do it ?