提交 Django 表单后触发 Bootstrap 模态框

Question

提交 Django 表单后触发 Bootstrap 模态框

4

我如何在提交django表单后触发Bootstrap模态框弹出？

在我的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" +'', ['somegmail@gmail.com'],
            headers = {'Reply-To': "noreply@gmail.com" })
            mail.send()
    return render(request, 'index.html', {'form': form})

- robjeiter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wholevinski · Accepted Answer

弹出框和触发它的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 为 True 时，才会呈现那个 <script> 标签。而 successful_submit 只有在表单成功提交后才会设置为 True。