如何在Django中创建一个弹出窗口?

时间:2019-05-27 18:02:07

标签: python django django-models django-forms bootstrap-modal

我的页面上有一个订阅按钮。单击订阅按钮后,将生成一个弹出窗口,询问电子邮件,姓名。输入并提交电子邮件后,电子邮件将转到数据库并重定向到上一页。这是我尝试过的操作,但是单击后订阅按钮没有响应。

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

0 个答案:

没有答案