conflit – devfrontend.info

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

11/02/2015 / admin

En jQuery, l’appel d’une fonction se fait en général de la manière suivante :

$(document).ready(function() {
   $("a").click(function() {
     alert("toto");
   });
 });

$(document).ready(function() {

$("a").click(function() {

alert("toto");

});

L’objet $ est utilisé par jQuery en tant que récupérateur de fonctions, et le script sait quelle librairie appeler. Problème : si vous utilisez d’autres librairies qui utilisent aussi le dollar comme objet par défaut (Prototype, Scriptaculous dans Magento par exemple…), vous obtiendrez potentiellement des conflits et un message d’erreur de type $ is not a function !

Solution 1 :

Utiliser la fonction jQuery.noConflict(); et créer une fonction anonyme. Source : jquery – is not a function error.

jQuery.noConflict();
(function($){
    "use strict";
    $(document).ready(function() {
      $("a").click(function() {
        alert("toto");
      });
    });
})(jQuery);

jQuery.noConflict();

(function($){

"use strict";

$(document).ready(function() {

$("a").click(function() {

alert("toto");

});

})(jQuery);

Solution 2 :

Remplacer tous les $ par un alias jQuery afin de réassigner toutes les variables de l’objet $ à ce dernier. Source : « $ is not a function » dans JQuery – La solution.

jQuery(document).ready(function() {
   jQuery("a").click(function() {
     alert("toto");
   });
 });

jQuery(document).ready(function() {

jQuery("a").click(function() {

alert("toto");

});

[Magento] Résoudre le conflit de dropdown entre Bootstrap 3 et PrototypeJS

04/12/2014 / admin

Source : Resolve the conflict between Bootstrap 3 and PrototypeJS
.

Composants Bootstrap affectés :

Collapsible components useful for building accordion and navigation.
Dropdown menus : quand le menu se ferme, il disparaît entièrement.
Modal dialogs
Tootips

Solution sans chargement des librairies JavaScript via CMD :

Source : http://jsfiddle.net/dgervalle/hhBc6/.

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
    var disablePrototypeJS = function (method, pluginsToDisable) {
            var handler = function (event) {
                event.target[method] = undefined;
                setTimeout(function () {
                    delete event.target[method];
                }, 0);
            };
            pluginsToDisable.each(function (plugin) { 
                jQuery(window).on(method + '.bs.' + plugin, handler);
            });
        },
        pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip'];
    disablePrototypeJS('show', pluginsToDisable);
    disablePrototypeJS('hide', pluginsToDisable);
}
jQuery(document).ready(function ($) {
    $('.bs-example-tooltips').children().each(function () {
        $(this).tooltip();
    });
});

jQuery.noConflict();

if (Prototype.BrowserFeatures.ElementExtensions) {

var disablePrototypeJS = function (method, pluginsToDisable) {

var handler = function (event) {

event.target[method] = undefined;

setTimeout(function () {

delete event.target[method];

}, 0);

};

pluginsToDisable.each(function (plugin) {

jQuery(window).on(method + '.bs.' + plugin, handler);

});

pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip'];

disablePrototypeJS('show', pluginsToDisable);

disablePrototypeJS('hide', pluginsToDisable);

}

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

$('.bs-example-tooltips').children().each(function () {

$(this).tooltip();

});

Solution avec chargement des librairies JavaScript via CMD :

Source : http://jsfiddle.net/dgervalle/e8Apv/.

require.config({
    baseUrl: '/',
    paths: {
        'jquery': "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min",
        'bootstrap': "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min"
    },
    shim: {
        'bootstrap': ['jquery']
    },
    map: {
        '*': {
            'jquery': 'jQueryNoConflict'
        },
        'jQueryNoConflict': {
            'jquery': 'jquery'
        }
    }
});
define('jQueryNoConflict', ['jquery'], function ($) {
    return $.noConflict();
});
if (Prototype.BrowserFeatures.ElementExtensions) {
    require(['jquery', 'bootstrap'], function ($) {
        // Fix incompatibilities between BootStrap and Prototype
        var disablePrototypeJS = function (method, pluginsToDisable) {
                var handler = function (event) {  
                    event.target[method] = undefined;
                    setTimeout(function () {
                        delete event.target[method];
                    }, 0);
                };
                pluginsToDisable.each(function (plugin) { 
                    $(window).on(method + '.bs.' + plugin, handler); 
                });
            },
            pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip'];
        disablePrototypeJS('show', pluginsToDisable);
        disablePrototypeJS('hide', pluginsToDisable);
    });
}
require(['jquery', 'bootstrap'], function($) {
    $(document).ready(function () {
        $('.bs-example-tooltips').children().each(function () {
            $(this).tooltip();
        });
    });
});

require.config({

baseUrl: '/',

paths: {

'jquery': "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min",

'bootstrap': "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min"

shim: {

'bootstrap': ['jquery']

map: {

'*': {

'jquery': 'jQueryNoConflict'

'jQueryNoConflict': {

'jquery': 'jquery'

}

});

define('jQueryNoConflict', ['jquery'], function ($) {

return $.noConflict();

});

if (Prototype.BrowserFeatures.ElementExtensions) {

require(['jquery', 'bootstrap'], function ($) {

// Fix incompatibilities between BootStrap and Prototype

var disablePrototypeJS = function (method, pluginsToDisable) {

var handler = function (event) {

event.target[method] = undefined;

setTimeout(function () {

delete event.target[method];

}, 0);

};

pluginsToDisable.each(function (plugin) {

$(window).on(method + '.bs.' + plugin, handler);

});

pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip'];

disablePrototypeJS('show', pluginsToDisable);

disablePrototypeJS('hide', pluginsToDisable);

});

}

require(['jquery', 'bootstrap'], function($) {

$(document).ready(function () {

$('.bs-example-tooltips').children().each(function () {

$(this).tooltip();

});

[JQuery] J’ai mis jQuery à jour et la fonction .live() ne fonctionne plus. Méthode de migration.

18/09/2013 / admin

UPDATE : jquery-migrate – Migrate older jQuery code to jQuery 1.9+.

Sources : http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function | http://stackoverflow.com/questions/14703646/jquery-how-to-use-the-on-method-instead-of-live/14703668#14703668

A lire avant que vous n’entrepreniez un Rechercher et Remplacer automatique:

Pour une migration rapide sur un site en production, ne vous contentez pas d’un remplacement automatique du mot-clé live par on, car les paramètres des deux fonctions sont différents :

.live(events, function)

1	.live(events, function)

devrait devenir :

.on(eventType, selector, function)

1	.on(eventType, selector, function)

La présence du sélecteur est très importante! Si vous n’avez pas besoin de l’utiliser, déclarez le comme null.

Migration Example 1:

Avant :

$('#mainmenu a').live('click', function)

1	$('#mainmenu a').live('click', function)

Après, il faut déplacer l’élément enfant (a) sur le paramètre selector de la fonction .on() :

$('#mainmenu').on('click', 'a', function)

1	$('#mainmenu').on('click', 'a', function)

Migration Example 2:

Avant :

$('.myButton').live('click', function)

1	$('.myButton').live('click', function)

Après, il faut déplacer l’élément (.myButton) sur le paramètre selector de la fonction .on(), et cible l’élément parent le plus proche (de préférence un ID) :

$('#myMenu').on('click', '.myButton', function)

1	$('#myMenu').on('click', '.myButton', function)

Si vous ne savez pas quoi mettre comme élément parent, body fonctionne toujours :

$('body').on('click', '.myButton', function)

1	$('body').on('click', '.myButton', function)

Migration Example 3 :

Avant :

$("[data-role='page']").live('click',function(){
    $("#my").html(result);
});

$("[data-role='page']").live('click',function(){

$("#my").html(result);

});

Après :

$('body').on('click', "[data-role='page']", function(){
    $("#my").html(result);
});

$('body').on('click', "[data-role='page']", function(){

$("#my").html(result);

});

Articles récents

Catégories

Archives

Méta

Étiquette : conflit

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

Solution 1 :

Solution 2 :

[JQuery] J’ai mis jQuery à jour et la fonction .live() ne fonctionne plus. Méthode de migration.

A lire avant que vous n’entrepreniez un Rechercher et Remplacer automatique:

Migration Example 1:

Migration Example 2:

Migration Example 3 :