Writing various AJAX forms in Drupal 7 1. Overview of Form API 2. Ctools 2.1 Ctools features 3. Ajax...

Post on 29-Dec-2015

217 views 2 download

Tags:

transcript

Writing various AJAX forms in Drupal 7

1. Overview of Form API2. Ctools2.1 Ctools features3. Ajax3.1 Ajax Forms in Drupal4. Putting it all together (demo)

1. Overview of Form API

- provides a collection of functions to enable the processing and display of HTML forms

- these functions are used to achieve consistencyin the form processing and presentation

1. Overview of Form API

- define : - my_module_example_form()- alter : - my_module_example_form_alter()- validate : - my_module_example_form_validate()- submit : - my_module_example_form_submit()

1. Overview of Form API

- basic function is drupal_get_form($form_id) which handles retrieving, processing, and displaying a rendered HTML form for modules automatically

- drupal_form_submit($form_id, &$form_state)used to build and submit forms programmatically,without any user input

2. Ctools

- a suit of APIs and tools to improve the developerExperience

- it includes : - form tools - form wizard - modal dialog - plugins - exportables

2.1 Ctools features

- Form tools : - tools to make it easier for forms to deal with Ajax

- Form wizard : - an API to make multi-step forms much easier

2.1 Ctools features

- Modal dialog : - tools to make it simple to put a form in a popup

- Plugins : - tools to make it easy for modules to let other modules implement plugins from .inc files

3. Ajax

- stands for Asynchronous JavaScript and XML

- group of interrelated web development techniquesused on the client side to create asynchronous webapplications

- result : web applications can send data in background without interfering with the display orbehavior of the current page

3.1 Ajax Forms in Drupal

- offer dynamic behavior with no page reloads

- no Javascript code needs to be written

- use the '#ajax' property on a form element tomake it Ajax-enabled

3.1 Ajax Forms in Drupal

- '#ajax' property has arguments :

- 'callback' => function to call

- 'wrapper' => element on which to operate

- 'method' => what to do with the result

- 'effect' => how to do the operation