AJAX group creation

gistfile1.txt

**************************************************
Django template:
**************************************************

<form id='group_selector_form'>
<select id='group_selector'>
{{ for group in groups }}
  <option value='{{ group.id }}'>{{ group.name }}</option>
{{ endfor }}
</select>
<p>New group? <input id='new_group_name' /></p>
<input type='submit' value='Add Group'/>
</form>

<!-- JQuery to add submission logic to add groups -->
<script>
$(document).ready(function() {
  $('#group_selector_form').submit(function() {
    var group_name = $('#new_group_name').val();
    if (group_name != '') {
      var data = {'group_name': group_name};
      $.ajax(
        'url': '/groups/add',
        'type': 'POST',
        'data': data,
        'success': function(result) {
          // create new option element and add to selector
          var $newOption = $('<option></option>');
          $newOption.attr('value', result.group_id);
          $newOptions.text(result.group_name);
          $('#group_selector').append(newOption);

          // blank group name form field
          $('#new_group_name').val('');
      },
        'error': function() {
          alert('Unable to add group.');
        }
      } else {
        alert('Enter a group name.');
      }
);
  });
});
</script>

**************************************************
View implementing /groups/add endpoint:
**************************************************

import simplejson

...

def group_add(request):
  if request.method == 'POST':
    # put logic to add the group here

    # cook up a JSON response
    response = {
      'group_id': group.pk
    }

    # return data as JSON
    return HttpResponse(
        simplejson.JSONEncoder(encoding='utf-8').encode(response),
        mimetype='application/json'
    )