在Django createview表单提交上,打开第二个模式

时间:2019-07-19 14:42:42

标签: bootstrap-modal modelform django-bootstrap4

编辑:缩小范围的问题:我正在使用django-bootstrap-modal-forms插件,该插件使用CreateView,ReadView和ModelForm功能。

我需要的流程:

  • 在模式显示CreateView中,用户单击“提交”按钮并创建“处方”对象。我已经掌握了这一部分并成功地阻止了重定向,但但是我需要触发:
  • 使用新创建的对象中的pk出现ReadView模态

模态需要出现在我的“ vhome”上。我可以在“ vhome”上添加js触发器吗?我已经尝试了几个小时,但无法弄清。

  

views.py

class PrescriptionCreateView(BSModalCreateView):
    template_name = 'myapp/create_prescription.html'
    form_class = PrescriptionForm

    def form_valid(self, form):
        self.object = form.save(commit=False)
        self.object.status = Prescription_status.objects.get(pk=1) # draft status
        self.object.practice = self.request.user.practice # practice id
        self.object.save()
        return redirect('vhome')

class PrescriptionReadView(BSModalReadView):
    model = Prescription
    template_name = 'myapp/read_prescription.html'
  

_modal.html

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
    <div class="modal-dialog" role="document">
      <div class="modal-content"></div>
    </div>
  </div>
  

read_prescription.html

{% block extrahead %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% endblock %}

<div class="modal-header">
  <h3 class="modal-title">Confirm RX Details</h3>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="modal-body">

  <div class="">
    Prescriber:
    {{ prescription.prescriber }}
  </div>
  <div class="">
    Medication:
    {{ prescription.medication }}
  </div>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
  

vhome.html(需要弹出模态的页面)

{% extends 'myapp/base.html' %}

{% block content %}

{% include "myapp/_modal.html" %}

<!-- django-bootstrap-modal-forms plugin code and ajax prevent url redirect on form submit -->
<button class="create-prescription btn btn-primary" type="button" name="button"><span class="fa fa-plus mr-2"></span>Create Prescription</button>

{% endblock content %}

{% block extrascripts %}
  <script type="text/javascript">
     $(document).ready(function() {
      // Create button
      $(".create-prescription").modalForm({
          formURL: "{% url 'create_prescription' %}"});

      // Hide message
      $(".alert").fadeTo(2000, 500).slideUp(500, function(){
        $(".alert").slideUp(500);
      });
    });

$(function() {
  $('.submit').click(function() {
      $.ajax({
          type: 'POST',
          url: 'vhome',
          error: function()
          {
             alert("We were unable to save your work. Please try again.");
          },
          success: function(response)
          {}
      });
      return false;
  }); 
})
</script>
<!-- /django-bootstrap-modal-forms plugin code and ajax prevent url redirect on form submit -->
{% endblock extrascripts %}

0 个答案:

没有答案