14

I'm currently developing a JavaScript script that runs on an administration page. I read up on the changes made in Drupal 7, namely the move from document.ready() to its own jQuery function. However, the following script doesn't work.

(function ($) {
  console.log('hello');
  $('#edit-apiusername').append('test');
})(jQuery);

console.log() is firing and I can see the output, but the simple append doesn't work. The field ID is correct.
I am not sure what I'm missing here, but I suspect it has to do with the way I'm referencing the object. Looking at Views 3 JavaScript code, I can see it's done in a similar way.

  • If you console.log($('#edit-apiusername')); does it output the object, ie is the element being found on the page by jQuery? – budda Mar 9 '11 at 0:33
  • Even with Drupal 6 you were supposed to use the Drupal behaviors, instead of document.ready. What you are reporting is not specific to Drupal 7. – kiamlaluno Mar 9 '11 at 12:32
28

I think you misunderstood the changes.

JavaScript code should be wrapped in (function ($) { ... })(jQuery); to allow usage of $ as shortcut to jQuery. This is to allow jQuery to play nicely with other libraries. In this function, you still have to wait for the DOM to be loaded if you want to alter it. That's what wrapping your code in jQuery.ready(function(){ ... }) does.

But instead of using jQuery.ready(function(){ ... }), you should use behaviors to let Drupal's JavaScript knows that your code wants to process anything added (or removed) from the DOM.

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $(context).find('#edit-apiusername').append('test');
    }
  }
})(jQuery);
1

You might also consider aliasing the whole jQuery object to another variable of your choice, as in:

$j = jQuery.noConflict();

You would put this outside of the ready statement to leave it accessible outside of the encapsulation.

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.