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.

Improve this question
1
  • 1
    Just replace the $ with jQuery
    – niksmac
    Mar 12, 2013 at 11:22

2 Answers 2

Reset to default
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);
Improve this answer
2
  • 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, 2013 at 11:34
  • yes.will work correctly
    – monymirza
    Mar 12, 2013 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

Improve this answer
2
  • 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, 2013 at 11:30
  • Yes you should.
    – niksmac
    Mar 12, 2013 at 11:33

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.