django admin - count characters and show remaining space in text fields which are limited

user_903790 0
Viewed 2817

I have some models which have TextField() with limitation like "only 85 available" and I want to write a js code which counts the remaining free space and shows the user.

but in admin templates, i see only some templates and i dont know which template i should put the code in. and also, i only want to count remaining space on limited fields and not on all fields of model.

i have tried with template admin > edit_line > stacked.html, but nothing shows up in admin

django-admin django python
1 Answers

(I created a form field widget to achieve this: https://github.com/timmyomahony/django-charsleft-widget)

You don't override admin templates, instead you create a widget (based on the default TextInput widget) that adds some extra JS to show the remaining characters: 

class CharsLeftInput(forms.TextInput):                             
    def render(self, name, value, attrs=None):
        if value is None:
            value = ''
        final_attrs = self.build_attrs(attrs, type=self.input_type, name=name)
        if value != '':
            final_attrs['value'] = force_unicode(self._format_value(value))
        maxlength = final_attrs.get('maxlength',False)
        if not maxlength:
            return mark_safe(u'<input%s />'%flatatt(final_attrs))
        current = force_unicode(int(maxlength) - len(value))
        html = u"""
            <span class="charsleft charsleft-input">
            <input %(attrs)s /> 
            <span><span class="count">%(current)s</span> characters remaining</span>
            <span class="maxlength">%(maxlength)s</span>
            </span>
        """ % { 
            'attrs':flatatt(final_attrs),
            'current':current,
            'maxlength':int(maxlength),
        }
        return mark_safe(html)

    class Media:
        css = {'screen':('charsleft-widget/css/charsleft.css',),}
        js = ('charsleft-widget/js/charsleft.js',)

and the javascript: 

jQuery(function($){
    $.fn.charsLeft = function(options){
        var defaults = {        
            'source':'input',
            'dest':'.count',
        }
        var options = $.extend(defaults, options);

        var calculate = function(source, dest, maxlength){
            var remaining = maxlength - source.val().length;
            dest.html(remaining);
            /* Over 50%, change colour to orange */
            p=(100*remaining)/maxlength;
            if(p<25){
                dest.addClass('orange');
            }else if(p<50){
                dest.addClass('red');
            }else{
                dest.removeClass('orange red');
            }
        };

        this.each(function(i, el) {
            var maxlength = $(this).find('.maxlength').html();
            var dest = $(this).find(options.dest);
            var source = $(this).find(options.source);
            source.keyup(function(){
                calculate(source, dest, maxlength)
            });
            source.change(function(){
                calculate(source, dest, maxlength)
            });
        });
    };

    $(".charsleft-input").charsLeft({
            'source':'input',
            'dest':".count",
    });
});

and you can use the widget on particular CharField fields in your admin model: 

from django.contrib import admin
from widgets import CharsLeftInput

class TestForm(forms.Form):
    field_one = forms.CharField(widget=CharsLeftInput())
    ....

class TestAdmin(admin.ModelAdmin):
    form = TestForm

you will probably need to play around with it to get exactly what you want, but you can see the code in the repo along with some more examples

user_3963000
Related