Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Binding ctools modal handlers dynamically without page reload

Parent Feed: 

On a recent project I required a way to bind ctools handlers to their respective links dynamically. The project had the links being displayed using ajax based on user input, and so the handlers would have to be bound to the new links (and unbound for the links that disappeared) without the page being reloaded.

Searching online for a solution did not turn up any useful results. Digging into the ctools module code, there didn't seem to be any easy way to accomplish this. The handlers are bound on page load, using Drupal behaviours.

The behaviour that is executed is located in ctools/js/modal.js and is named Drupal.behaviors.ZZCToolsModal. Calling this method directly won't work because of the use of the jquery function once().But the useful code parts can be copied and added into a custom function, removing the once() function call. In addition, a call to unbind for each link must be made to prevent multiple handlers from being registered for the same link.

The following is an example of the a.ctools-use-modal handler code modified to work in a custom function: // Modified code to set handler

$('area.ctools-use-modal, a.ctools-use-modal').each( function() {
        var $this = $(this);
        $this.unbind(); // Note the unbind: Otherwise there are multiple bind events which causes issues
        $this.click(Drupal.CTools.Modal.clickAjaxLink);
        // Create a drupal ajax object
        var element_settings = {};
        if ($this.attr('href')) {
          element_settings.url = $this.attr('href');
          element_settings.event = 'click';
          element_settings.progress = {
            type: 'throbber'
          };
        }
        var base = $this.attr('href');
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
      });

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web