I am trying to build an AJAX popup for my custom built multi-step form using the form API. I have examined the module "Modal forms" and wondering if i should use that module or just create the AJAX functionality from scratch. Could someone one please give me an example of how I can add AJAX popup functionality to my form?
Here is an illustration of what I would like to achieve:
I have been looking at the Chaos tool suite module example:
ctools_include('ajax');
ctools_include('modal');
// Add CTools' javascript to the page.
ctools_modal_add_js();
// Create our own javascript that will be used to theme a modal.
I have found this code snippet. I am trying to get it to work in my module.
Here is the code I found
function redirect_custom_reg_menu_alter(&$items) {
if (isset($items['user/register'])) {
$items['user/register']['page arguments'] = array(
'redirect_custom_reg_user_register_form'
);
}
}
function redirect_custom_reg_user_register_form() {
$form = array();
// Add the form fields for the registration form.
// ....
$form['name']['formtype'] = array(
'#type' => 'radios',
'#title' => t('form type'),
'#options' => array(
t('one form'),
t('two form'),
t('three form')
),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'Submit'
);
return $form;
}
function redirect_custom_reg_user_register_form_submit($form, &$form_state) {
drupal_set_message(t('The form has been submitted. personal="@username"', array('@username' => $form_state['values']['username'])));
}
Here is the code from the modal example in Chaos tool suite module:
switch ($option) {
case 0:
drupal_set_message('patient');
$form_state['redirect'] = 'patient/form';
break;
case 1:
drupal_set_message('student');
break;
case 2:
drupal_set_message('doctor');
break;
}
Here is the example from the Chaos tools which creates a custom modal display:
Here is the code that I have extracted from the tutorial. From the comment this seems to be used to theme the custom modal:
function ctools_ajax_sample_page() {
$sample_style = array(
'ctools-sample-style' => array(
'modalSize' => array(
'type' => 'fixed',
'width' => 500,
'height' => 400,
'addWidth' => 20,
'addHeight' => 15
),
'modalOptions' => array(
'opacity' => .5,
'background-color' => '#246'
),
'animation' => 'fadeIn',
'modalTheme' => 'CToolsSampleModal',
'throbber' => theme('image', array(
'path' => ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'),
'alt' => t('Loading...'),
'title' => t('Loading')
)),
),
);
drupal_add_js($sample_style, 'setting');
// .....................
// .....................
// This displays the widget.
$button_form = ctools_ajax_sample_ajax_button_form();
$links[] = l(t('Wizard (no modal)'), 'ctools_ajax_sample/nojs/animal');
$links[] = ctools_modal_text_button(t('Wizard (default modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'));
// .....................
// .....................
}