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');

        });
      }
    });
  }
};
up vote 5 down vote accepted

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.

JavaScript settings

external JavaScript file

inline JavaScript

     

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

  • hmm this should work better than my idea, I think. And it's more Drupal oriented. – magtak Oct 24 '12 at 13:36
  • how to achieve this in drupal 8? – siddiq Apr 5 at 23:04
  • @siddiq hook_js_alter() is still used, in Drupal 8. – kiamlaluno Apr 6 at 7:01

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.

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.