姜戈表单深渊翻滚后触发引导模式 [英] Trigger bootstrap modal after django form submission

问题描述

提交Django表单后如何触发引导模式弹出？

在我的index.html模板中，我有一个如下所示的标准模式

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

在下面的同一index.html中，我有一个Django表单

  {{ form.non_field_errors }}
                {% csrf_token %}
                    <ul id="robul">
                      <div class="form-group">
                        <div class="col-xs-6">
                        <li id="name" name="{{ form.name.name }}" class="form-control">{{ form.name }}</li>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-xs-6">
                        <li id="email" class="form-control">{{ form.email }}</li>
                      </div>
                    </div>
                      <div class="form-group">
                        <div class="col-xs-6">
                        <li id="contactmessage" class="form-control">{{ form.contactmessage }}</li>
                      </div>
                    </div>
                    </ul>

在我的view.py中，它是这样的：

if request.method == 'POST':
        form = forms.FormName(request.POST)

        if form.is_valid():
            contact_name = request.POST.get(
                'name', '')
            contact_email = request.POST.get(
                'email', '')
            form_content = request.POST.get('contactmessage', '')

            template = get_template('contact_template.txt')
            context = {'name': contact_name,
            'email': contact_email,
            'contactmessage': form_content,}
            content = template.render(context)
            mail = EmailMessage("New contact form submission", content, "Some Name" +'', ['[e-mail]'],
            headers = {'Reply-To': "[e-mail]" })
            mail.send()
    return render(request, 'index.html', {'form': form})

推荐答案

触发它的模态和JS代码位于与您的Django窗体深渊翻滚代码不同的上下文中。当您从表单深渊翻滚返回时，呈现'index.html'基本上是从头开始的，因此它实质上相当于在页面加载时显示模式。但是，也许您只想在成功提交之后才显示它。您需要做的是编写一些JS代码来显示页面加载时的模式，并在模板呈现上下文中有条件地呈现该模式。我是这么想的：

在index.html中：

{% if successful_submit %}
    <script type="text/javascript">
        $(document).ready(function(){
            $("#exampleModal").modal('show');
        });
    </script>
{% endif %}

在视图函数中，将successful_submit上下文变量添加到您的返回值中：

return render(request, 'index.html', {'form': form, 'successful_submit': True})

现在，仅当successful_submit为时才会呈现<script>标记，而该标记仅在表单POST成功后才会设置。<script><script>标记将仅在successful_submit为时呈现，而该标记仅在表单POST成功后设置

这篇关于姜戈表单深渊翻滚后触发引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！