The drop is always movingYou know that saying about standing on the shoulders of giants? Drupal is standing on a huge pile of midgetsAll content management systems suck, Drupal just happens to suck less.Popular open source software is more secure than unpopular open source software, because insecure software becomes unpopular fast. [That doesn't happen for proprietary software.]Drupal makes sandwiches happen.There is a module for that

How to add JavaScript to Drupal 7

Submitted by nk on Mon, 2011-12-26 19:09

While patching Views I added this to an existing JS file thanks to caseyn. You can replace the iframe-related code (which is just two lines) to add your JS to Drupal:

 

 

 

// Magic incantation line 0 from comments
(function($, Drupal) {
  // Magic incantation line 1. The Drupal.behaviors. is mandatory,
  // the viewsUiPreview is arbitrary.
  Drupal.behaviors.viewsUiPreview = {
    // Magic incantation line 2.
    attach: function (context, settings) {
      // #preview-submit is a selector and context must be
      // passed into jQuery so for an AJAX request only the
      // new content is used.
      $('#preview-submit', context).click(function() {
        // This is the actual JS code. The var $iframe
        // could be moved one line up for a minor speedup.
        var $iframe = $('#preview-iframe');
        $iframe.attr('src', $iframe.attr('src'));
      })
    }
  }
})(jQuery, Drupal);

This is tied into Drupal with this code:
  $form['#attached']['js'][] = drupal_get_path('module', 'views_ui') . '/js/views-admin.js';

Commenting on this Story is closed.

A couple things...
Submitted by mattfarina on Tue, 2011-12-27 01:59.

First, using the attached element on a form is important. This should be used rather than drupal_add_js() when using forms or renderable arrays because it works with Drupal caching better.

Second, in the JS code example you are creating and possibly clobbering a global variable named $iframe. Variables in JS are not scoped to the local block level when there is no var in front of them. In this case it's a global variable. A way to avoid that would be use something like:

(function($, Drupal) {
// Magic incantation line 1. The Drupal.behaviors. is mandatory,
// the viewsUiPreview is arbitrary.
Drupal.behaviors.viewsUiPreview = {
  // Magic incantation line 2.
  attach: function (context, settings) {
    // #preview-submit is a selector and context must be
    // passed into jQuery so for an AJAX request only the
    // new content is used.
    $('#preview-submit', context).click(function() {
      // This is the actual JS code.
      var $iframe = $('#preview-iframe');
      $iframe.attr('src', $iframe.attr('src'));
    })
  }
}
})(jQuery, Drupal);

This does 2 things:

  1. The var in front of $iframe makes it a local variable rather than a global one.
  2. Wrapping this in an anonymous function and passing in jQuery and Drupal for proper dependency injection. The anonymous function executes immediately. This shields what happens internally from the rest of the JavaScript that executes and does so in a way that works better for minifiers.
nice
Submitted by Anonymous on Tue, 2011-12-27 16:01.

var $iframe line could be outside of the binding, to save parsing time in a second click.
Not worthy if it's expected only 1 click per page though.
--
corbacho

One problem is that this kind
Submitted by Anonymous on Fri, 2012-01-13 22:23.

One problem is that this kind of code might register two click handlers if the attach is executed twice on the same content, so use something like live() or check for some "foo-processed" class see drupal core examples.

$('#preview-submit', context).live('click', function() {
});