3

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' => 'Register',
    'page callback' => 'dw_common_ajax_download_register_page',
    'page arguments' => array(1),
    'access callback' => TRUE,
    'type' => 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 .= '<iframe id="site-contact-us" src="' . $iframe_source . '" frameborder="0" scrolling="no" width="232" height="378"></iframe>';
  // 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 .= '<script language="javascript" type="text/javascript">' . $jsscript . '</script>';
  // 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 <script> to ctools modal output as drupal_add_js not helping to load.

  • drupal_add_js? You should be able to write whatever JS in the drupal_add_js function, including raw written stuff... check out this link on drupal SE, also - you need to make sure whatever Javascript you're loading via AJAX is binded in after it's called, you should check out the .ajaxComplete() jQuery function, or the .bind() function. – inertialmedia Jun 10 '13 at 13:45
  • That did add js but for some reason didn't invoke when ctools modal got loaded; something that adding inline code did. But I couldn't get what I am trying to do. – Jeet Jun 10 '13 at 13:49
  • You hava a .ready() function on your document... you should try it with .ajaxComplete or something that binds the javascript you're loading, see this – inertialmedia Jun 10 '13 at 14:08
  • Jeet, do you find any solution to fix this issue? – Jason Jan 23 '15 at 3:13
1

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' => '<p>My Markup</p>'
    );

    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;
}

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.