1

Searching online docs so far and I've found much about Drupal Behaviors running when the DOM is ready i.e. the ready JQuery function.

But what about for example if I want my JQuery code to run once all the images have loaded? Now, I could use the JQuery load function, but this is apparently not recommended to use such Jquery functions JQuery directly in Drupal but work within Behaviors instead - but these are no good to me if they only run on DOM ready event.

Thoughts?

Improve this question
9
  • 1
    Could you provide your source(s) for the recommendation to still use Drupal behaviors when you need to attach to $(window).load()? I'd be interested to read that, sounds nuts to me :)
    – Clive ♦
    Commented Feb 5, 2014 at 16:12
  • +1 Thanks Clive! It does indeed sound nuts. One of the places I'm going on regarding recommendation is this here: drupal.org/node/756722#behaviors - it suggests to me that all my JQuery has to go in the wrapper described there. What the doc doesn't do is describe how to use JQuery event triggered functions such as load within Behaviors, it seems. I'll try and find the other recommendations here. For now, I'm just going to use JQuery directly and include the .js in the theme.info file, but I'd love to know if there are conventions to follow.
    – therobyouknow
    Commented Feb 5, 2014 at 16:17
  • "Recommendation" number 2: drupal.stackexchange.com/questions/16491/… e.g. " you shouldn't use $(document).ready() but add you code as a the attach function under the Drupal.behaviors.yourModule namespace." - maybe I've assumed what they said applies to all event triggered functions, not just ready.
    – therobyouknow
    Commented Feb 5, 2014 at 16:28
  • "Recommendation" number 3: stackoverflow.com/a/5641799/227926 - see comments by amateur barista and Pierre Buyle. Come on folks, don't you want to do things at a point other than DOM ready, I certainly need to!
    – therobyouknow
    Commented Feb 5, 2014 at 16:35
  • 1
    $.ready() isn't functionally equivalent to $(window).load() though (not even close), so I would take all of those "recommendations" with just the smallest pinch of salt. I guess you could arguably put your $(window).load() inside the behavior wrapper but that doesn't feel any better to me (it's not like the window is going to be able to reload in any meaningful way in response to Drupal's AJAX). If it helps at all, I use the $(window).load() method outside of behaviors all the time, and I can't recall ever seeing a problem
    – Clive ♦
    Commented Feb 5, 2014 at 16:46

1 Answer 1

Reset to default
2

Using .load() on element to attach event handler in your behaviors should not be a problem. Using it directly to window outside a behavior, for instance to wait for all images to be loaded, should be okay too.

As pointed by Clive in the comment, Drupal behaviors are to be used in replacement of $.ready(), not $(window).load(). However, if content (ie. new DOM elements) is added to the page after page load (AJAX calls, content generated from JavaScript, etc.), handlers for $.ready() will not be called and will not have a chance to process the added DOM elements. While the attach() method of all behaviors is also called when this happen. With a parent of the added DOM elements as context.

Behaviors can also have a detach() method which is called when DOM element are removed or before form serialization. This us, for instance, used to properly destroy WYSIWYG editors when their textarea are removed from the DOM and to prepare the POSTed data hen their form are submitted.

Off course, this rely on the JavaScript doing the addition/removal/serialization to properly call Drupal.attachBehaviors() and Drupal.detachBehabiors(). Something that is done by Drupal core (including form handling and the Drupal AJAX Framework) and properly written contrib modules.

I'm not familiar with the load event and its behavior with content added after the first time it is triggered. If it does not fire multiple times, re-registering the handler in a behavior attach() method may be required to ensure newly added image are also processed.

Improve this answer
4
  • +1 Thanks @Pierre Buyle ! Do you know why we'd even need behaviors at all? If we're going to use standard JQuery for other things then why replace just one. Also, it's not made explicit that Behaviors only replaces $.ready() and nothing else and what the reasoning is. I would be looking to accept your answer. If you can explain what the point of Behaviours is, then that would push me quicker to accepting it :) thanks.
    – therobyouknow
    Commented Feb 5, 2014 at 20:23
  • 1
    @therobyouknow They're most useful for getting DOM events re-attached easily (as easily as adding Drupal.attachBehaviors()). When Drupal replaces parts of your page which contain elements that have JS events bound to them, those bindings obviously get lost. With behaviors it's easy to get those events re-attached. It does the same sort of task as jQuery.on(), but keeps everything under the Drupal namespace
    – Clive ♦
    Commented Feb 6, 2014 at 14:48
  • +1 @Clive for last comment and Accepted answer Peter Buyle for the answer. Thanks folks!
    – therobyouknow
    Commented Feb 6, 2014 at 14:53
  • jQuery.on() attach handlers to elements, Drupal.attachBehaviors() invoke all behaviors' attach() methods in order for them to process newly available DOM elements. Processing could include attaching handlers, but are not restricted to attaching handlers. A behaviors can be used, for instance, to alter all links element and add class to those referencing an external page.
    – Pierre Buyle
    Commented Feb 6, 2014 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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