up vote 3 down vote favorite
1
share [fb]

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.

link|improve this question
82% accept rate
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 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 at 12:32
The question title is a little general for the question iteself. – Jeremy French Mar 9 at 13:29
feedback

2 Answers

up vote 14 down vote accepted

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);
link|improve this answer
+1 for taking about behaviors. – Jeremy French Mar 9 at 8:07
feedback
up vote 0 down vote

This video from DrupalCon Chicago is worth watching: Drupal 7 JavaScript for Developers

link|improve this answer
feedback

Your Answer

 
or
required, but never shown

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