Wednesday, June 20, 2018

Re: Forms in Bootstrap 4 Modals?

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

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

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 

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 
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.

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+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/ce5cee22-c73a-4671-94f3-ef5fb4d8f9c8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)