web-dev-qa-db-fra.com

JQuery Conflits avec Primefaces?

J'ai inclus JQuery1.5 dans l'en-tête d'une page JSF. Sur cette page, il y a un tas de composants Primefaces déjà codés. Après avoir inclus le Jquery.js dans l'en-tête de la page, certains composants primefaces comme <p:commandButton> perd sa peau et <p:fileUpload> ressemble à un JSP normal <input type="file"> et perdre entièrement sa capacité AJAX.

Existe-t-il un moyen d'utiliser JQuery en toute sécurité avec des primefaces (sans conflit)?

jsf-2primefacesjquery-1.5
34
Selvin

J'ai eu le même problème que celui décrit dans la question. C'est pourquoi j'ai trouvé la solution suivante:

Inclure la bibliothèque jQuery intégrée de primefaces (actuellement 1.4.1) car l'inclusion d'une propre bibliothèque jQuery entraîne des problèmes de formatage CSS. L'ajout de l'attribut target="head" Permet de spécifier la balise partout - par exemple lors de l'utilisation de modèles, vous n'avez pas toujours accès à la balise <head>:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

La bibliothèque jQuery de primefaces est incluse par défaut en mode conflit. Cela signifie que le raccourci $() ne peut pas être utilisé. Pour résoudre ce problème, incluez la ligne suivante dans une balise <script> Ou <h:outputScript>:

<h:outputScript target="head">
    // Add the $() function
    $ = jQuery;
    // Now you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>

C'est la meilleure solution que j'ai pu creuser jusqu'à présent, en utilisant Primefaces 2.2.1.

50
Lars Blumberg

Pourquoi ne pas utiliser les bundles jquery avec PrimeFaces?

<h:outputScript library="primefaces" name="jquery/jquery.js" />

PrimeFaces 2.2.1 a jQuery 1.4.4 et 3.0 (en développement) a 1.5.1.

43
Cagatay Civici

De nombreuses bibliothèques JavaScript utilisent $ comme nom de fonction ou de variable, tout comme jQuery. Dans le cas de jQuery, $ est juste un alias pour jQuery , donc tous la fonctionnalité est disponible sans utiliser $ . voici quelques méthodes:

  • Ecrivez jQuery.noConflict(); avant l'initialisation de jQuery, voir ci-dessous

    jQuery.noConflict();
$(document).ready(function(){
   // your jQuery code   
});

  • Créez un alias différent au lieu de jQuery à utiliser dans le reste du script.

     var j = jQuery.noConflict();
 // Do something with jQuery
 j("div p").hide();

  • Changer toutes les instances de $ : remplacer $ avec jQuery dans le bloc de code jQuery

     jQuery(document).ready(function){
       jQuery("div p").hide();
 })

  • Déplacez complètement jQuery vers un nouvel espace de noms dans un autre objet.

    var dom = {};
dom.query = jQuery.noConflict(true);
// Do something with the new jQuery
dom.query("div p").hide();

  • Définissez la portée de $ sur local au lieu de global

        // Method 1
    jQuery(document).ready(function($){
         $("div").hide();
    });


    // Method 2
    (function($) {
      /* some code that uses $ */ 
    })(jQuery);

    Remarque: ce point présente un inconvénient, vous n'aurez pas accès à votre autre bibliothèque $ () méthode.

Original Reference

7
diEcho

Ma solution est d'ajouter ce code dans la page par défaut:

<script type="text/javascript">var $j = jQuery.noConflict(true);</script>

Après cela, j'utilise jquery avec:

$j

Merci,

6
Marin

Mon expérience:

J'ai eu le même problème et je ne l'ai jamais fait fonctionner avec les deux bibliothèques jquery. (J'utilise jQuery au lieu de $ Mais je n'ai jamais essayé jQuery.noConflict()).

Ma solution était de n'utiliser que la bibliothèque livrée avec des primefaces comme décrit dans la réponse de Cagatays.

3
Matt Handy

jQuery a un mode ' noConflict ' qui lui permet de jouer agréablement côte à côte avec d'autres bibliothèques. Je n'ai pas utilisé de composants Primefaces, donc je ne suis pas sûr, mais si vous incluez jQuery en mode noconflict, vos problèmes disparaîtront probablement.

3
MightyE

pour résoudre le conflit entre Primefaces et jQuery, évitez d'importer un fichier jQuery externe, donc pour résoudre le problème, importez les fichiers jQuery situés dans le pot primefaces

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
        <h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />

et dans votre code jQuery, remplacez $ par jQuery.

1
Hamza Toussi