How to override jQuery from contrib module

Question

It's from editable fields that I want to override jQuery from. I tried to simply copy the function in question into my scripts.js and make it work but it obviously doesn't.

I'm sure my custom js file loads because I'm already using other code in it. Now, I just put a console.log statement in the beginning of my copied function that is supposed to fire at every .blur(); but nothing's coming out.

I also checked that my custom js code got loaded after the editable fields code (In case I sound stupid: I don't know how far drupal takes care of it to do this by default.)

this is the function - originally from editablefields - that I would like to override

    (function ($) {
Drupal.behaviors.editablefields_submit = {
console.log('override check');
attach: function (context) {
    $('.editablefield-item').once('editablefield', function() {
      var $this = $(this);

      // There is only one editable field in that form, we can hide the submit
      // button.
      if ($this.find('input[type=text],textarea,select').length == 1) {
        $this.find('input.form-submit').hide();
        $this.find('input[type=text],textarea,select').change(function() {
            console.log('this out of override= ' + $this);
          $this.find('input.form-submit').triggerHandler('click');

        });
      }
    });
  }
};

Answer 1

To override the JavaScript file added to a page from a module, you need to implement hook_js_alter(). The example code shown for hook_js_alter() is the code used by the jQuery Update module uses to change the jQuery library used from Drupal.

  // Swap out jQuery to use an updated version of the library.
  $javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'jquery_update') . '/jquery.js';

In your case, if mymodule.module is the module that needs to change the JavaScript file, and the file added is script.js, then the following code can be used to achieve your task.

function mymodule_js_alter(&$javascript) {
  $javascript[drupal_get_path('module', 'editablefields') . '/editablefields.js']['data'] = drupal_get_path('module', 'mymodule') . '/script.js';
}

The same code works for a theme too. The difference is that instead of using drupal_get_path('module', 'mymodule'), the code should use path_to_theme(). ^*

Using hook_js_alter() would work also for JavaScript settings added by Drupal, external JavaScript files, and inline JavaScript code. What changes is how the array is structured in those cases.

     

^* I didn't test the code I am suggesting to use for a theme.

Answer 2

The basic idea - but drupal behaviours are a bit hazy documentationwise - would be in your script.js to use the detach function and detach this behaviour (editablefields_submit) and attach your own which would use the same jquery selectors for a different effect.

Answer 3

Doing the override in jQuery itself might be a better option in some cases.

Something like...

var myNewFunction = Drupal.behaviors.existingFunction();
Drupal.behaviors.myNewFunction = function() {
   // Do some stuff
   return myNewFunction.apply(this, arguments);
};

This way you are able extending the jQuery function instead of replacing it.