Editing Django models in the front end

I try to take advantage of the powerful Django admin in all my web projects, at least in the beginning.

However, as the project evolves and the frontend improves, the usage of the admin tends to be more and more residual.

Adding editing capabilities to the frontend in a modern user interface requires the usage of modal forms, which, to be honest, have always puzzled me for some reason.

This project is not a reusable Django package, but rather a collection of techniques and examples used to cope with modal popups, form submission and validation via ajax, and best practices to organize the code in an effective way to minimize repetitions.

Topics

Contents:

• Basic modals
  • HTML popup windows do not exist
  • A basic modal box with pure Javascript
  • A modal which returns a value
  • Bootstrap 3 modal plugin
• Basic modals with Django
  • Purpose
  • Display the empty dialog
  • Make the modal draggable
  • Organizzazione dei files
• Modals with simple content
  • More flexible server side processing
• Form validation in the modal
  • Handling form submission
  • The formAjaxSubmit() helper
  • Optional callbacks supported by formAjaxSubmit()
• Creating and updating a Django Model in the front-end
  • Creating a new model
  • Updating an existing object
  • Possible optimizations
• Creating and updating a Django Model in the front-end (optimized)
• A fully generic solution for Django models editing in the front-end
• Front-end generic helpers to work with any Model
  • Generic end-points for changing and adding an object
  • Deleting an object
  • Cloning an object
  • Checking user permissions
• Possible enhancements
• References
• Contributing

Sample code

A sample Django project which uses all the techniques discussed here is available on Github:

https://github.com/morlandi/editing-django-models-in-the-frontend

Search docs

• Search Page