django-bootstrap-modal-forms
django-bootstrap-modal-forms copied to clipboard
trco
Ported to Bootstrap5 and dropped jQuery support
As bootstrap5 is now in beta3, I ported this project to plain JS using the new bootstrap API
BS4 and 5 can be used independently because BS4 requires jQuery (which still is the original file) and BS5 got a new JS source.
@comfix Wow. That's great contribution and I will definitely take it into consideration and include it as soon as possible.
Regarding the copyright comment in js file, I'm planning to remove it from all the files. Also the default js file, where my name is written. I think that based on the current number of contributors these comments and names don't make sense anymore and we should let the package be "owned" by the community ;)
Yeah sure, go ahead and do that. I just copied the whole file and changed my name ;)
Since I stared a new project, I've been fiddling with the modals some more and have in-cooperated some more changes like styling support and support for dynamically loading error messages for forms instead of reloading the form entirely which, in my case, removes the selected file from a file input.
If you are interested in those as well let me know. I will push them to my repo regardless :)
I would be definitely interested in dynamic loading of messages. Please make separate PR. On the other hand I was never interested to include styling functionallity, since my vision is that package should be solving only modal forms logic.
Okay will do.
What I mean by styling is having a javascript variable indicating modal size e.g. modal-lg and one if the modal should be vertically centered.
=> basically adding the bootstrap classes to the modal and removing them on 'destruction'
@comfix Wow That would be awesome if there will be no jQuery dependency (I fought to make it work on version 2.1) and at the end I fgure it out it was a slim version of the jQuery in the HTML template, replaced it by a min version.
I've been fighting also with the styling thing since the get go, I've also posted some info about it. but since Uros came up with a multiple Modal utilization, I used it. but definitely would be great to have that dynamic, size and center styling in the package.
And the dynamic loading of messages is a great feature too.
Thank you Guys.
I was testing this code and ran into the following bug in Bootstrap v5.0.0. Until it is fixed, a workaround is to load the Bootstrap <script> tag in <body> instead of <head>.
https://github.com/twbs/bootstrap/issues/33840
Hey @comfix, thank you for this PR. @trco are any dates known when it will be released?
hello comfix, or anyone that can help,
didn't now where to post that !
1 - is there a way to have formURL as a dynamic django url, since it is not working if you put modal declaration like this in a external .js file.
2 - since a page can have many buttons or menu links, ... that fire a modal, it would be much cleaner to have a class name, rather than Id, so you can select all event based on class, wich will be the same for all buttons, menu link, in the whole page, (as Uros did it) means by querySelectorAll
document.addEventListener('DOMContentLoaded', (e) => {
modalForm(document.getElementById('create_client_modal'), {
formURL: "/client/create_modal/",
errorClass: 'is-invalid'
})
});
Bottom line is : ############
html : <button class="create_client_modal btn btn-primary" type="button" data-form-url="{% url 'clients:create_client_modal' %}"
Create Client dynamic js : formURL = "{% url 'clients:create_client_modal')"
tried with : modalForm.getAttribute("data-form-url"),
but didn't work.
thank you.