# tgext.ajaxforms

tgext.ajaxforms makes quick and easy to create ajax loaded and submitted forms in TurboGears2 applications.

To make a form ajax based just apply the ajaxforms.ajaxloaded decorator to any ToscaWidgets form and declare a ajaxurl variable to specify the method that loads the form. The method can be automatically generated or hand-written. By default ajax validation is automatically supported.

## Installing

tgext.ajaxform can be installed both from pypi or from bitbucket:

easy_install tgext.ajaxforms


should just work for most of the users

## Making an Ajax Form

The form itself can be any ToscaWidgets form, the only required additions are to apply the @ajaxloaded decorator to the form itself and specify the ajaxurl of the form that will point to the related controller method:

from tgext.ajaxforms import 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()


## Showing The Form

To show the form it is necessary to add a controller method bound to the ajaxurl parameter of the form that will display the form itself and that will be used by ajaxform each time that it has to display the form. For most cases this method can be generated by using the ajaxform call. Also you have to create a page where the form will be loaded.

For example to show the form in the index page having ajaxurl = '/form_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)


The myapp.templates.index template should look the usual template that you would use to display a ToscaWidgets based form:

<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" />
<meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
<title>Ajax Form Test Example</title>
<body>
<div id="myform">
${form(name='HI')} </div> </body> </html>  ## Handling Submit and Validation Submit and validation should look the same that you would use for any ToscaWidgets form, simply using the ajaurl bound method as an error_handler: class RootController(BaseController): @expose() @validate(test_form, error_handler=form_show) def form_submit(self, **kw): return 'Thanks: {name} {surname}'.format(**kw)  ## Complete Example 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

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)


## Showing the Form on Demand

AjaxForm since version 0.1.2 supports on demand display of forms. This permits to show a form when a javascript event happens.

To do this, you must use form.on_demand() instead of form() to display the form inside the template. This will create a javascript function named: FormClassName_on_demand(where, params) the where argument is any valid selector where to display the form, while the params method is a dictionary with the arguments that have to be sent to the backend. By default any argument specified inside the params dictionary will be used to fill the form fields.

For example, to display on demand this form:

@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()


Your template might look like this:

<div id="myform_box">
\${form.on_demand()}
<div onclick="TryAjax_on_demand('#myform_box', {'field2':'random text'})">Show Form</div>
</div>

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.