Entradas sobre "javascript":

Utilizar javascript o CSS en el admin de Django

Es realmente sencillo utilizar javascript o CSS propio en el sitio de administración de nuestro proyecto Django. Para ello podemos añadir en nuestros ModelAdmin los archivos JS o CSS que necesitemos utilizando la clase Media en los modelos de administración. Aquí tenemos un ejemplo:

from django.db import models
from django.contrib import admin

from myapp.hotels.models import Modelo

class ModeloAdmin(admin.ModelAdmin):
    ...
    class Media:
        css = { "all": ("mis_estilos.css",) }
        js = ("/media/javascript/mi_javascript.js",)

admin.site.register(Modelo, ModeloAdmin)

Como el admin de Django utiliza jQuery podemos utilizar la función $(document).ready() de jQuery para que nuestro javascript se ejecute cuando el DOM se haya terminado de cargar. De esta forma nuestro archivo mi_javascript.js quedaría de la siguiente manera:

(function($) {
    $(document).ready(function($) {
         // aquí podemos utilizar jquery / javascript...
         alert('¡Ha funcionado!');
    });
})(django.jQuery);

Utilizar jQuery en el admin de Django

Al personalizar alguna plantilla del sistema de administración podemos querer usar jQuery. Como el admin de Django ya hace uso de jQuery podemos utilizarlo directamente sin necesidad de incluir la propia librería. Pero enseguida nos daremos cuenta de que no podemos utilizar el alias $ ya que el admin utiliza la opción noConflict de jQuery. El alias que define el sistema de administración para usar jQuery es django.jQuery.

Por ello deberemos incluir el código jQuery que queramos ejecutar utilizando el alias django.jQuery como en el siguiente ejemplo:

{% block extrahead %}
{{ block.super }}

<script type="text/javascript">
    (function($) {
        $(document).ready(function($) {
            // código jquery para ejecutar en cuanto se haya cargado la página
         });
    })(django.jQuery);
</script>

{% endblock %}