Tuesday, June 26, 2018

Re: Forms in Bootstrap 4 Modals?

Hey Kirby,

Any ideas on where I should take this next? Thanks


On Thursday, June 21, 2018 at 10:12:41 AM UTC-6, C. Kirby 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 the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@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/db5a23c1-f504-4e2d-a7d1-44efee4a5883%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment