Select or Create widget

class SelectOrCreate(Select):
    """
    Base class for all <select> widgets with chosen js.
    """
    def __init__(self, form, url, attrs=None, choices=(), ):
      super(SelectOrCreate, self).__init__(attrs, choices)
      self.form = form
      self.url = url

    def render(self, name, value, attrs=None, choices=()):
      output = [super(SelectOrCreate, self).render(name, value, attrs, choices), ]
      final_attrs = self.build_attrs(attrs, name=name)
      ret = {'final_attrs': final_attrs,
             'STATIC_URL': settings.STATIC_URL,
             'id': final_attrs['id'],
             'form': self.form,
             'redirect_url': self.url}
      output.append(mark_safe(render_to_string('selectorcreatewidget.html', ret)))
      return mark_safe('\n'.join(output))




selectorcreatewidget.html:

<a href="#" name="add_dialog" data-id="{{ id }}">
  <img width="10" height="10" alt="Add Another"
       src="{{ STATIC_URL }}admin/img/icon_addlink.gif" />
</a>

<div id="{{ id }}-dialog" style="display: none;" title="Add Another">
    {% csrf_token %}
    <div id="form-dialog">
      {{ form.as_p }}
    </div>
    <p><input type="submit" value="Add" name="add_another_{{ id }}"
              data-url="{% url redirect_url %}"/></p>
</div>



example.js 
// Generated by CoffeeScript 1.7.1
$(function() {
  $('a[name=add_dialog]').click(function() {
    var dialog, id;
    id = $(this).data('id');
    dialog = $('#' + id + '-dialog').dialog();
    return false;
  });
  return $('input[name=add_another_id_series]').click(function() {
    var data, form;
    form = $(this).parent().parent().find('#form-dialog');
    data = {
      param1: $('#param1').val(),
      param2: $('#param2').val(),
      param3: $('#param3').val(),
      param4: $('#param4').val(),
      param5: $('#param5').val()
    };
    return $.ajax($(this).data('url'), {
      type: 'POST',
      beforeSend: function(request) {
        request.setRequestHeader('Cache-Control', 'no-cache');
        request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        return request.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
      },
      data: data,
      success: function(data) {
        if (data.status === 'Wrong') {
          $(form).html(data.form);
        }
        if (data.status === 'Ok') {
          $('#id_series').append('<option value="' + data.id + '">' + data.name + '</option>');
          $('#id_series').val(data.id);
          $('#id_series-dialog').dialog('close');
        }
      }
    });
  });
});