Drupal 7 TypeError for jQuery script: $ is not a function

Question

I have some JS code but Drupal 7 does not recognize it. I'm getting the following error:

TypeError: $ is not a function

Can anyone help me to make this script work? I'm using jQuery v1.4.4.

<script type="text/javascript">
this.screenshotPreview = function(){    
/* CONFIG */

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

/* END CONFIG */
$("a.screenshot").hover(function(e){
    this.t = this.title;
    // this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                                
    $("#screenshot")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    this.title = this.t;    
    $("#screenshot").remove();
}); 
$("a.screenshot").mousemove(function(e){
    $("#screenshot")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});         
};


// starting the script on page load
$(document).ready(function(){
screenshotPreview('some text');
});
</script>

For code that's supposed to handle element, you may want to use Drupal.behaviors. See pbuyle.github.io/blog/2013/11/18/… for a few explanations. — Pierre Buyle
– Pierre Buyle, Commented May 19, 2014 at 1:23

ilokhov · Accepted Answer · 2014-05-18 11:49:44Z

9

Try changing all your instances of the "$" shortcut to "jQuery" and it should work. Calling the screenshotPreview function would for example then look like this:

// starting the script on page load
jQuery(document).ready(function(){
screenshotPreview('some text');
});

Alternatively enclose all your jQuery code in a function with jQuery as a parameter and the $ shortcut should then work.

// We define a function that takes one parameter named $.
(function ($) {
  // Use jQuery with the shortcut:
  console.log($.browser);
// Here we immediately call the function with jQuery as the parameter.
}(jQuery));

(Source: https://drupal.org/node/171213)

answered May 18, 2014 at 11:49

ilokhov

6551 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pierre Buyle Over a year ago

This is also explained quite well in jQuery's own documentation, in the chapter dedicated to writing plugins: learn.jquery.com/plugins/basic-plugin-creation.

Pierre Buyle · Accepted Answer · 2014-05-19 13:30:06Z

Drupal 7 provides jQuery in the no-conflict mode, which means that $ is not the jQuery object/namespace. This should not be an issue with properly written jQuery plugins that follow jQuery's plugins authoring documentation.

JavaScript code that expect $ to be the jQuery namespace will not work within a Drupal page. This can be easily solved by wrapping the code in an immediately invoked anonymous function that will alias the jQuery namespace to $:

(function($) {
    // Here $ is the jQuery namespace.
})(jQuery);

stevegmag · Accepted Answer · 2014-09-25 20:45:13Z

Try this: (or let me know if that's not right - but it seems to work for me)

/*******************************************************************
*                    :: Define Your Functions ::
*******************************************************************/ 

(function ($) {
    removeAjaxLoader = function() {
        console.log('removeAjaxLoader');
        $('body').find('.ajax-loader').remove();
        $('body').find('.ajax-loader-icon').remove();
        return false;
    } //removeAjaxLoader

    addAjaxLoader = function() {
        console.log('addAjaxLoader');
        removeAjaxLoader();
        $('body').append('<div class="ajax-loader"></div><div class="ajax-loader-icon"></div>');
        return false;
    } //addAjaxLoader
}) (jQuery);

/*******************************************************************
*                        :: Ready Set Go ::
*******************************************************************/ 
(function ($) {
    $(document).ready(function() {
        console.log('ready complete');
        removeAjaxLoader();

    }); // document.ready
}) (jQuery);

Collectives™ on Stack Overflow

Drupal 7 TypeError for jQuery script: $ is not a function

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related