0
  • [Drupal 7.43]
  • [Production Linux Environment]
  • [Omega4 Sub-Theme]
  • [jQuery-Update-Module-7.x-3.0-alpha3]

(Some Questions) I am using jQuery on my website to accomplish several fixes:

  1. Make iPhones respond to Hover Events.
  2. Add a Div-wrapper to enclose a group of Navigation-Links.
  3. Create an Accordion Navigation Drop-Down.
  4. Stop Google-Maps-Windows from scrolling in Mobile environments, eclipsing the regular page scroll.

I have integrated jQuery using the MyTheme-Info strategy. That is, that I have added the script-tag of the fixes individually to the MyTheme.info file. Then I have uploaded the corresponding Fix-01.js files to the server. Basically, this seems to be working, but I have some questions and these concern the BONUS weirdness that Drupal adds to the already amply weird jQuery itself.

I know that I have to wrap the "Fix-0x.js" files in the code:

Code Wrapper #1

(function ($) { //Some amazing code here }(jQuery));

As I understand it, this allows jQuery to use the '$' symbol without clashing with other libraries that also use this same symbol.

I know that jQuery also MUST wait for the DOM to load before the script can have any access to the elements of the DOM. Often this is done with the code:

Code Wrapper #2

$(document).ready(function() { //Some amazing code here });

Or sometimes it is written:

Code Wrapper #3

$(function() { //Some amazing code here });

The question is, does the first jQuery wrapper (Code-Wrapper #1) include the Document-Ready function or not (Code-Wrapper #2). Do I have to wrap the jQuery in BOTH wrappers? I know that Code-Wrapper #2 and Code-Wrapper #3 are equivalent.

Improve this question

1 Answer 1

Reset to default
3

does the first jQuery wrapper (Code-Wrapper #1) include the Document-Ready function or not (Code-Wrapper #2).

No it doesn't.

Do I have to wrap the jQuery in BOTH wrappers?

If you need DOM ready, yes you do, but in Drupal 7, they suggested Drupal.behaviors. See https://www.drupal.org/node/756722#behaviors

Improve this answer
4
  • What I am struggling to understand here is that, to me, Drupal.behaviors seems to be for those who are writing Modules. I am not writing a Module, I am just trying to implement jQuery on top of the Drupal presentation. Are you saying that, in ALL cases, Drupal.behaviors is the accepted "best practice?" If so, what do I put in place of the "MyModule" slot in the Drupal.behaviors boilerplate, since I have no Module?
    – ChandraSwami
    Commented Jun 1, 2016 at 18:19
  • MyTheme of course.
    – Itang Sanjana
    Commented Jun 1, 2016 at 18:21
  • Or "FlyingSpaghettiMonster" @ChandraShekharaSwami, it's completely arbitrary; just needs to something unique to your module/theme. The reason behaviours are useful is that Drupal invokes their attach methods again when it acts on the DOM. So let's say you had a View with an AJAX pager, each row of which contained several images, that you make into a slider with the standard jQuery.ready ...when you change page, Drupal loads it via AJAX, and your code to attach sliders to the new elements doesn't run. With behaviours, it does run, because you're listening for Drupal to make a change
    – Clive ♦
    Commented Jun 1, 2016 at 18:44
  • Thanx to both @ItangSanjana and Clive for the help. I had been mulching through the documentation and I had not yet realized that the "MyModule" slot was just a Namespace Delimiter and nothing more. I thought that it tied into the Drupal Module (that was being written) somehow directly.
    – ChandraSwami
    Commented Jun 2, 2016 at 15:45

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.