web-dev-qa-db-fra.com

Comment implémenter JQuery.noConflict ()?

J'utilise les codes javascript et jquery sur la même page HTML. Pour une raison quelconque, la bibliothèque jQuery empêche mon code javascript natif de fonctionner correctement.

J'ai trouvé cette page: jQuery No Conflict qui dit que vous pouvez utiliser jquery.noConflict pour libérer $ back en javascript. Cependant, je ne sais pas comment faire cela? 

Plus précisément, je ne suis pas sûr de savoir comment mettre cela en œuvre correctement? Où va le code Jquery, où va le code JS? 

Mon code est ci-dessous:

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
javascriptjqueryconflict
24
SuperLuigi

jQuery.noConflict réinitialisera la variable $ afin que ce ne soit plus un alias de jQuery. En plus d'appeler une fois, il n'y a pas grand chose d'autre à faire. Cependant, vous pouvez créer votre propre alias avec la valeur de retour, si vous le souhaitez:

var jq = jQuery.noConflict();

Et, généralement, vous voulez le faire juste après avoir inclus jQuery et tous les plugins:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>

Vous pouvez également aller plus loin et libérer jQuery avec noConflict(true). Cependant, si vous prenez cette route, vous voudrez certainement un alias car ni $ ni jQuery ne sera probablement ce que vous voulez:

var jq = jQuery.noConflict(true);

Je pense que cette dernière option est principalement utilisée pour mélanger les versions de jQuery, en particulier pour les plugins obsolètes lorsque vous souhaitez mettre à jour jQuery lui-même:

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
    var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>
34
Jonathan Lonowski

Par défaut, jquery utilise la variable jQuery et le $ est utilisé pour votre commodité. Si vous voulez éviter les conflits, un bon moyen est d'encapsuler jQuery de la manière suivante:

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)
11
Derek Hunziker

Si je ne me trompe pas:

var jq = $.noConflict();

alors vous pouvez appeler la fonction jquery avec jq. (peu importe).

jq('#selector');
2
aepheus

Cela vous permet de donner un nom différent à la variable jQuery et de l'utiliser quand même:

<script type="text/javascript">
  $jq = $.noConflict();
  // Code that uses other library's $ can follow here.
  //use $jq for all calls to jQuery:
  $jq.ajax(...)
  $jq('selector')
</script>
1
Neal

Il est généralement utilisé si vous utilisez une autre bibliothèque utilisant $.

Afin de continuer à utiliser le symbole $ pour jQuery, j'utilise généralement:

jQuery.noConflict()(function($){
  // jQuery code here
});
1
Ivan

Si vous regardez les exemples sur la page api, vous verrez ceci: Exemple: crée un alias différent de jQuery à utiliser dans le reste du script. 

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Mettez la var j = jQuery.noConflict() après avoir introduit jquery, puis les scripts en conflit. Vous pouvez ensuite utiliser j à la place de $ pour tous vos besoins en jquery et utiliser le $ pour l'autre script.

1
scrappedcola

J'ai corrigé cette erreur en ajoutant ce code de conflit 

<script type="text/javascript">
 jQuery.noConflict(); 
</script>

après mes fichiers jQuery et js et obtenir le fichier était l'erreur (trouvée par la console du navigateur) et remplacer tous les '$' par jQuery suivant sur tous les fichiers js d'erreur sur mon site Web Magento. Cela fonctionne pour moi bien . Trouvez plus de détails sur mon blog ici

1
Niroshan
/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */

 var jq = $.noConflict();
    (function($){
      $('document').ready(function(){
        $('button').click(function(){
          alert($('.para').text());
        })
      })
    })(jq);


    live view example on codepen easy to understand.
    http://codepen.io/kaushik/pen/QGjeJQ
0
Rajbir Sharma
<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
    <script>
         var $i = jQuery.noConflict();
      // alert($i.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery-1.8.3.js"></script>
    <script>
        var $j = jQuery.noConflict();
      //alert($j.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery.colorbox.js"></script>

    <script src="Js/jquery-1.12.3.js"></script>
    <script>
        var $NJS = jQuery.noConflict();
    </script>

Vous pouvez le faire comme ça:

<script>
   $i.alert('hi i am jquery-1.4.2.js alert function');
   $j.alert('hi i am jquery-1.8.3.js alert function');
 </script>
0
pankaj prajapati

Aujourd'hui, j'ai ce problème parce que j'ai implémenté le "menu d'amorçage" qui utilise une version de jQuery avec "la galerie d'images fancybox". Bien sûr, un plugin fonctionne et l'autre pas à cause d'un conflit jQuery mais je l'ai surmonté comme suit:

Tout d'abord, j'ai ajouté le "menu bootstrap" Js dans le pied de page du script, car le menu est présenté sur toutes les pages du site:

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>

Et dans la page de la galerie d'images "fancybox" comme suit:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

Et la bonne chose est que les deux fonctionnent comme un charme :)

Essaie :)

0
Al3abMizo Games

En plus de cela, passer de true à $ .noConflict ( true ); restaurera également la variable globale jQuery précédente (le cas échéant), afin que les plugins puissent être initialisés avec la version correcte de jQuery lorsque plusieurs versions sont utilisées.

0
Andrew Kolesnikov

Vous affectez simplement une variable personnalisée que JQuery doit utiliser à la place de sa valeur par défaut $. JQuery s’enveloppe ensuite dans une nouvelle étendue de fonction afin que $ n’ait plus de conflit d’espace de nom.

<script type="text/javascript">
    $jQuery = $.noConflict();
    // Other library code here which uses '$'
    $jQuery(function(){ /* dom ready */ }
</script>
0
AlienWebguy

La méthode noConflict () libère l'identifiant $ shortcut, afin que d'autres scripts puissent l'utiliser ultérieurement.

Jquery $ par défaut:

// Actin  with $
$(function(){
    $(".add").hide();
    $(".add2").show();
});

Ou comme coutume:

var j = jQuery.noConflict();
 // Action with j
j(function(){
    j(".edit").hide();
    j(".add2").show();
});
0
Kabir Hossain