CODEWITHSUNDEEP
javascriptdjango
Thrillidas
Thrillidas

Reputation: 79

How to handle JS script with Django template language?

I'm trying to use Django template language to manipulate JS scripts, but when I try appears the following error

enter image description here

I checked the error in case there is a miss typed code, but I couldn't detect it.

How is the best way to handle multiple JS script with multiple HTML files in Django template language?

Infraestructura.html

{% extends "Portafolio/layout.html" %}


{% block scripts %}
<script src = "{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script>    
{% endblock %}



{% block content %}

<form class="form mt-5" id="infra">
    <h1>Factibilidad Técnica y Operativa</h1>
    <h2>Análisis de Infraestructura</h2>

    <main class="container">
      <section class="row">

        <div class="col-lg-4 mb-2">
          <input name='infs' class="form-control" type="text" placeholder="Infraestructura">
        </div>

        <div class="col-lg-4 mb-2">
          <input name='time' class="form-control" type="text" placeholder="Tiempo">
        </div>

        <div class="col-lg-4 mb-2">
          <input name='cost' class="form-control" type="text" placeholder="Costo Mensual">
        </div>
        
      </section>
    </main>

    <nav class="btn-group">
      <button id='add' class='btn btn-success' type='button'>
        <i class="fa fa-plus-square"></i> Añadir
      </button>
      <button id='rem' class='btn btn-danger' type='button'>
        <i class="fa fa-minus-square"></i> Eliminar
      </button>     
    </nav>
  </form>
  
  <form class="form mt-3">
    <div class="d-grid gap-2 mt-3">
      <a class="btn btn-lg btn-primary" href="tecnicoequipo.html">Siguiente</a>
    </div>

    <div class="d-grid gap-2 mt-3">
      <a class="btn btn-lg btn-primary" href="financierobeneficio.html">Atrás</a>
    </div>
  </form>
{% endblock %}

layout.html

{% load static %}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href= "{% static 'Portafolio/style.css' %}">
    
    {% block scripts %} <script src="{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script> {% endblock}



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

Upvotes: 0

Views: 188

Answers (1)

Ankit Tiwari
Ankit Tiwari

Reputation: 4690

You have to load static at the top of your HTML document in your Infraestructura.html like this

{% extends "Portafolio/layout.html" %}
{% load static %}

Upvotes: 1

Related Questions