CTools modal form kickstart

After Drupalcon Denver 2012, it’s patently obvious that it’s certainly time to start using Drupal 7 as your mainstay for production sites, since the pros now outweight the cons even for conservative working stiffs like me. So the question often arises, when you go to do something you are thoroughly used to doing in Drupal 6, you say “where are my old friends from Drupal 6?” and cringe.

So we have to help each other out, one such example is, say, how do I put a form into a modal window (i.e. popup) in Drupal 7? Sometimes, once you see a simple example, then it’s straightforward to apply all the juicy info from the advanced help modules and documentation you can find on d.o. and around the web. The problem is often how to break the ice, how to get started.

As already explained, there is a silent revolution now going on with Drupal 7, on the back-end and with responsive theming (the latter choices made even more exciting with the release now of John Albin’s Zen theme release 7.x-5.x just the other day!). Now, Chaos Tools (I would calll it “the other core”) is definitely part of that silent revolution that is giving us exciting possibilities now for Drupal 7 and building towards making sensible definitions for Drupal 8.

So how do I make a simple ass form in a modal window with Chaos Tools AJAX? By making a simple ass module that sets it up, of course. But how? One answer is by taking a look at the code running the Chaos Tools AJAX Demo (It can be accessed via the /ctools_ajax_sample path once you have enabled the Chaos Tools (CTools) AJAX Example module that comes with the Chaos Tools suite), which you can find at ./ctools/ctools_ajax_sample/ctools_ajax_sample.module – the login modal is a good place to start).

If you need something simpler, the module attached to this article should be just the ticket for you.

The simple ass module

info file:

name = "Simple ass modal"
description = "Registration helper and popup utilities"
package = "Simple ass modules"
core = 7.x
files[] = simple_ass_modal.module

dependencies[] = "ctools"

module file:

<?php
/**
 * @file
 * Simple ass modal module
 */
 
/**
* Implementation of hook_menu().
*/
function simple_ass_modal_menu() {
  $items = array();

  $items['simple_ass_modal/%ctools_js/test'] = array(
    'title' => 'Modal test',
    'page callback' => 'simple_ass_modal_page',
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM,
  );
  
  $items['simple_ass_modal/%ctools_js/test/form'] = array(
    'title' => 'AJAX modal dialog',
    'page callback' => 'simple_ass_modal_popup',
    'page arguments' => array(1),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

function simple_ass_modal_page() {
  ctools_include('ajax');
  ctools_include('modal');
  ctools_modal_add_js();
  
  $custom_style = array(
    'my-simple-ass-modal-style' => array(
      'modalSize' => array(
        'type' => 'fixed',
        'width' => 425,
        'height' => 250,
      ),
      'animation' => 'fadeIn',
    ),
  );
  drupal_add_js($custom_style, 'setting');

//  $output = ctools_modal_text_button(t('Click right here'), 'simple_ass_modal/nojs/test/form', t('Pop me up'));
  $output = ctools_modal_text_button(t('Click Here'), 'simple_ass_modal/nojs/test/form', 
                                                        t('Pop me up'), 'ctools-modal-my-simple-ass-modal-style');
  $output .= '<div id="modal-message">&nbsp</div>';
  ctools_include('plugins');
  return $output;
}

function simple_ass_modal_popup($js = NULL) {
  // degrade half-assed to no js
  if(!$js) {
    return drupal_get_form('simple_ass_modal_form');
  }
  // adelante!
  ctools_include('modal');
  ctools_include('ajax');
  $form_state = array(
    'title' => t('Simple ass modal form...'),
    'ajax' => TRUE,
  );
  $output = ctools_modal_form_wrapper('simple_ass_modal_form', $form_state);
  if (!empty($form_state['executed'])) {
    // We'll just overwrite the form output if it was successful.
    $output = array();
    $output[] = ctools_modal_command_dismiss(t('Success!'));
    // If you want to leave a message and links:
    //$output[] = ctools_modal_command_display(t('Login Success'), '<div class="modal-message">Login successful. 
                      //    <a href="/modal/nojs/test">Go back</a>.</div>');
  }
  print ajax_render($output);
  exit;
}

function simple_ass_modal_form(&$form_state) {
  $form['text'] = array(
    '#type' => 'textfield',
    '#title' => t('Simple ass text'),
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );

  return $form;
}

function simple_ass_modal_form_submit(&$form, &$form_state) {
  $form_state['message'] = t('Message: %message', array('%message' => $form_state['values']['text']));
}

Running the simple ass module

After enabling the module, go to http://example.com/simple_ass_modal/nojs/test . Click on Click here.

That’s it. Now check out the code and take it from there.