Drag and & not working when rendered using bootstrap_form template tag

[mick88]

I'm using django-bootstrap3==6.2.2 and render my form using {% bootstrap_form form %}.
The resulting widget renders fine, but drag and drop does not work.

I'm including js using {{ form.media }}.

[gregmuellegger]

Hi. It's hard to know what's going on without having any further context. Do you see any errors in the browser's JavaScript console? Which Django/sortedm2m version are you using?

The best help for me to debug this would be if you could compile a respository that contains a Django project that demonstrates the issue.

[mick88]

I'm using django-sortedm2m==1.2.2. There are no js errors in the browser console.
It looks like bootstrap3 does not render the <ul> and <li> tags, which messes with jquery selectors.

I'll try to fix it myself today, otherwise I will create a sample project later on.
The correct solution may be to write custom layout for bootstrap form renderer.

[mick88]

Temporary workaround:
Custom field renderer with removed implementation of list_to_class

from bootstrap3.renderers import FieldRenderer
class Sortedm2mFieldRenderer(FieldRenderer):
    def list_to_class(self, html, klass):
        return html

To be linked in settings.py:

BOOTSTRAP3 = {
    'form_renderers': {
        'default': 'bootstrap3.renderers.FormRenderer',
    },
    'field_renderers': {
        'default': 'bootstrap3.renderers.FieldRenderer',
        'sorted-m2m': 'path.to.renderers.Sortedm2mFieldRenderer',
    },
}

And rendered using:
{% bootstrap_form form layout='sorted-m2m' %}

[mick88]

@gregmuellegger The only logical solution I can think of is generifying the jquery script to operate on classes instead of tag names so that it's more forgiving if tag name changes. Bootstrap replaces <ul> and <li> tags with <div> using the map below (in list_to_class method of field renderer).

mapping = [
    ('<ul', '<div'),
    ('</ul>', '</div>'),
    ('<li', '<div class="{klass}"'.format(klass=classes)),
    ('</li>', '</div>'),
]

[gregmuellegger]

Using class names instead of tag names sounds good to me. I'm happy to accept a pull request in that regard if that helps with integration for you.

I just want to be sure not to have any bootstrap specific code in sortedm2m