Login

Convert multiple select for m2m to multiple checkboxes in django admin form

Author:
abidibo
Posted:
April 12, 2013
Language:
JavaScript
Version:
1.4
Score:
1 (after 1 ratings)

This is a javascript to call in the Media class of the ModelAdmin instance for the model, requires some additional css.

The goal of such approach is that the add related functionality is supported, and works also with the django-mptt model fields.

The new component can support resize functionality, in such case the jquery-ui resizable script is needed.

For a complete documentation on this, and how to use it inside your project please visit this blog post

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// create a copy of the original function used by django to add the realted field
var dismissAddAnotherPopupCopy = Function("win", "newId", "newRepr", 'return ' + dismissAddAnotherPopup.toString())();

(function($) {

  // overwrite the original function used by django to add the realted field
  dismissAddAnotherPopup = function dismissAddAnotherPopup(win, newId, newRepr) {
    newId = html_unescape(newId);
    newRepr = html_unescape(newRepr);
    var name = windowname_to_id(win.name);
    var elem = document.getElementById('mcheckbox-' + name);
    // if the field was a multiple checkbox 
    if(elem) {
      $(
            '<tr>'
          + '<td><label for="' + name +'_' + newId + '" class="mcheckbox-label">' + newRepr + '</td>'
          + '<td><input type="checkbox" id="' + name.replace(/^id_/, '') + '_' + newId + '" name="' + name.replace(/^id_/, '') +'" value="' + newId + '" checked="checked" /></td>'
          + '</tr>'
        ).appendTo(elem);

      win.close();
    }
    // else call the default function previously copied
    else {
      dismissAddAnotherPopupCopy(win, newId, newRepr);
    }
  }

  // convert a multiple select in a multiple checkbox
  var mselectTOmcheckbox = function mselectTOmcheckbox(selector) {

    var elements = $(selector);

    elements.each(function(index, item) {
      var id = $(item).attr('id'),
          name = $(item).attr('name'),
          options = $(item).children();

      var mcheckbox_table = $('<table/>', {
        id: 'mcheckbox-' + id,
        className: 'mcheckbox-table'
      }).appendTo(
        mcheckbox_container = $('<div/>', {
            className: 'mcheckbox-container'
        })
      );

      options.each(function(index, option) {
        var value = $(option).attr('value'),
            label = $(option).text(),
            selected = $(option).attr('selected');

        var checkbox_row = $(
            '<tr>'
          + '<td><label for="' + name +'_' + value + '" class="mcheckbox-label">' + label + '</td>'
          + '<td><input type="checkbox" id="' + name + '_' + value + '" name="' + name +'" value="' + value + '" ' + (selected ? 'checked="checked"' : '') + '/></td>'
          + '</tr>'
        ).appendTo(mcheckbox_table);
      })

      mcheckbox_container.insertAfter(item);

      try {
        mcheckbox_container.resizable({handles: "se"});
      }
      catch(e) {
        // resizing not supported
        console.log('resizing not supported');
      }

      $(item).nextAll('.help').hide();
      $(item).remove();

    })

  };

  // apply the conversion to the desired elements (change the selector)
  $(document).ready(function() {
    mselectTOmcheckbox('select[id="id_risks_from"]');
  })

})(django.jQuery)

More like this

  1. Django Collapsed Stacked Inlines by applecat 1 year ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 2 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 8 years, 10 months ago
  4. Django admin inline ordering - javascript only implementation by ojhilt 11 years, 3 months ago
  5. Google v3 geocoding for Geodjango admin site by samhag 11 years, 4 months ago

Comments

Please login first before commenting.