How to bind javascript to ctools modal load I have a ctools modal popup that has no Drupal generated form but an external iframe that loads a form into ctools modal. I have some jQuery codes to be invoked when the iframe gets reloaded (ie. to assume external form gets submitted).

This jquery code initiated and works fine with a normal page(without ctools) while javascript has been added by drupal_add_js().

How can I do the same with cTools?

// MENU
function dw_common_menu() {
  $items['download/%ctools_js/register'] = array(
    'title' =&gt; 'Register',
    'page callback' =&gt; 'dw_common_ajax_download_register_page',
    'page arguments' =&gt; array(1),
    'access callback' =&gt; TRUE,
    'type' =&gt; MENU_NORMAL_ITEM,
  );
  return $items;
}
// Page callback
function dw_common_ajax_download_register_page($js = NULL) {
  /*
   * $sess_key : create a unique session key if not exists;
   * @TODO : instead of md5(REQUEST_TIME) use some other random function as multiple users
   * might access at a same time.
   */
  $output = "";  
  $iframe_source = 'http://example.com/cn/iframe.form.php';
  $output .= '&lt;iframe id="site-contact-us" src="' . $iframe_source . '" frameborder="0" scrolling="no" width="232" height="378"&gt;&lt;/iframe&gt;';
  // Attaching jquery iframe event load in the ctools output itself. 
  // The script from files are not invoking as window.load() doesn't takes effect in ctools window.
  $jsscript = "";
  $jsscript = 'jQuery(document).ready(function() {
    (function is_key_authorized(){
      alert(\'sd\');
    }
      });  
    })();
    is_key_authorized();
    });';
  $output .= '&lt;script language="javascript" type="text/javascript"&gt;' . $jsscript . '&lt;/script&gt;';
  // Fall back if $js is not set.
  if (!$js) {
    return $output;
  }
  ctools_include('modal');
  ctools_include('ajax');
  return ctools_modal_render('Register', $output);
  exit;
}


Here I am trying to concatenate &lt;script&gt; to ctools modal output as drupal_add_js not helping to load.
I know this is an old question, but maybe this answer can help someone - I know I searched for an answer for a while.

I had a similar issue, I wanted to execute some javascript when a specific page of mine was rendered by ctools modal.

I found the answer in the help folder of the ctools module ctools/help/modal.html :


  If you need to do more than just render your modal, you can use a CTools $commands array. See the function ctools_modal_render() for more information on what you need to do here.


How to apply that to this situation: you need to grab the contents of the very small ctools_modal_render() function and use it to add commands to the array of commands that is executed in the function. This is the function:

function ctools_modal_render($title, $output) {
    $commands = array();
    $commands[] = ctools_modal_command_display($title, $output);
    print ajax_render($commands);
}


This is what my snippet looks like in my page - I wanted to add a body class among other things, so I could style the #modalBackdrop for the modal overlay based on context, so here's my modified page function:

function gc_alterations_modal_page($js=null){

    $page = array();

    $page['search-results'] = array(
        '#markup' =&gt; '&lt;p&gt;My Markup&lt;/p&gt;'
    );

    if( $js ) {
        // Required includes for ctools to work:
        ctools_include('modal');
        ctools_include('ajax');

        // alternate to using: ctools_modal_render('Search', $page);
        $commands = array();
        $commands[] = ajax_command_invoke('body', 'addClass', array('myclass-modal'));
        $commands[] = ctools_modal_command_display('Search', $page);
        print ajax_render($commands);
        return;
    }

    return $page;
}