[DJANGO] Añadir código JavaScript

[DJANGO] Añadir código JavaScript

En este capítulo vas a ver como añadir código JavaScript a tus apps con Django.

Para el ejemplo práctico voy a utilizar el formulario de capítulos anteriores. Solo será un simple alert para avisar al usuario de que los datos del formulario se han enviado correctamente cuando haga el "POST".


Lo que aprendas con este sencillo ejemplo, te va a servir para aplicar de la misma forma todo el código JavaScript que necesites en tus apps.

¿Cómo cargo código JavaScript en Django?

El código JavaScript funciona igual en Django como en una web clásica, de modo que solo tenemos que cargarlo directamente en el documento HTML o mediante una hoja externa enlazada.

<head>
    <script>
      alert("Código incrustado en el head");
    </script>
  </head>

Si quieres cargar el código en hoja externa, hazlo así:

<head>
    <script src="{% static 'js/principal.js' %}"></script>
  </head>

En este supuesto, el archivo cargado está en la carpeta de archivos estáticos "static" y dentro tiene una carpeta llamada "js" con el archivo "principal.js". Por supuesto, el archivo externo tiene la línea del alert().


El resultado en ambos casos es el mismo:

alert javascript

Ahora que ya sabes utilizar código JavaScript con Django, vamos al formulario que estamos realizando en el curso.

Tienes el código en capítulos anteriores, tanto el CSS como el HTML, el modelo de base de datos y todo lo necesario.

formulario con django y javascript

El problema de este formulario, es que nos hace el "POST" al enviar los datos, pero no avisa de que se han enviado, de forma que eso puede ser confuso para un usuario.

Una forma super sencilla de avisar, es utilizar el atributo HTML "onsubmit" (al enviar en español) para ejecutar un alert en línea al darle al botón de envío:

 <form method="POST" class="formulario" onsubmit="alert('Formulario enviado.')">
alert formulario js post

No te pierdas nada del curso Máster en Python.


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Creación de videojuegos Entrada anterior Desarrollo de videojuegos con Python
curso Java Entrada siguiente Entradas de texto de JavaFX