Как использовать загрузочный модальный диалог в Django? - PullRequest
Новая
       14

Как использовать загрузочный модальный диалог в Django?

0 голосов
/ 03 сентября 2018

У меня проблема с использованием модального диалога начальной загрузки в моем шаблоне 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 голосов
/ 03 сентября 2018

У вас есть модал на той же странице, что и форма, и он запускается кнопкой submit , поэтому форма выполняет то, что должна: отправка на сервер . Модал не останавливает это действие . Более того, это сообщение success , поэтому оно должно появляться после формы и возвращать ответ, который в вашем случае отображает страницу индекса.

Что вы можете сделать, это вместо рендеринга индекса в случае успеха, это рендеринг страницы с модальным, запущенным при загрузке, который может выполнять необходимые вам действия.

...