JavaScript & CSS — Django Suit 0.2.21 documentation

# JavaScript & CSS

## JavaScript goodies

### Inlines hook

When working with Django inlines and JavaScript, very often we want to hook/attach to event - when new inline row is added. Django Suit gives us such chance.

Use JavaScript `Suit.after_inline.register` to register/attach your function to new inline addition event.

    $(function () {
        Suit.after_inline.register('my_unique_func_name', function(inline_prefix, row){
            // Your code here
            console.info(inline_prefix)
            console.info(row)
        });
    });

### jQuery

Django Suit provides jQuery (currently v1.8.3) and it is using custom namespace to avoid collisions between different apps which also provide jQuery.

To use jQuery from Django Suit package:

    // Use Suit.$ instead of $
    Suit.$('.my-selector').addClass('my-class');

    // Or for larger code you can wrap it in following way:
    (function ($) {
        // Here you can use regular $ sign
        $('.my-selector').addClass('my-class');
    }(Suit.$));

    // On document ready example:
    (function ($) {
      $(function () {
          $('.my-selector').addClass('my-class');
      });
    }(Suit.$));

## CSS goodies

Original `collapse` and `wide` fieldset classes are also supported by Django Suit. Usage:

    from django.contrib.admin import ModelAdmin

    class CountryAdmin(admin.ModelAdmin):
        ...
        fieldsets = [
            (None, {'fields': ['name', 'description']}),

            ('Advanced settings', {
                'classes': ('collapse',),  # Specify fieldset classes here
                'fields': ['hidden_checkbox', 'hidden_choice']}),
        ]

- `collapse` CSS class makes fieldset collapsable:

- `wide` CSS class makes fieldset labels wider

- `full-width` CSS class hides field label and makes field controls in full width (useful for wysiwyg editors). Because label will be hidden, this class is intended to use one field per fieldset and fieldset title will be used as field title.