如何在Django中使用引导模态对话框?

时间:2018-09-02 22:36:56

标签: html django python-3.x twitter-bootstrap django-views

我在Django模板中使用引导模态对话框时遇到问题。当用户提交表单时,模态对话框仅显示2秒钟,然后重定向到index.html文件。

这是我的views.py文件

class RequestItem(generic.CreateView):
model = UserNotification
fields = ['Name', 'Mobile_No', 'Proof']

def get_form(self, form_class=None):
    if form_class is None:
        form_class = self.get_form_class()
    form = super().get_form(form_class)
    form.fields['Name'].widget = TextInput(attrs={'placeholder': '*Enter your name'})
    form.fields['Mobile_No'].widget = TextInput(
        attrs={'placeholder': "*Enter your's mobile number to get a call back from angel"})
    form.fields['Proof'].widget = TextInput(attrs={'placeholder': '*enter proof you have for your lost item'})
    return form

def form_valid(self, form):
    print(self.kwargs)

    self.object = form.save(commit=False)
    qs = Report_item.objects.filter(id=self.kwargs.get("pk"))
    self.object.user = qs[0].owner
    self.object.save()
    query_list = Report_item.objects.filter(publish=True)
    return render(self.request,"feed/index.html",{"object_list":query_list})

这是我的模态对话框表格:

<div class="thumbnail" style="padding-right:5%;">
        <div class="thumbnail-center">
            <font size="6">
            <p>Please fill this form</p>
            </font>
        </div>
        <form class="form-herizontal" action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}
              {% if form.errors %}
                <p>{{ form.errors }}</p>
              {% endif %}
            {% include 'feed/form_template.html'%}
            <br>
                 <div class="row">
                    <div class="col-md-5"></div>
                    <div class="col-md-7">
                        {% if user.is_authenticated %}
                            <button type="submit" class="login-btn btn btn-success" data-toggle="modal" data-target="#myModal">Request to return</button>
                        {% else %}
                            <button type="submit" class="login-btn btn btn-success" disabled>Request to return</button>
                            <p style="color:red;">*Please <a href="{% url 'login' %}">login</a>to request yout item</p>
                        {% endif %}
                    </div>


                </div>

            <br>

        </form>
        </div>
        <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Request Done</h4>
        </div>
        <div class="modal-body">
          <p>Your request has been done.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
</div>

我希望用户仅在单击模态对话框的关闭按钮时才重定向到索引页面。请帮助我实现这一目标。

1 个答案:

答案 0 :(得分:0)

模态与表单在同一页面上,并且由 submit 按钮触发,因此表单可以执行以下操作:发布到服务器< / strong>。模式不会停止此操作。更重要的是,这是一条成功消息,因此它应该在表单发送后显示 之后并返回响应,在您的情况下,该响应将呈现索引页面。

您要做的是,代替在成功时呈现索引,而是使用加载时触发的模态呈现页面,以执行所需的操作。