I have a lot of this stuff worked out, but for Bootstrap 3. I've done this in a
UX library I've
used for various projects, so it's kinda of a need-driven collection of
widgets, CBV's and
form components - not exactly something for general use.
I've made it available on Gitlab, so you can see how you add various modals to
a single
view. In my case I mostly used a context menu to launch the modals, but I never
bothered
with the Ajax part, instead the forms get submitted normally, generating a page
reload.
That part you have to do yourself, but there's a lot in there you can build on:
- Wrapper for a Form[1]
- Mixins to handle addtional forms[2]
- Template tags to render a bootstrap 3 modal[3]
- etcetera...
And here's an example of a view from a project management tool that I wrote
with it:
class ProjectDetailView(DefaultPageMixin, AdditionalFormsMixin,
ContextMenuMixin, generic.DetailView):
model = models.Project
context_object_name = 'project'
template_name = 'view/project.html'
def generate_context_menu(self) -> None:
self.add_active_menu_link('view_project', _('View Project'), icon='eye')
self.add_context_menu_modal(
'edit_project', _('Edit Project'), 'edit-project', icon='pencil',
title=_('Edit current project')
)
self.add_context_menu_modal(
'add_task', _('Add Milestone'), 'add-task', icon='plus-square',
)
def generate_additional_forms(self):
proj_update_url = reverse('core:project_edit',
kwargs={'slug': self.object.slug})
task_create_url = reverse('core:project_task_create')
self.add_additional_form(
'project_update_form', forms.ProjectForm, proj_update_url,
model_instance=self.object,
)
self.add_additional_form(
'add_milestone_form', forms.NewProjectTaskForm, task_create_url,
initial={'project': self.object, 'is_milestone': True},
)
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
del context['object']
project = self.object # type: models.Project
context['has_milestones'] = project.has_milestones
context['milestones'] = project.milestones.order_by('sequence', 'title')
return context
I may clean up the library for more general use, but in the mean time, hope
this helps you
along with your quest.
On donderdag 21 juni 2018 18:23:26 CEST Alexander Joseph wrote:
> Awesome! Thanks Kirby, I will try that out and let you know
>
> On Thu, Jun 21, 2018 at 10:12 AM, C. Kirby <mist...@gmail.com> wrote:
> > Ok, this is good to work with. Let us tackle this issue by issue. The
> > first issue is that your modal is not showing up. I see several possible
> > issues:
> >
> > Replace
> >
> > <p>Click <a data-toggle="modal" data-target="#modal" href="{% url
> >
> > 'engineering:gaas_wafer_design_create' %}">here</a> to show the modal</p>
> >
> > with
> >
> > <button data-toggle="modal" data-target="#modal" %}">Create a new wafer
> > design</button>
> >
> > Having the href in the a tag makes it want to load to a new page, but also
> > load the modal, I think. Since you reference the form url in the ajax call
> > you don't need it in an a tag. Also in the bootstrap4 api reference it
> > only
> > launches modals from buttons, not from <a> tags
> >
> > Next/if that doesn't get you a further I would check to make sure teh
> > modal structure is correct before worrying about the ajax call.
> >
> > Put the contents of the gaas_wafer_design_form.html into the modal in
> > gaas_wafer_design_list.html. Remove the form elements and just have a
> > complete, static bootstrap modal on the page. Also comment out the
> > on(show.bs.modal). Noting the date on the tutorial it looks like it might
> > be using an alpha or beta version of bootstrap4. If you can't get a static
> > modal to show up this way then you will have to go take a look at the
> > bootstrap4 api and match the modal structure.
> >
> > If you have the same/new issues after trying those we can tackle them next
> >
> > Kirby
> >
> > --
> > You received this message because you are subscribed to a topic in the
> > Google Groups "Django users" group.
> > To unsubscribe from this topic, visit https://groups.google.com/d/
> > topic/django-users/CPspzgE33Dk/unsubscribe.
> > To unsubscribe from this group and all its topics, send an email to
> > django-users+unsubscr...@googlegroups.com.
> > To post to this group, send email to django-users@googlegroups.com.
> > Visit this group at https://groups.google.com/group/django-users.
> > To view this discussion on the web visit https://groups.google.com/d/
> > msgid/django-users/53d50894-98f7-4d92-a1c2-0a9d61e19fea%40googlegroups.com
> > <https://groups.google.com/d/msgid/django-users/53d50894-98f7-4d92-a1c2-0a
> > 9d61e19fea%40googlegroups.com?utm_medium=email&utm_source=footer> .
> >
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-users+unsubscr...@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/2951285.rXdhm0d2eO%40fritzbook.
For more options, visit https://groups.google.com/d/optout.
