jQuery Uncaught TypeError : La propriété '$' de l'objet [objet Window] n'est pas une fonction

Question

Tous, J'ai téléchargé une application de formulaire JS/CSS et j'essaie de l'utiliser dans Wordpress. J'ai le code suivant :

$(document).ready(function () {

/*----------------------------------------------------------------------*/
/* Parse the data from an data-attribute of DOM Elements
/*----------------------------------------------------------------------*/

$.parseData = function (data, returnArray) {
    if (/^\[(.*)\]$/.test(data)) { //array
        data = data.substr(1, data.length - 2).split(',');
    }
    if (returnArray && !$.isArray(data) && data != null) {
        data = Array(data);
    }
    return data;
};

/*----------------------------------------------------------------------*/
/* Image Preloader
/* http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
/*----------------------------------------------------------------------*/

// Arguments are image paths relative to the current page.
$.preload = function() {
    var cache = [],
        args_len = arguments.length;
    for (var i = args_len; i--;) {
        var cacheImage = document.createElement('img');
        cacheImage.src = arguments[i];
        cache.push(cacheImage);
    }
};

/*----------------------------------------------------------------------*/
/* fadeInSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/

$.fn.fadeInSlide = function (speed, callback) {
    if ($.isFunction(speed)) callback = speed;
    if (!speed) speed = 200;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.fadeTo(speed / 2, 1).slideDown(speed / 2, function () {
            callback();
        });
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* fadeOutSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/

$.fn.fadeOutSlide = function (speed, callback) {
    if ($.isFunction(speed)) callback = speed;
    if (!speed) speed = 200;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.fadeTo(speed / 2, 0).slideUp(speed / 2, function () {
            $this.remove();
            callback();
        });
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* textFadeOut by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/

$.fn.textFadeOut = function (text, delay, callback) {
    if (!text) return false;
    if ($.isFunction(delay)) callback = delay;
    if (!delay) delay = 2000;
    if (!callback) callback = function () {};
    this.each(function () {

        var $this = $(this);
        $this.stop().text(text).show().delay(delay).fadeOut(1000,function(){
            $this.text('').show();
            callback();
        })
    });
    return this;
};

/*----------------------------------------------------------------------*/
/* leadingZero by revaxarts.com
/* adds a leding zero if necessary
/*----------------------------------------------------------------------*/

$.leadingZero = function (value) {
    value = parseInt(value, 10);
    if(!isNaN(value)) {
        (value < 10) ? value = '0' + value : value;
    }
    return value;
};

});

J'ai supposé que l'absence de conflit avec Wordpress était à l'origine du problème et j'ai donc mis à jour la toute dernière parenthèse pour qu'elle ressemble à ce qui suit :

}, "jQuery");

Cependant, j'obtiens toujours la même erreur. Quelqu'un sait-il ce qui est à l'origine de ce problème et comment le résoudre ?

Merci d'avance !

Answer 1

Il s'agit d'un problème de syntaxe, la bibliothèque jQuery incluse dans WordPress se charge en mode "no conflict". Cela permet d'éviter les problèmes de compatibilité avec d'autres bibliothèques javascript que WordPress peut charger. En mode "no-confict", le raccourci $ n'est pas disponible et la version longue de jQuery est utilisée, c'est-à-dire

jQuery(document).ready(function ($) {

En incluant le $ entre parenthèses après l'appel de la fonction, vous pouvez utiliser ce raccourci à l'intérieur du bloc de code.

Pour plus de détails, voir Codex WordPress

Answer 2

Ma construction préférée pour éviter les conflits :

jQuery(function($) {
  // ...
});

Appeler jQuery avec un pointeur de fonction est un raccourci pour $(document).ready(...)

Ou comme nous le disons dans coffeescript :

jQuery ($) ->
  # code here

Answer 3

Dans Wordpress, il suffit de remplacer

$(function(){...});

avec

jQuery(function(){...});

Answer 4

Essayer :

jQuery(document).ready(function ($) {

Answer 5

Vous pouvez envisager de remplacer le script jQuery par défaut de WordPress par la bibliothèque Google en ajoutant quelque chose comme ce qui suit dans le fichier functions.php du thème :

function modify_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');

Code tiré d'ici : http://www.wpbeginner.com/wp-themes/replace-default-wordpress-jquery-script-with-google-library/