Actually on second thought, since this is a private github repo and theres a lot of stuff in there i wouldnt want to make public, copying it/cleaning it up to make it a public repo would be a bit of an ordeal so I'll just post my code here.
So going through this tutorial - https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/ below is my url url(r'^gaas-wafer-designs/create/$', gaas_wafer_designs. GaasWaferDesignCreateView.as_view(), name='gaas_wafer_design_create'), below is my view class GaasWaferDesignCreateView(LoginRequiredMixin, CreateView): fields = ("design_ui", "emitting", "contact_location", "optical_power", "design_date", "designer", "design_document", "designer_ui", "in_trash", "inactive_date", "notes") model = GaasWaferDesign template_name = 'engineering/gaas_wafer_designs/gaas_wafer_design_form_inner.html' def form_valid(self, form): self.object = form.save() return render(self.request, 'engineering/gaas_wafer_designs/create_success.html', {'gaas_wafer_designs': self.object}) and below is my gaas_wafer_design_list.html (the template with the modal frame and modal button along with the jquery to handle the ajax) - {% extends "pages/list_template.html" %}{% load static from staticfiles %} {% load widget_tweaks %} {% block title %}GaAs Wafer Design List{% endblock %} {% block list_title %}GaAs Wafer Designs{% endblock %} {% block list_title_2 %}Design Inventory{% endblock %} {% block extra_js%} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";></script> <script src="http://malsup.github.com/jquery.form.js";></script> {% endblock %} {% block buttons %} <div class="btn-group" role="group" aria-label="Button group with nested dropdown" style="margin-bottom: -150px; z-index:1000;"> <!--<a class="btn btn-secondary js-create"><i class="fa fa-plus-circle fa-fw"></i> Add GaAs Wafer Design</a>--> <div class="btn-group" role="group"> <a id="btnGroupDrop1" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> View </a> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Recycling Bin</a> </div> </div> </div> <p>Click <a data-toggle="modal" data-target="#modal" href="{% url 'engineering:gaas_wafer_design_create' %}">here</a> to show the modal</p> <div class="modal fade" id="modal"></div> {% endblock %} {% block table %} <thead> <tr> <th> Wafer Design UI </th> <th> Emitting Type </th> <th> Contact Location </th> <th> Optical Power </th> <th> Design Date </th> <th> Designer </th> <th> Designer UI </th> <th> Created At </th> </tr> </thead> <tfoot> <tr> <th> Wafer Design UI </th> <th> Emitting Type </th> <th> Contact Location </th> <th> Optical Power </th> <th> Design Date </th> <th> Designer </th> <th> Designer UI </th> <th> Created At </th> </tr> </tfoot> <tbody> {% for gaas_wafer_design in gaas_wafer_designs %} <tr> <td><a href="{% url 'engineering:gaas_wafer_design_detail' pk=gaas_wafer_design.pk %}">{{ gaas_wafer_design.design_ui }}</a></td> <td>{{ gaas_wafer_design.get_emitting_display }}</td> <td>{{ gaas_wafer_design.contact_location }}</td> <td>{{ gaas_wafer_design.optical_power }}</td> <td>{{ gaas_wafer_design.design_date|date:"m/d/y" }}</td> <td>{{ gaas_wafer_design.designer }}</td> <td>{{ gaas_wafer_design.designer_ui }}</td> <td>{{ gaas_wafer_design.created_at }}</td> </tr> {% endfor %} </tbody> <script> $('#modal').on('show.bs.modal', function (event) { var modal = $(this) $.ajax({ url: "{% url 'engineering:gaas_wafer_design_create' %}", context: document.body }).done(function(response) { modal.html(response); }); }) </script> {% endblock %} {% block modal %} {% endblock %} below is my gaas_wafer_design_form.html (the modal content/form) - {% load i18n widget_tweaks %} <div class="modal-dialog modal-lg" role="document"> <form action="{% url 'engineering:gaas_wafer_design_create' %}" method="post" id="gaas-create" class="form">{% csrf_token %} <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title">Add News</h4> </div> <div class="modal-body"> Test </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <input type="submit" class="btn btn-primary" value="Save changes" /> </div> </div><!-- /.modal-content --> </form> </div><!-- /.modal-dialog --> <script> var form_options = { target: '#modal', success: function(response) {} }; $('#gaas-create').ajaxForm(form_options); </script> below is my create_success.html <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> <span class="sr-only">Test</span> </button> <h4 class="modal-title">Test</h4> </div> <div class="modal-body"> <p class="alert alert-info">Succesfully created!</p> </div><!-- /.modal-body --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> <script> // close the modal after 3 seconds setTimeout(function() { $('#modal').modal('hide'); }, 3000); </script> The first problem I'm running into with this is when I click on the link to show the modal the screen darkens from the modal fade but no modal shows up at all. I checked the javascript console (see below) and it doesnt look like anything is missing. I'm thinking its probably somewhere in the ajax thats messed up <https://lh3.googleusercontent.com/-tKArPUoCaAc/Wyq3y649I5I/AAAAAAAADnE/pESkxCQYr9Y1JrKVav-PZ1HlXJ_XwXkBACLcBGAs/s1600/javascript-console.JPG> Thanks again On Wednesday, June 20, 2018 at 10:28:40 AM UTC-6, C. Kirby wrote: > > Ok, great. I am more versed with FBVs than CBVs, but if you are doing a > one form trial run I can figure it out. > > It sounds like you are correctly rendering javascript to the client when > they do a GET for the form, but when they do a POST (either correct or with > validation errors) you are returning an HttpResponse, which will redirect > to a new page. (It could be something different, but that is my first > guess) . > It would be easiest to debug with you if I could see the code, could you > share it here, or even better on a public code repository (github, gitlab, > bitbucket, etc). If you can share the code I am happy to work with you on > either tutorial. > > I'm sorry, I don't have any tutorials to point to - I've been doing this > for a long time and just pieced it together from the underlying components. > > Kirby > > > > On Tuesday, June 19, 2018 at 5:13:19 PM UTC-4, Alexander Joseph wrote: >> >> Thanks very much! >> >> I've followed a few tutorials and had mixed results - >> >> This tutorial I got the closest with >> >> https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html >> >> I got to the point where it says " The data was invalid. No hard refresh >> no anything. Just this tiny part changed with the validation. This is what >> happened:" >> >> I was able to get the form to load in the modal via ajax and the form >> information submitted and the database updated with the new record, however >> upon submission it would just show the ajax in a blank page rather than >> just close the modal and show the updated table with the information. Also >> when you submit the form and its invalid it will show the blank page with >> ajax code rather than the validation errors in the modal. I'd much rather >> be using CBVs though and this tutorial was for FBVs. Being such a noob it >> would be another project altogether to turn the FBVs into CBVs and still >> get it to work. >> >> I've tried other tutorials like this one >> https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/ >> >> I liked this one best because it uses CBVs and Bootstrap4, but I could >> never even get the form to load in the modal. I checked the Javascript >> Console and everything seemed to be fine - no missing files or errors >> related to the modal or functioning of the modal so I'm not sure where the >> problem was but this is my main problem right now - getting the form to >> even show in the modal to begin with. It seems like most of these tutorials >> use jquery/ajax to load the html form file in the modal content, is that >> the way you did it as well? >> >> Is there a tutorial or reference you used to get it working for you? >> If it would be easiest I can go through this tutorial again >> https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/ >> and give you any errors I get, if that tutorial looks like it will work >> to you. In the comments it seems like theres a lot of people that had the >> same issue I was running into with that one though. >> >> Thanks again for your help! >> >> >> >> On Tue, Jun 19, 2018 at 2:26 PM, C. Kirby <mis...@gmail.com> wrote: >> >>> What do you seem to be having trouble with? >>> >>> -Showing the form in a modal? >>> -Dynamically loading a form based on how the modal is launched? >>> -Using the modal to handle ajax loaded/submitted forms? >>> -Generally building abootstrap4 modal? >>> >>> I have done this and am happy to help, just give me some direction in >>> helping you >>> >>> On Tuesday, June 19, 2018 at 3:08:59 PM UTC-4, Alexander Joseph wrote: >>>> >>>> I've posted this before but havent gotten any response. If more >>>> information is needed let me know and I'll get you anything I can. >>>> >>>> I basically want to use forms in Bootstrap 4 modals for my CRUD >>>> operations but cant really find a good tutorial or references to work >>>> from. >>>> I'm newer to Django still. I'm sure this is a common question/application >>>> so theres got to be some material out there that can help a novice like >>>> me. >>>> Has anyone had some success with implementing this? I'm using CBVs so >>>> something that works with CBVs would be ideal. Any help, advice, or >>>> suggestions would be much appreciated >>>> >>> -- >>> 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...@googlegroups.com. >>> To post to this group, send email to django...@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/ac24306b-96d0-4eaa-ba23-3fedfa0a48ae%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/django-users/ac24306b-96d0-4eaa-ba23-3fedfa0a48ae%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> Best Regards, >> >> Alexander Joseph >> >> -- 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/ce5cee22-c73a-4671-94f3-ef5fb4d8f9c8%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
