4

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:

Modal login form

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:

custom modal

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'));
  // .....................
  // .....................
}
1
0

Here is the answer to my question by using the chaos tools:

// this creates the url that can be entered to reach this form
function ctools_ajax_sample_menu() {
  $items['ctools_ajax_sample/simple_form'] = array(
    'title' => 'Simple Form',
    'page callback' => 'regone_form',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK
  );

  return $items;
}

function regone_form() {
  global $user;

  ctools_include('ajax');
  ctools_include('modal');

  // Add Ctools' JavaScript to the page.
  ctools_modal_add_js();

  $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');

  ctools_add_js('ctools-ajax-sample', 'ctools_ajax_sample');
  ctools_add_css('ctools-ajax-sample', 'ctools_ajax_sample');

  $links = array();
  $links[] = ctools_modal_text_button(t('Wizard (custom alex modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'), 'ctools-modal-ctools-sample-style');

  $output  = theme('item_list', array('items' => $links, 'title' => t('Actions')));

  // This deals with theming of the modal box.
  $output .= theme('ctools_ajax_sample_container', array('content' => '<h1>' . t('Sample Content') . '</h1>'));

  return array('markup' => array('#markup' => $output));
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.