0

Estoy intentando aprender Django y hasta ahora no he tenido problemas en ir incorporando nuevas opciones. Parece que he tropezado en la piedra de los JS y CSS a servir con un formulario.

Utilizando formularios de clase (AuthenticationForm, PasswordChangeForm y similares) defino en class Media: los archivos CSS y JS que debe utilizar el formulario, pero ni escribiendo la URL completa logro que se utilicen esos ficheros.

Un ejemplo de clase:

class LoginForm(AuthenticationForm):
    username = forms.CharField(label=_('username'), help_text=_('help text: login username'),
        widget=forms.TextInput(
            attrs={
                'class': 'form-control',
                'placeholder': _('e.g. johndoe')
            }
        ),
        error_messages={
            'required': _('error: required username')
        })
    password = forms.CharField(label=_('password'), help_text=_('help text: login password'),
        widget=forms.PasswordInput(
            attrs={
                'class': 'form-control',
                'placeholder': _('e.g. c^n6*u!S')
            }
        ),
        error_messages={
            'required': _('error: required password')
        })
    
    class Media:
        js = ('http://127.0.0.1:8000/assets/js/show-password.js',)

también lo he intentado utilizando js = (settings.STATIC_URL + 'js/show-password.js') y la opción que debería ser la normal js = ('js/show-password.js').

Todos los ficheros estáticos se están mostrando correctamente en esa URL (no es un fallo de los ficheros estáticos), e incluyendo directamente el fichero JS en la plantilla base funciona sin problema… pero no si lo limito a los formularios.

He utilizado como referencia la documentación oficial Form Assets (The Media class) y tampoco es un problema de no entender inglés.

En la vista simplemente utilizo el formulario:

class CustomLoginView(LoginView):
    authentication_form = LoginForm
    form_class = LoginForm
    template_name = 'accounts/login.html'

    def get_success_url(self):
        return reverse_lazy('accounts:view', kwargs={'username': self.request.user.username})

y por el código que se recibe en el navegador, todo está en orden… menos los ficheros JS y CSS.

1 respuesta 1

1

Solucionado gracias a la respuesta en inglés

La cuestión tiene lógica, pero no está recogida en la documentación oficial y no ha sido fácil encontrar la respuesta.

Al crear un formulario o un widget se puede especificar ficheros JS y CSS necesarios para que se muestren y comporten apropiadamente.

Esto se hace añadiendo class Media: en la definición de la clase:

class LoginForm(AuthenticationForms):
    # las definiciones de campos del formulario

    class Media:
        js = ('js/show-password.js',)
        css = {
            'all': ('css/forms.css',)
        }

Para utilizar estos ficheros en la plantilla hay que incluirlos; parece de perogrullo, pero en la documentación oficial no se explicaba y parecía que Django se ocupaba “milagrosamente” de ello.

Si en la plantilla base se han definido bloques para CSS extra y para JS extra:

#accounts/login.html

{% extends 'base.html' %}
{% load static i18n %}

{% block main_content %} Contenido y el formulario {% endblock main_content %}

{% block meta_title %}{% trans "login" %}{% endblock meta_title %}

{% block extra_css %}{{ form.media.css }}{% endblock extra_css %}
{% block extra_js %}{{ form.media.js }}{% endblock extra_js %}

Espero que sea útil.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.