Enable Django admin functionality at frontend with inlines

Question

I have decided to move some functionality from my admin website into the frontend. Functionality includes the administration of one model with some foreign key inlines.

For that I have installed django-dynamic-formset JQuery plugin (link git) and struggling with it already for couple of days. Here is one of the problems.

The same functionality is already implemented in Django admin. I can add, modify, remove inlines and modify model instance as I want. I am wondering why should I use this JQuery plugin and why there are not so many good tutorials on the topic in the Internet?

I need a good and recent example of how to use django formsets or inline formsets at the frontend side without third-party JS files. I whould be glad if it has links (not checkboxes) to remove inline items and add button which will correctly add new inline.

To be more specific because the question was considered to be too broad:

I have two models School and SchoolPlace:

class School(models.Model):
     name = models.CharField(_('School name'), max_length=100)

class SchoolPlace(models.Model):

    school = models.ForeignKey(School, verbose_name=_('school place'), related_name='school_places', blank=True, null=True)

    name = models.CharField(_('School place name'), max_length=200)

    city = models.ForeignKey(City, blank=True, null=True, verbose_name=_('city'),
                     help_text='city')

There are also corresponding forms:

class SchoolForm(forms.ModelForm):

      name = forms.CharField(
                             label=_('Name'),
                             widget=forms.TextInput(attrs={
                                'placeholder': _('school name')}),
                              max_length=100, required=True)

class SchoolPlaceForm(forms.ModelForm):

    name = forms.CharField(label=_('Name'),
                            widget=forms.TextInput(
                                        attrs={'placeholder': _('school place name')}),
                                        max_length=200,
                                        required=False)

    city = forms.ModelChoiceField(label=_('City'),
                                  widget=forms.Select(attrs={'class': 'ui search dropdown'}),
                                  queryset=City.objects.all(), required=False)

    class Meta:
        model = SchoolPlace
        fields = ['name','city']
        exclude = ['school']

I would like to edit these two models in the same way as it is done in Django admin, but only at my own frontend. As far as all the js files are already in django.contrib.admin I would like to do it without usage of side applications and plugins.

I need the same functionality as in Django admin: add, delete, modify SchoolPlace inlines. Here is the screenshot:

Answer 1

I would suggest that you used the admin forms (in your views) or admin views (on custom urls) and just altering the admin templates, or even just loading the admin javascript, you can find it into the admin templates.

Answer 2

This task requires the support on a both frontend and backend sides.

It seems the simplest way is the using of django-admin forms itself on frontend if this is acceptable for you.

Any django admin form recognizes the ?_popup=1 parameter in the URL to suppresses the admin page decorations and serve just a form. All necessary JavaScript and CSS styles will be included. So admin forms could be shown on frontend in the iframe. A small hacking around on JavaScript-level is still required to adjust a size of iframe to the form and notify the page then form is closed.