4

I got a basic static CSS/HTML theme which is using some .js like jcarousellite.js and it has a jquery file together which is jquery-1.4.2.min.js

So I import that jcarousellite.js via theme's .info:

scripts[] = js/jcarousellite.js

Then there is some inline script which goes with that template, so I pasted that to my html.tpl.php

    $(function() {
         $(".carousel").jCarouselLite({
                    btnNext: ".next",
                    btnPrev: ".prev"
         });
});

Now, to make it all work, it needs jQuery. So since D7 loads jQuery by default from its core (and it does load it and current version is 1.4.4 that comes with Drupal 7.21) I understand that the jquery-1.4.2.min.js which comes together with static template is not needed right? So I do not add it to my .info and after flushing caches and everything, it loads my jcarousellite.js and it loads inline .js, but it doesn't work.

If I load that jquery-1.4.2.min.js via .info then all .js is working on the website. So what I am missing? How to make it work without importing that older jquery library via .info and using the jQuery from Drupal's core? Now both and core jQuery and that custom jQuery libraries are loaded at same time.

  • 1
    Just replace the $ with jQuery – niksmac Mar 12 '13 at 11:22
9

add a anther js file via theme's .info;

scripts[] = js/mycustomscript.js

dont add your inline script in html.tpl.php , add it in mycustomscript.js file like

(function ($) {

  Drupal.behaviors.exampletheme = {
    attach: function (context, settings) {
      $(".carousel").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev"
     });
    }
  };

})(jQuery);
  • Your method works. Those two lines before my code fits to all inline scripts? That template I am using has more inline code for other functions. So I just need to paste them all into one custom .js and paste it inside your example code and it all will work correctly? – user13176 Mar 12 '13 at 11:34
  • yes.will work correctly – monymirza Mar 12 '13 at 11:49
3

The $ global will no longer refer to the jquery object. However, with this construction, the local variable $ will refer to jquery, allowing your code to access jQuery through $ anyway, while the code will not conflict with other libraries that use the $ global.

http://drupal.org/update/modules/6/7#javascript_compatibility

  • It is not working if I paste that inline piece between (function ($) { // Original JavaScript code. })(jQuery); But it does work when I replace all $ with jQuery, but that looks kinda primitive method... I mean, there are much more $ symbols in other scripts and I need to replace with jQuery them as well? – user13176 Mar 12 '13 at 11:30
  • Yes you should. – niksmac Mar 12 '13 at 11:33

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.