Как создать всплывающее окно в Django? - PullRequest
Новая
       46

Как создать всплывающее окно в Django?

0 голосов
/ 27 мая 2019

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

models.py 

class Subscription(models.Model):
    fullname=models.CharField(max_length=30)
    mailid=models.EmailField()

forms.py 

from .models import Subscription
from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin


class SubscriptionForm(PopRequestMixin, CreateUpdateAjaxMixin):
    class Meta:
        model = Subscription
        fields = ('fullname', 'mailid')
        widgets = {'fullname': forms.TextInput(attrs={'placeholder': 'Full Name'}),
                   'mailid': forms.TextInput(attrs={'placeholder': 'Email'}),
                   }

views.py 

from django.contrib.messages.views import SuccessMessageMixin
from django.urls import reverse_lazy
from django.views import generic
from bootstrap_modal_forms.mixins import PassRequestMixin
from .forms import SubscriptionForm
class SubscriptionView(PassRequestMixin, SuccessMessageMixin, generic.CreateView):
    form_class = SubscriptionForm
    template_name = 'subscribe.html'
    success_message = 'You are now subscribed!'
    success_url = reverse_lazy('home')

urls.py 

urlpatterns = [...
    path('signup/home/',views.home, name='home'),
    path('subscribe/', views.SubscriptionView.as_view(), name='subscribe'),
...]

subscribe.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load widget_tweaks %}

<form method="post" action="">
  {% csrf_token %}

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

  <div class="modal-body">
    {{ form.as_p }}

  </div>

  <div class="modal-footer">
    <button type="button" class="submit-btn btn btn-primary">Subscribe</button>
  </div>

</form>
</head>
<body>

</body>
</html>

В месте, где кнопка подписки находится на главной странице, я написалследующий код

home.html 

.....
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>
         <button class="signup-btn btn btn-primary" type="button" name="button">Subscribe</button>
            <script type="text/javascript">
  $(function () {
    $(".signup-btn").modalForm({formURL: "{% url 'subscribe' %}"});

  });
</script>
...

Кнопка подписки видна, но не реагирует, т.е. остается нажатой при нажатии.Скелет моего проекта 

-Project
   -templates
        -subscribe.html
        -home.html
   -users
        -models.py
        -views.py
        -urls.py
        -forms.py
...