django使用materialize模式创建表单
就我所尝试的而言,我无法通过MaterializeCSS模式获取表单数据或将其发送到django视图函数。我只是js、ajax及相关领域的新手。django使用materialize模式创建表单,django,forms,modal-dialog,materialize,Django,Forms,Modal Dialog,Materialize,就我所尝试的而言,我无法通过MaterializeCSS模式获取表单数据或将其发送到django视图函数。我只是js、ajax及相关领域的新手。 我的表单的“CreateView”操作在外部运行,但它必须在一个模式内部,并且仍然可以获得使用django表单验证、安全性等的好处。我正在使用Django版本1.11。 该项目有两个应用程序:加载主页的main和对图书对象执行操作的library。一本书只有一个书名,因此有一种定义如下的形式: library/forms.py: 项目URL定义mysi
我的表单的“CreateView”操作在外部运行,但它必须在一个模式内部,并且仍然可以获得使用django表单验证、安全性等的好处。我正在使用Django版本1.11。
该项目有两个应用程序:加载主页的main和对图书对象执行操作的library。一本书只有一个书名,因此有一种定义如下的形式:
library/forms.py: 项目URL定义mysite/url.py: 主视图,main/views.py: main/templates/main/home.html: library/views.py: library/templates/library/book_form.html:
{%block body%}
添加图书信息
{%if form.errors.non_字段_errors%}
{{form.errors.non_field_errors}}
{%endif%}
{%csrf_令牌%}
{{form.non_field_errors}}
{{form.source.errors}}
{{form.source}}
{{form.as_p}}
提交
{%endblock%}
任何帮助都将不胜感激。更改a href链接并设置内容呈现的html代码位置
main/templates/main/home.html:
。。。
...
{%endblock%}
Jquery通过django的routes在模式中呈现表单main/templates/main/home.html:
$(文档).ready(函数(){
$('.modal').modal();
$('.modal content').load(“{%url”图书:创建“%”);
});
最后,指定返回路线的图书表单。_library/templates/library/book\u form.html\u:
<h5>Add book information</h5>
{% if form.errors.non_field_errors %}
{{ form.errors.non_field_errors }}
{% endif %}
<form method="POST" action="{% url 'books:create' %}">
{% csrf_token %}
{{ form.non_field_errors }}
{{ form.source.errors }}
{{ form.source }}
<!--Form content-->
{{form.as_p}}
<!--Form button-->
<button class="btn waves-effect waves-light" type="submit" name="action">Submit form
</button>
</form>
添加图书信息
{%if form.errors.non_字段_errors%}
{{form.errors.non_field_errors}}
{%endif%}
{%csrf_令牌%}
{{form.non_field_errors}}
{{form.source.errors}}
{{form.source}}
{{form.as_p}}
提交表格
您在BookCreateView
中使用的方法在哪里?form\u valid()
form\u invalid()
get()
post()
是可用的方法我正在使用这些方法的默认行为。按照现在的工作方式,加载主页后,当按下home.html中的createbook链接时,它会重定向到books Create url,触发BookCreateView并使用表单数据呈现book_form.html。像添加_book _modal的数据目标点一样,我天真地希望它使用该id加载div中的数据,而不是将整个模板作为一个新模板呈现。不过,我还是会考虑使用这些方法来帮助我。
from django.conf.urls import url, include
from django.contrib import admin
from main import views as main_views
urlpatterns = [
url(r'^$', main_views.home, name='home'),
url(r'^books/', include('library.urls')),
url(r'^admin/', admin.site.urls),
]
from django.shortcuts import render
def home(request):
return render(request, 'main/home.html')
<html>
<head>
<title>A library</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
{% block body %}
<div class="container">
<!--a class="waves-effect waves-light btn modal-trigger" href="#modal1">Create Book</a-->
<a class="waves-effect waves-light btn modal-trigger" data-target="add_book_modal" href="{% url 'books:create' %}">
Create Book
</a>
<div class="divider"></div>
<div class="section">
<h5>Section 1</h5>
<p>Stuff</p>
</div>
</div>
{% endblock %}
{% include 'library/book_form.html' %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
$( document ).ready(function() {
$('.modal').modal();
});
</script>
</body>
</html>
from django.conf.urls import url
from .views import BookCreateView
app_name='books'
urlpatterns = [
url(r'^create/$', BookCreateView.as_view(), name='create'),
]
from django.shortcuts import render
from django.views.generic import CreateView
from django.urls import reverse_lazy
from .models import Book
from .forms import BookForm
class BookCreateView(CreateView):
form_class = BookForm
template_name = 'library/book_form.html'
success_url = reverse_lazy('home')
<div id="add_book_modal" class="modal">
<div class="modal-content">
{% block body %}
<main>
<h5>Add book information</h5>
{% if form.errors.non_field_errors %}
{{ form.errors.non_field_errors }}
{% endif %}
<form method="POST">
{% csrf_token %}
{{ form.non_field_errors }}
{{ form.source.errors }}
{{ form.source }}
<!--Form content-->
{{form.as_p}}
<!--Form button-->
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
</button>
</form>
</main>
{% endblock %}
</div>
</div>
...
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Create Book</a>
...
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<!--Form content goes in here.-->
</div>
</div>
{% endblock %}
<!-- django include tag removed -->
<script>
$( document ).ready(function() {
$('.modal').modal();
$('.modal-content').load("{% url 'books:create' %}");
});
</script>
<h5>Add book information</h5>
{% if form.errors.non_field_errors %}
{{ form.errors.non_field_errors }}
{% endif %}
<form method="POST" action="{% url 'books:create' %}">
{% csrf_token %}
{{ form.non_field_errors }}
{{ form.source.errors }}
{{ form.source }}
<!--Form content-->
{{form.as_p}}
<!--Form button-->
<button class="btn waves-effect waves-light" type="submit" name="action">Submit form
</button>
</form>