Login

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

Author:
abidibo
Posted:
April 12, 2013
Language:
JavaScript
Version:
1.4
Tags:
django-admin multiplecheckboxfield multiple-select django-mptt
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. MPTTModelAdmin by anentropic 5 years, 4 months ago
  2. Javascript Chain Select Widget by ogo 6 years, 9 months ago
  3. django-mptt enabled replacement for SelectBox.js by anentropic 5 years, 4 months ago
  4. MultiSelectField with comma separated values (Field + FormField) by quinode 2 years, 9 months ago
  5. django-mptt enabled FilteredSelectMultiple m2m widget by anentropic 5 years, 4 months ago

Comments

Please login first before commenting.