我想在我的项目中创建 django 弹出表单

问题描述

我在 django 中创建了费用管理系统.

问题是我使用的是简单的表单，对于每个表单，用户必须导航到单独的页面.

我想在 django 中创建弹出表单.我搜索了很多网站但无法获得解决方案在此处输入图片描述

在上面的窗口中，当用户点击支付按钮时，弹出表单将被打开.当用户单击提交按钮时，更改将显示在同一页面中.

谁能告诉我如何解决这个问题?如果您在同一地区工作，或者共享代码.

解决方案

为什么不使用引导模式呢?

例如 https://pypi.org/project/django-bootstrap-模态形式/

示例要查看 django-bootstrap-modal-forms 的实际效果，请克隆存储库并在本地运行示例:

$ git clone https://github.com/trco/django-bootstrap-modal-forms.git$ cd django-bootstrap-modal-forms$ python -m pip install -r requirements.txt$ python manage.py 迁移$ python manage.py 运行服务器

Bootstrap 模式中的注册表单有关代码的所有部分如何协同工作的说明，请参见段落用法.要测试此处提供的工作解决方案，请克隆并运行示例.forms.py

从 django.contrib.auth.forms 导入 UserCreationForm从 django.contrib.auth.models 导入用户从 bootstrap_modal_forms.mixins 导入 PopRequestMixin，CreateUpdateAjaxMixin类 CustomUserCreationForm(PopRequestMixin, CreateUpdateAjaxMixin,用户创建表格):元类:模型 = 用户字段= ['用户名'，'密码1'，'密码2']

signup.html

{% 加载 widget_tweaks %}<表格方法=发布";动作=">{% csrf_token %}<div 类=模态标题"><h3 class="modal-title">注册</h3>

views.py

从 django.contrib.messages.views 导入 SuccessMessageMixin从 django.urls 导入 reverse_lazy从 django.views 导入通用从 bootstrap_modal_forms.mixins 导入 PassRequestMixin从 .forms 导入 CustomUserCreationForm类 SignUpView(PassRequestMixin，SuccessMessageMixin，generic.CreateView):form_class = CustomUserCreationFormtemplate_name = 'accounts/signup.html'success_message = '成功:注册成功.你现在可以登录了.success_url = reverse_lazy('index')

urls.py

from django.urls 导入路径从 .导入视图app_name = '帐户'网址模式 = [路径('signup/'，views.SignUpView.as_view()，name='signup')]

.html 文件，包含模态、触发元素和实例化模态表单的脚本

I have created fee management system in django.

The problem is I am using simple form and for each form user have to navigate to separate page.

I want to create popup form in django. I have search many websites but can't get solutionenter image description here

In above window when user click on payment button pop-up form will be open.and when user click on submit button changes will be shown in same page.

Can anyone tell me how to solve this? or share code if you have work in same area.

解决方案

Why not use bootstrap modals instead?

For example https://pypi.org/project/django-bootstrap-modal-forms/

ExamplesTo see django-bootstrap-modal-forms in action clone the repository and run the examples locally:

$ git clone https://github.com/trco/django-bootstrap-modal-forms.git
$ cd django-bootstrap-modal-forms
$ python -m pip install -r requirements.txt
$ python manage.py migrate
$ python manage.py runserver

Signup form in Bootstrap modalFor explanation how all the parts of the code work together see paragraph Usage. To test the working solution presented here clone and run Examples.forms.py

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin


class CustomUserCreationForm(PopRequestMixin, CreateUpdateAjaxMixin,
                             UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'password1', 'password2']

signup.html

{% load widget_tweaks %}

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

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

  <div class="modal-body">

    <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
      {% for error in form.non_field_errors %}
        {{ error }}
      {% endfor %}
    </div>

    {% for field in form %}
      <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" placeholder=field.label %}
        <div class="{% if field.errors %} invalid{% endif %}">
          {% for error in field.errors %}
            <p class="help-block">{{ error }}</p>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>

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

</form>

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 CustomUserCreationForm

class SignUpView(PassRequestMixin, SuccessMessageMixin, generic.CreateView):
    form_class = CustomUserCreationForm
    template_name = 'accounts/signup.html'
    success_message = 'Success: Sign up succeeded. You can now Log in.'
    success_url = reverse_lazy('index')

urls.py

from django.urls import path
from . import views

app_name = 'accounts'
urlpatterns = [
    path('signup/', views.SignUpView.as_view(), name='signup')
]

.html file containing modal, trigger element and script instantiating modalForm

<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">Sign up</button>

<script type="text/javascript">
  $(function () {
    // Sign up button
    $(".signup-btn").modalForm({formURL: "{% url 'accounts:signup' %}"});

  });
</script>

这篇关于我想在我的项目中创建 django 弹出表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！