更容易在TurboGears2中创建AJAX表单
tgext.ajaxforms的Python项目详细描述
关于ajax表单
ajax forms使在turbogears2中创建ajax加载和提交的表单变得简单快捷 应用。
要使表单基于ajax,只需将ajaxforms.ajaxloaded修饰符应用于任何toscawidgets 表单并声明一个ajaxurl变量来指定加载表单的方法。 该方法可以自动生成或手写。 默认情况下,自动支持ajax验证。
安装
tgext.ajaxform既可以从pypi安装,也可以从bitbucket安装:
easy_install tgext.ajaxforms
应该只对大多数用户有效
制作ajax表单
表单本身可以是任何toscawidgets表单,只需要添加 将@ajaxloaded修饰符应用于表单本身,并 指定表单的ajaxurl,该表单将指向相关的 控制器方法:
from tgext.ajaxforms import ajaxloaded @ajaxloaded class TestForm(twf.TableForm): class fields(WidgetsList): name = twf.TextField('Name', validator=validators.String(not_empty=True)) surname = twf.TextField('Surname', validator=validators.String(not_empty=True)) ajaxurl = '/form_show' action = '/form_submit' submit_text = "GO" test_form = TestForm()
显示表单
要显示表单,必须添加绑定到ajaxurl的controller方法 将显示窗体本身和将要使用的窗体的参数 每次它必须显示表单时,都要使用ajaxform。在大多数情况下 方法可以通过使用ajaxform调用生成。 此外,还必须创建一个页面,以便加载表单。
例如,在索引页中显示具有ajaxurl='/form\u show':
from tgext.ajaxforms import ajaxform class RootController(BaseController): form_show = ajaxform(test_form) @expose('myapp.templates.index') def index(self): return dict(form=test_form)
myapp.templates.index模板应该看起来像通常的模板 用于显示基于toscawidgets的表单:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude"> <xi:include href="master.html" /> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/> <title>Ajax Form Test Example</title> </head> <body> <div id="myform"> ${form(name='HI')} </div> </body> </html>
处理提交和验证
提交和验证应该与任何toscawidgets使用的外观相同 表单,只需使用ajarl绑定方法作为错误处理程序:
class RootController(BaseController): @expose() @validate(test_form, error_handler=form_show) def form_submit(self, **kw): return 'Thanks: {name} {surname}'.format(**kw)
完整示例
myapp.templates.index:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude"> <xi:include href="master.html" /> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/> <title>Ajax Form Test Example</title> </head> <body> <div id="myform"> ${form(name='HI')} </div> </body> </html>
myapp.controllers.root:
from tgext.ajaxforms import ajaxloaded, ajaxform @ajaxloaded class TestForm(twf.TableForm): class fields(WidgetsList): name = twf.TextField('Name', validator=validators.String(not_empty=True)) surname = twf.TextField('Surname', validator=validators.String(not_empty=True)) ajaxurl = '/form_show' action = '/form_submit' submit_text = "GO" test_form = TestForm() class RootController(BaseController): form_show = ajaxform(test_form) @expose('myapp.templates.index') def index(self): return dict(form=test_form) @expose() @validate(test_form, error_handler=form_show) def form_submit(self, **kw): return 'Thanks: {name} {surname}'.format(**kw)
按需显示表单
0.1.2版以后的AjaxForm支持按需显示表单。 这允许在javascript事件发生时显示表单。
为此,必须使用form.on_demand()而不是form()来 在模板内显示表单。这将创建一个javascript 名为FormClassName_on_demand(where, params)的函数where 参数是显示窗体的任何有效选择器,而 params方法是一个带有必须发送的参数的字典 到后面去。默认情况下,参数中指定的任何参数 字典将用于填写表单字段。
例如,要按需显示此表单:
@ajaxloaded class TryAjax(TableForm): class fields(WidgetsList): field1 = TextField(validator=validators.String(not_empty=True)) field2 = TextField(validator=validators.String(not_empty=True)) action = '/dosomething' ajaxurl = '/TryAjax_show' ajax_test = TryAjax()
您的模板可能如下所示:
<div id="myform_box"> ${form.on_demand()} <div onclick="TryAjax_on_demand('#myform_box', {'field2':'random text'})">Show Form</div> </div>