Ctools Modal API. An Example of Using

Ctools Modal API. An Example of Using

Popups have come so much into fashion, of late, and thus appealed to customers' sentiment that the public are starting growing more and more convinced: an ideal site has to be in popups. Whareas the module Popups API for Drupal 6 have so far hit the market, it's by no means the case with Drupal 7. Yet, it is much to the credit of Earl Milesthat we have presently acquired a very handy instrument Ctools — the module that has turned to be a powerful API for drupal developers. In this post, only a small portion of the Tools capabilities will be discussed, namely, the modal API.

Let's have a look at one isolated instance, and that is, adding reviews to current news. In the meantime, just bear in mind the following: 1/ news and reviews are considered as two separate types of content: 2/ there is a block with a “Add review” link available on the news page.

First, a hook_menu page needs to be announced to which ajax will , eventually, be addressing. Secondly, a callback for the declared page should be written out and the block that  contains the “Add review” link should be added afterwards. That's it. You also keep in mind that the default value "node reference" for the field in hook_form_alter () is to be set (one can't skip it).

The code itself looks like this:

* Implements hook_menu().
function examples_menu() {
 $items['add/%ctools_js/review'] = array(
   'page callback'    => 'examples_ctools_modal_review',
   'page arguments'   => array(1),
   'access arguments' => array('create review content'),
 return $items;

* Implements hook_block_info().
function examples_block_info(){
 $blocks['add_review'] = array(
   'info' => t('Add review'),
 return $blocks;

* Implements hook_block_view().
function examples_block_view($delta = '') {
 switch ($delta) {
   case 'add_review':
     $news_id = arg(1);
     if (is_numeric($news_id)) {
       // Link class must be "ctools-use-modal"    
       $block['content'] = l(t('Add a review'), "add/nojs/review/{$news_id}", array('html' => TRUE, 'attributes' => array('class' => "ctools-use-modal")));
 return $block;

* Implements hook_form_alter().
function examples_form_alter(&$form, &$form_state, $form_id) {
 switch ($form_id) {
   case 'review_node_form':
     $news_id = arg(3);
     if (is_numeric(arg(3))) {
       $lang = field_language('node', $form['#node'], 'field_news');
       // Declaration the default value for field on the comment creating form.
       $form['field_news'][$lang][0]['nid']['#default_value'] = $news_id;

* Page callback for modal review creation.
function examples_ctools_modal_review($js = FALSE) {
 // loading libraries ctools'a 
 ctools_include('node.pages', 'node', '');
 global $user;
 $type = 'review';
 $node = (object) array(
   'uid' => $user->uid,  
   'name' => (isset($user->name) ? $user->name : ''),  
   'type' => $type,  
   'language' => LANGUAGE_NONE);
  // Loading node form with disabled scripts.
 if (!$js) {
   return drupal_get_form($type . '_node_form', $node);
 // Create array $form_state.
 $form_state = array(
   'title' => t('Add Review'),
   'ajax'  => TRUE,
 $form_state['build_info']['args'] = array($node);
 $output = ctools_modal_form_wrapper($type . '_node_form', $form_state);
 // Actions after form submit. 
 if (!empty($form_state['executed'])) {
   $output = array();
   // Close pop up.
   $output[] = ctools_modal_command_dismiss();
   $news_id = arg(3);
   // Insert  updated  view into a  page.
   if (is_numeric(arg(3))) {
     $output[] = ajax_command_html('.latest-reviews-full-style ', views_embed_view('reviews', 'block', arg(3)));
 print ajax_render($output);

At the end of the day, we have got a form for adding reviews in the popup; and mind that the whole thing spares the inconvenience of reloading the page 'on the submit'; whareas the newly created review post gets displayed in the view.

Examples of the Ctools modal API usage can be found here ( D7).

Demo can be accessable from here.

6 votes, Rating: 1.7

Read also


In the previous post I gave an example of Ctools modal API as being operated with a single form.In this one you'll be given an...

Very often there is a need to develop a site with multi-language support - possibility to translate site content on different languages. It's quite simple to do this task on Drupal, and such modules...

JavaScript code, just using php and DrupalForm API, based on the state of the second (or even on the basis of several elements), after any user's...


XML - RPC - simple remote procedure call protocol.  XML- RPC - is the father of one of  the most popular protocol SOAP....


The following article is giving a description of Titanium Appcelerator platform opportunities....

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime