Публикации с меткой «jquery»

Перевод публикации jQuery in the admin с DjangoAdvent

Обновления r12297 произвели настоящую сенсацию: в директории django/contrib/admin/media/js появился новый файл под названием jquery.js. В администрировании Django это изменение являет собой начало новой эры, эры модных функций, красивых виджетов и улучшенного юзабилити.

Итак друзья, в связи с сильно затянувшимися новогодними каникулами и полным отсутствием денег, ищу любую оплачиваемую удаленную работу “по специальности” (можно и не удаленную, но тогда в Тюмени или в Москве в с предоставлением жилья). Под “специальностью” надо понимать django, python, SEO, HTML/CSS верстка, javascript’овые фичи и пр. Люблю и немного умею оптимизировать проекты под высокие нагрузки. Работал со большинством реляционных систем управления базами данных.

Рассмотрю любые предложения. Пишите: markeev@gmail.com.

Наши пользователи следят за спецпредложениями авиакомпаний и дешевыми перелетами, каждому интересно своё направление, пунктов вылета и прилета — тысячи, пользователи хотят одновременно следить за несколькоми городами, странами или регионами. Появилась задача — как предоставить удобный механизм подписки? Без долгого тыканья в мульти селект, без кнопок «Добавить пункт вылета». Ответ выглядит так —

Решением стал контрол из Фейсбука и Контакта — пользователи знакомы с ним, а значит не нужно объяснять как он работает. Осталось скрестить его с django.

Пишу на python, javascript
использую фреймворки django, jquery

по вопросам сотрудничества пишите devex.soft@gmail.com

Django предоставляет отличные средства для быстрого построения back-end без лишних телодвижений. Однако создание на его основе галлереи связано с множеством ручной работы по загрузке каждого файла в отдельности.

Решений у этой проблемы несколько:

1. загрузка архива и его распаковка на сервере,
2. использование специального поля,
3. имитация множественных post-запросов.

Я выбрал последний вариант, так как в этом случае нужно внести минимум изменений. Все операции выполняются на клиенте. Использовать для этого будем swfuploader.

Задумка проста, модифицируем стандартный интерфейс добавления, так что бы перехватывать событие сохранения объекта. Заполненные поля будем использовать в качестве шаблона для создания множества объектов для выбранных файлов.

Итак выполним следующие действия.

Решений по асинхронному сохранению Form в Django в интернете описано множество. Но каждая реализация имеет свои особенности, одни почему то показалась трудоемкими по внедрению(много кода ручками ваять, возможно было лень провести рефакторинг, ну это уже другая история), другие наоборот были лишь указанием для реализации и предлагали данные собирать ручками. В общем от каждого этого решение скребло на душе.

Недавно и до меня дошло озарения(лучше поздно, чем никогда), и я понял, что УЖЕ пользуюсь асинхронной валидацией форм, меня оно устраивало - его было легко внедрять, и кода было минимум. Основой был django-ajax-validation проект, на его основе и построен следующий пример.
Для реализации определил следующие критерии:
- Универсальный механизм сбора данных на клиенте.
- Минимум кода при внедрении.

1. Серверная часть

В реализации немного дорабатываем и расширяем серверную часть обработки запроса. Для работы понадобиться simplejson, его можно скачать тут.

Поправив странный момент с перетиранием дополнительных входящих параметров в функцию обрабатывающую запрос получился следующий код(submit_form.py):

from django.utils.functional import Promise
from django.utils.encoding import force_unicode
from simplejson import JSONEncoder
from django import forms
from django.http import HttpResponse
from django.views.decorators.http import require_POST

class LazyEncoder(JSONEncoder):
    def default(self, obj):
        if isinstance(obj, Promise):
            return force_unicode(obj)
        return obj

def submit_form(request, *args, **kwargs):
    form_class = kwargs.pop('form_class')
    complete_func = kwargs.pop('complete_func', None)
    extra_args_func = kwargs.pop('callback', lambda request, *args, **kwargs: {})
    kwargs_form_data = extra_args_func(request, *args, **kwargs)
    kwargs_form_data['data'] = request.POST
    form = form_class(**kwargs_form_data)
    if form.is_valid():
        result_data = {
            'saved': True,
        }
        if complete_func:
            complete_func(request,result_data,kwargs_form_data,*args,**kwargs)
    else:
        if request.POST.getlist('fields'):
            fields = request.POST.getlist('fields') + ['__all__']
            errors = dict([(key, val) for key, val in form.errors.iteritems() if key in fields])
        else:
            errors = form.errors
        final_errors = {}
        for key, val in errors.iteritems():
            if not isinstance(form.fields[key], forms.FileField):
                html_id = form.fields[key].widget.attrs.get('id') or form[key].auto_id
                html_id = form.fields[key].widget.id_for_label(html_id)
                final_errors[html_id] = val
        result_data = {
            'saved': False,
            'errors': final_errors,
        }
    json_serializer = LazyEncoder()
    return HttpResponse(json_serializer.encode(result_data), mimetype='application/json')
submit_form = require_POST(submit_form)

В метод получает на вход объект запроса и дополнительные аргументы, данные проверяются на валидность и в случае успешного завершения вызывают функцию сохранения данных, в случае ошибки собирается текст ошибок и передается в качестве ответа. Останавливаться на описании алгоритма не буду, тут вроде бы и так все понятно, все тонкости будут понятны на примере (см. 3. Внедрение)

2. Клиентская часть

Дорабатываем клиентскую часть с использованием jquery 1.3.2(jquery-ajax-submit.js):

(function($)    {
    function form_data(form)   {
        return form.find("input[checked], input[type='text'], input[type='hidden'], input[type='password'], input[type='submit'], option[selected], textarea").filter(':enabled');
    }
    function inputs(form)   {
        return form.find("input, select, textarea")
    }
 
 $.fn.last_submit_data = null;
    
    $.fn.submit_form = function(url, settings) {
        settings = $.extend({
            type: 'table',
            callback: false,
            fields: false,
        }, settings);
        var form = $(this);
 
  var params = {};
        form_data(form).each(function() {
            params[ this.name || this.id || this.parentNode.name || this.parentNode.id ] = this.value; 
        });
        
        var status = false;
        if (settings.fields) {
            params.fields = settings.fields;
        }
        $.ajax({
            async: false,
            data: params,
            dataType: 'json',
            error: function(XHR, textStatus, errorThrown)   {
                status = false;
            },
            success: function(data, textStatus) {
                status = data.saved;
                if (!status)    {

                if (settings.callback)  {
                    settings.callback(data, form);
                }
                else{
                    if (settings.type == 'p')    {
                        inputs(form).parent().prev('ul').remove();
                        inputs(form).parent().prev('ul').remove();
                        $.each(data.errors, function(key, val){
                            if (key == '__all__'){
                            var error = inputs(form).filter(':first').parent();
                            if (error.prev().is('ul.errorlist')) {
                            error.prev().before('
' + val + '
');
                            }
                            else{
                            error.before('
' + val +'
');
                            }
                            }
                            else{
                            $('#' + key).parent().before('
' + val + '
');
                            }
                            });
                        }
                        if (settings.type == 'table')   {
                            inputs(form).prev('ul').remove();
inputs(form).filter(':first').parent().parent().prev('tr').remove();
                            $.each(data.errors, function(key, val)  {
                            if (key == '__all__')   {
                           inputs(form).filter(':first').parent().parent().before('
' + val + '.

');
                            }
                            else{
                            $('#' + key).before('
' + val + '
');
                            }
                            });
                        }
                        if (settings.type == 'ul')  {
                            inputs(form).prev().prev('ul').remove();
 inputs(form).filter(':first').parent().prev('li').remove();
                            $.each(data.errors, function(key, val)  {
                            if (key == '__all__')   {
                            inputs(form).filter(':first').parent().before('
' + val + '

');
                            }
                            else {
                            $('#' + key).prev().before('
' + val + '
');
                            }
                            });
                        }
                    }
                }
    $.fn.last_submit_data = data
            },
            type: 'POST',
            url: url
        });
        return status;
    };
})(jQuery);

Вызвать отправку данных можно следующей строчкой кода $(form).submit_form(url, {type: 'table'}), где form - jquery строка поиска элемента(в данном примере результатом поиска должен быть один элемент!), url - урл на который нужно слать запросы сохранения. При вызове будет отослан синхронный http запрос. Можно конечно сделать его асинхронным, но тогда необходимо предусмотреть деактивирование кнопки "Отправить данные" для того, чтобы нервные пользователи зря не гоняли запросы на сервер.
Если пролистать код по диагонали, то можно заметить следующее объявление "$.fn.last_submit_data = null", в данной переменной будет содержаться результат последнего выполнения функции.

3. Внедрение

Перейдем к непосредственному использованию. Пол дела сделано, теперь внедрим в приложение и посмотрим на сколько стало удобнее :) или не стало, такое тоже бывает. Для начала опишем стандартный разделы приложения.
models.py:

from django.db import models

class MyModel(models.Model):
    name = models.CharField(max_length=150)
    description = models.TextField

forms.py

from django import forms
from myapp.models import MyModel

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['name', 'description']

Для сохранения результатов запроса давайте в файл views.py добавим функцию сохранения значений.
views.py

from django.shortcuts import render_to_response
from django.template import RequestContext
from myapp.forms import MyForm
from myapp.models import MyModel

def mymodel_form(request):
    # какой то код логики
    return render_to_response("mymodel_form.html", {'form' : MyForm}, RequestContext(request))

def item_save(request,result_data,kwargs_form_data,*args,**kwargs):
    item = MyModel();
    form = MyForm(instance = item, **kwargs_form_data)
    form.save(commit=False)
    try:
        # Код по дополнительной обработке данных
        item.save()
    except Exception:
        result_data['valid'] = False
        result_data['error'] = 'Вознилка ошибка при сохранении'

Как вы уже заметили в функции сохранения нет нечего особенного, она лишь реализует самый простой механизм обработки и сохранения данных, где
request - непосредственно объект запроса;
kwargs_form_data - данные с формы;
*args - дополнительные аргументы;
**kwargs - дополнительные именованные аргументы.
Зарегистрируем эти функции в файле url.py.
url.py

from django.conf.urls.defaults import *
from myapp.forms import MyForm
from myapp.views import *
from myapp.submit_form import submit_form

urlpatterns = patterns('',
    url(r'^form/$', mymodel_form, name='from'),
    url(r'^submit/$', submit_form, {'form_class': MyForm, 
        'callback': lambda request, *args, **kwargs: { },
        'complete_func': item_save,
        }, 'submit'),
)

Немного разберем что за параметры необходимо передать для функции submit_form:
form_class - класс формы;
callback - функция для обработки дополнительных параметров переда валидацией, результатом выполнения ожидается словарь содержащий данные которые будут переданы в форму;
complete_func - функция по обработки результата при успешной валидации;

Пример не будет закончен без описание шаблона.
mymodel_form.html

...

{{ form }}
...

Внимание: не забудте подключить на страницу jquery скрипты!

Ну вот и все, решение готово, запускаем и убеждаемся что работает как часы. Подсумировав можно сказать, что для внедрения данного метода вам понадобиться определить функцию по генерированию основного html контента(view.py), функцию по обработке результата синхронного запроса(view.py), подключить их в url конфиге, и дописать javascript функцию обработки результата ответа на стороне клиента. Считаю что поставленная задача выполнена. На последок можно сказать что есть тонкости и недоработки в данной реализации :), без этого жить было бы скучно. А как вы решаете данную задачу?!

DjangoDash is over. Many lines of code were written and many deleted, but I'm sure, that all participants have got some lessons from this event. Rapid development, testing, deployment. Working under hard time limits, etc..

I've done almost all items from my TODO list, and a new django application was born this weekend — django-antichaos. It's only target is to simplify tag cloud editing. I have an old blog about photography, and it's tag cloud huge and messy after few years. The django-antichaos tries to solve this problem. It is an instrument to merge and rename tags easily, using Drag&Drop.

To show abilities of this reusable application, I've captured this short screen cast. Please, take a look, and you don't regret:

As it was said, django-antichaos is reusable. This means, that it can be used in any project, which uses django-tagging or django-tagging-ng. All sources are available at GitHub. Fork it, play with it, send patches back or make donations!

I think, that DjangoDash allows us to acquire new experience and skills, furthermore, it is very funny event with some competition elements!

DjangoDash is over. Many lines of code were written and many deleted, but I'm sure, that all participants have got some lessons from this event. Rapid development, testing, deployment. Working under hard time limits, etc..

I've done almost all items from my TODO list, and a new django application was born this weekend — django-antichaos. It's only target is to simplify tag cloud editing. I have an old blog about photography, and it's tag cloud huge and messy after few years. The django-antichaos tries to solve this problem. It is an instrument to merge and rename tags easily, using Drag&Drop.

To show abilities of this reusable application, I've captured this short screen cast. Please, take a look, and you don't regret:

As it was said, django-antichaos is reusable. This means, that it can be used in any project, which uses django-tagging or django-tagging-ng. All sources are available at GitHub. Fork it, play with it, send patches back or make donations!

I think, that DjangoDash allows us to acquire new experience and skills, furthermore, it is very funny event with some competition elements!

Интро Что главное в интернете? Полезная информация и общение. И все в сети строиться вокруг этих 2-х понятий. Сегодня мы займемся общением =) Точнее инструментом для общения - написанием древовидных комментариев на Django. Созданием универсальных древовидных комментариев с добавлением при помощи Ajax. Материализованные пути Вначале расскажу об одном из представлений деревьев в БД. Материализованные пути (Materialized Path) - на мой [...]

По моему скромному мнению, сейчас найти правильный сниппет, показывающий как реализовать автозаполнение на том или ином языке программирования с использованием того или иного JavaScript фреймворка - пустяковое дело.

Так что будем считать, что сегодня просто сама по себе настала очередь связки jQuery + Django. Реализация виджета автозаполнения в этой связке - проста до ужаса. Особенно, когда используется великолепный jQuery Autocomplete plugin.

Вся идея реализации состоит в следующем:

1. Определяем какие данные будут использоваться в автозаполнении (локальные или удаленные)
2. Если данные удаленные, пишем view и добавляем этот view в urlpatterns
3. Получаем автозаполняемое поле

Но чтобы потом в дальнейшем по сто раз не дописывать этот виджет я чуточку его модифицировал. И посему Вы можете указать какие поля являются зависимыми от текущего (это например, очень полезно в связке страна - город, ведь незачем выбрав страну Украина, автодополнять город Амстердам). Это раз, а два - Вы можете указать какие именно опции плагина вам необходимы для этого поля.

Ну что ж, перейдем к программному коду. Для начала сам виджет:

from django.core.urlresolvers import reverse, NoReverseMatch
from django.newforms import HiddenInput, TextInput
from django.utils import simplejson
from django.utils.safestring import mark_safe

class AutocompleteWidget(TextInput):
    """
    Autocomplete widget to use with jquery-autocomplete plugin.

    Widget can use for static and dynamic (AJAX-liked) data. Also
    you can relate some fields and it's values'll posted to autocomplete
    view.

    Widget support all jquery-autocomplete options that dumped to JavaScript
    via django.utils.simplejson.

    **Note** You must init one of ``choices`` or ``choices_url`` attribute.
    Else widget raises TypeError when rendering.
    """
    def __init__(self, attrs=None, choices=None, choices_url=None, options=None, related_fields=None):
        """
        Optional arguments:
        -------------------

            * ``choices`` - Static autocomplete choices (similar to choices
            used in Select widget).

            * ``choices_url`` - Path to autocomplete view or autocomplete
            url name.

            * ``options`` - jQuery autocomplete plugin options. Auto dumped
            to JavaScript via SimpleJSON

            * ``related_fields`` - Fields that relates to current (value
            of this field will sended to autocomplete view via POST)
        """
        self.attrs = attrs or {}
        self.choice, self.choices, self.choices_url = None, choices, choices_url
        self.options = options or {}

        if related_fields:
            extra = {}
            if isinstance(related_fields, str):
                related_fields = list(related_fields)

            for field in related_fields:
                extra[field] = "%s_value" % field

            self.extra = extra
        else:
            self.extra = {}

    def render(self, name, value=None, attrs=None):
        if not self.choices and not self.choices_url:
            raise TypeError('One of "choices" or "choices_url" keyword argument must be supplied obligatory.')

        if self.choices and self.choices_url:
            raise TypeError('Only one of "choices" or "choices_url" keyword argument can be supplied.')

        choices = ''

        if self.choices:
            self.set_current_choice(value)
            choices = simplejson.dumps([unicode(v) for k, v in self.choices], ensure_ascii=False)
            html_code = HiddenInput().render(name, value=value)
            name += '_autocomplete'
        else:
            html_code = ''

        if self.choices_url:
            try:
                choices = simplejson.dumps(reverse(str(self.choices_url)))
            except NoReverseMatch:
                choices = simplejson.dumps(self.choices_url)

        if self.options or self.extra:
            if 'extraParams' in self.options:
                self.options['extraParams'].update(self.extra)
            else:
                self.options['extraParams'] = self.extra

            options = ', ' + simplejson.dumps(self.options, indent=4, sort_keys=True)
            extra = []

            for k, v in self.extra.items():
                options = options.replace(simplejson.dumps(v), v)
                extra.append(u"function %s() { return $('#id_%s').val(); }\n" % (v, k))

            extra = u''.join(extra)
        else:
            extra, options = '', ''

        final_attrs = self.build_attrs(attrs)
        html_code += super(AutocompleteWidget, self).render(name, self.choice or value, attrs)

        html_code += u"""
<script type="text/javascript"><!--
    %s$('#%s').autocomplete(%s%s);
--></script>
""" % (extra, final_attrs['id'], choices, options)

        return mark_safe(html_code)

    def set_current_choice(self, data):
        if not self.choices:
            raise ValueError('"choices" attribute was not defined yet.')

        for k, v in self.choices:
            if k == data:
                self.choice = v
                break

    def value_from_datadict(self, data, files, name):
        if not self.choices:
            return super(AutocompleteWidget, self).value_from_datadict(data, files, name)

        autocomplete_name = name + '_autocomplete'

        if not autocomplete_name in data:
            self.set_current_choice(data[name])
            return data[name]

        for k, v in self.choices:
            if v == data[autocomplete_name]:
                self.set_current_choice(k)
                return k

Теперь примеры его использования:

forms.py
from django import newforms as forms
from django.utils.translation import ugettext as _

from myproject.widgets import AutocompleteWidget

SPORTS_CHOICES = (
    ('basketball', _('Basketball')),
    ('football', _('Football')),
    ('hockey', _('Hockey')),
)

class SampleForm(forms.Form):
    name = forms.CharField(label=_('Name'))
    country = forms.CharField(label=_('Country'),
        widget=AutocompleteWidget(choices_url='autocomplete_countries', related_fields=('city',)))
    city = forms.CharField(label=_('City),
        widget=AutocompleteWidget(choices_url='autocomplete_cities', related_fields=('country',)))
    sports = forms.ChoiceField(label=_('Sports'), choices=SPORTS_CHOICES,
        widget=AutocompleteWidget(options={'minChars': 0, 'autoFill': True, 'mustMatch': True}))

urls.py
from django.conf.urls.defaults import *

urlpatterns = patterns('',
    url('/path/to/cities/autocomplete/', 'views.autocomplete_cities', name='autocomplete_cities'),
    url('/path/to/countries/autocomplete/', 'views.autocomplete_countries', name='autocomplete_countries'),
)

views.py
from myproject.models import City

def autocomplete_cities(request):
    def results_to_string(results):
        if results:
            for r in results:
                yield '%s|%s\n' % (r.name, r.pk)

    city = request.REQUEST.get('q', None)
    country = request.REQUEST.get('country', None)

    if city:
        cities = City.objects.filter(city__istartswith=city)
    else:
        cities = City.objects.all()

    if country:
        cities = cities.filter(country__name=country)

    cities = cities[:int(request.REQUEST.get('limit', 15))]
    return results_to_string(cities, mimetype='text/plain')

А вот как это выглядит ВРЛ:

• Автозаполнение поля "City" (удаленные данные)
  
• Автозаполнение поля "Country" (удаленные данные)
  
• Связь при автозаполнении между полями "Country" и "Сity"
  
• Автозаполнение поля "Sports" (локальные данные)
  

За сим прощаюсь и поздравляю всех с наступающим долгожданным летом!